You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
517 lines
8.2 KiB
CSS
517 lines
8.2 KiB
CSS
/**
|
|
* Wing v1.0.0-beta
|
|
* Copyright 2016-2018 Kabir Shah
|
|
* Released under the MIT License
|
|
* http://usewing.ml
|
|
*/
|
|
|
|
/*=============================
|
|
Base Styles
|
|
=============================*/
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
line-height: 1.6;
|
|
color: #111;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
}
|
|
/*=============================
|
|
Grid
|
|
=============================*/
|
|
.container {
|
|
width: 80%;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
}
|
|
.row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.row .col {
|
|
flex-grow: 1;
|
|
flex-basis: 0;
|
|
}
|
|
.row .col-1 {
|
|
width: 8.333333333333332%;
|
|
}
|
|
.row .col-2 {
|
|
width: 16.666666666666664%;
|
|
}
|
|
.row .col-3 {
|
|
width: 25%;
|
|
}
|
|
.row .col-4 {
|
|
width: 33.33333333333333%;
|
|
}
|
|
.row .col-5 {
|
|
width: 41.66666666666667%;
|
|
}
|
|
.row .col-6 {
|
|
width: 50%;
|
|
}
|
|
.row .col-7 {
|
|
width: 58.333333333333336%;
|
|
}
|
|
.row .col-8 {
|
|
width: 66.66666666666666%;
|
|
}
|
|
.row .col-9 {
|
|
width: 75%;
|
|
}
|
|
.row .col-10 {
|
|
width: 83.33333333333334%;
|
|
}
|
|
.row .col-11 {
|
|
width: 91.66666666666666%;
|
|
}
|
|
.row .col-12 {
|
|
width: 100%;
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
.row .col,
|
|
.row [class^='col-'],
|
|
.row [class*=" col-"] {
|
|
flex-grow: 0;
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
/*=============================
|
|
Typography
|
|
=============================*/
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-weight: 500;
|
|
}
|
|
h1 {
|
|
font-size: 37.009px;
|
|
line-height: 1.3;
|
|
}
|
|
h2 {
|
|
font-size: 32.182px;
|
|
line-height: 1.35;
|
|
}
|
|
h3 {
|
|
font-size: 27.984px;
|
|
line-height: 1.4;
|
|
}
|
|
h4 {
|
|
font-size: 24.334px;
|
|
line-height: 1.45;
|
|
}
|
|
h5 {
|
|
font-size: 21.16px;
|
|
line-height: 1.5;
|
|
}
|
|
h6 {
|
|
font-size: 18.4px;
|
|
line-height: 1.55;
|
|
}
|
|
p {
|
|
font-size: 16px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
h1 {
|
|
font-size: 33.311px;
|
|
}
|
|
h2 {
|
|
font-size: 29.479px;
|
|
}
|
|
h3 {
|
|
font-size: 26.088px;
|
|
}
|
|
h4 {
|
|
font-size: 23.086px;
|
|
}
|
|
h5 {
|
|
font-size: 20.43px;
|
|
}
|
|
h6 {
|
|
font-size: 18.08px;
|
|
}
|
|
}
|
|
/*=============================
|
|
Form
|
|
=============================*/
|
|
input[type=text],
|
|
input[type=password],
|
|
input[type=email],
|
|
input[type=search],
|
|
input[type=number],
|
|
input[type=file],
|
|
input[type=tel],
|
|
input[type=url],
|
|
select,
|
|
textarea {
|
|
height: 45px;
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
padding: 16px;
|
|
font-size: 16px;
|
|
background: #f5f5f5;
|
|
border: 1px solid #a7a7a7;
|
|
border-radius: 2px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
input[type=text]:hover,
|
|
input[type=password]:hover,
|
|
input[type=email]:hover,
|
|
input[type=search]:hover,
|
|
input[type=number]:hover,
|
|
input[type=file]:hover,
|
|
input[type=tel]:hover,
|
|
input[type=url]:hover,
|
|
select:hover,
|
|
textarea:hover {
|
|
border-color: #111;
|
|
}
|
|
input[type=text]:focus,
|
|
input[type=password]:focus,
|
|
input[type=email]:focus,
|
|
input[type=search]:focus,
|
|
input[type=number]:focus,
|
|
input[type=file]:focus,
|
|
input[type=tel]:focus,
|
|
input[type=url]:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
outline: none;
|
|
border-color: #0062ff;
|
|
}
|
|
textarea {
|
|
min-height: 70px;
|
|
}
|
|
/*=============================
|
|
Button
|
|
=============================*/
|
|
button,
|
|
.button,
|
|
[type=submit] {
|
|
height: 45px;
|
|
margin-bottom: 16px;
|
|
padding: 10px 30px;
|
|
outline: none;
|
|
text-decoration: none;
|
|
color: #f5f5f5;
|
|
font-size: 16px;
|
|
background: #111;
|
|
border: 1px solid #111;
|
|
border-radius: 2px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
button:hover,
|
|
.button:hover,
|
|
[type=submit]:hover,
|
|
button:focus,
|
|
.button:focus,
|
|
[type=submit]:focus {
|
|
opacity: 0.9;
|
|
}
|
|
button:active,
|
|
.button:active,
|
|
[type=submit]:active {
|
|
opacity: 0.7;
|
|
}
|
|
button[disabled],
|
|
.button[disabled],
|
|
[type=submit][disabled] {
|
|
opacity: 0.8;
|
|
cursor: not-allowed;
|
|
}
|
|
button.outline,
|
|
.button.outline,
|
|
[type=submit].outline {
|
|
color: #111;
|
|
background: none;
|
|
}
|
|
button.outline:hover,
|
|
.button.outline:hover,
|
|
[type=submit].outline:hover,
|
|
button.outline:focus,
|
|
.button.outline:focus,
|
|
[type=submit].outline:focus {
|
|
color: #f5f5f5;
|
|
background: #111;
|
|
}
|
|
/*=============================
|
|
Link
|
|
=============================*/
|
|
a {
|
|
color: #0062ff;
|
|
transition: all 0.2s ease;
|
|
}
|
|
a:hover {
|
|
cursor: pointer;
|
|
color: #111;
|
|
}
|
|
/*=============================
|
|
List
|
|
=============================*/
|
|
ul,
|
|
ol {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
padding-left: 0;
|
|
list-style-position: inside;
|
|
}
|
|
ul li,
|
|
ol li {
|
|
margin-bottom: 16px;
|
|
}
|
|
ul li:last-child,
|
|
ol li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
ul ul,
|
|
ol ul,
|
|
ul ol,
|
|
ol ol {
|
|
margin-left: 16px;
|
|
}
|
|
/*=============================
|
|
Image
|
|
=============================*/
|
|
img {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
/*=============================
|
|
Box
|
|
=============================*/
|
|
.box {
|
|
margin-bottom: 16px;
|
|
padding-top: 16px;
|
|
padding-right: 16px;
|
|
padding-left: 16px;
|
|
border: 1px solid #a7a7a7;
|
|
border-radius: 2px;
|
|
}
|
|
/*=============================
|
|
Navigation
|
|
=============================*/
|
|
.nav {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
.nav .nav-item {
|
|
margin-right: 16px;
|
|
}
|
|
.nav .nav-item:last-child {
|
|
margin-right: 0;
|
|
}
|
|
/*=============================
|
|
Card
|
|
=============================*/
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 16px;
|
|
border: 1px solid #a7a7a7;
|
|
border-radius: 2px;
|
|
}
|
|
.card .card-content {
|
|
margin: 0;
|
|
padding: 16px;
|
|
}
|
|
.card .card-image {
|
|
display: block;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
/*=============================
|
|
Code
|
|
=============================*/
|
|
pre {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
pre code {
|
|
display: block;
|
|
padding: 16px;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
code {
|
|
padding: 2px;
|
|
white-space: nowrap;
|
|
background: #e7e7e7;
|
|
border: 1px solid #d7d7d7;
|
|
border-radius: 2px;
|
|
font-family: "Consolas", "Monaco", "Menlo", monospace;
|
|
}
|
|
/*=============================
|
|
Divider
|
|
=============================*/
|
|
hr {
|
|
border-width: 0.5px;
|
|
border-color: #a7a7a7;
|
|
}
|
|
/*=============================
|
|
Utilities
|
|
=============================*/
|
|
.position-relative {
|
|
position: relative;
|
|
}
|
|
.position-absolute {
|
|
position: absolute;
|
|
}
|
|
.position-fixed {
|
|
position: fixed;
|
|
}
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
.size-full-height {
|
|
min-height: 100vh;
|
|
}
|
|
.size-full-width {
|
|
width: 100%;
|
|
}
|
|
.size-full {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.justify-start {
|
|
justify-content: flex-start;
|
|
}
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
.justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
.align-start {
|
|
align-items: flex-start;
|
|
}
|
|
.align-center {
|
|
align-items: center;
|
|
}
|
|
.align-end {
|
|
align-items: flex-end;
|
|
}
|
|
.direction-vertical {
|
|
flex-direction: column;
|
|
}
|
|
.direction-horizontal {
|
|
flex-direction: row;
|
|
}
|
|
.center {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.border-black {
|
|
border: 1px solid #111;
|
|
}
|
|
.border-gray {
|
|
border: 1px solid #a7a7a7;
|
|
}
|
|
.border-white {
|
|
border: 1px solid #f5f5f5;
|
|
}
|
|
.border-blue {
|
|
border: 1px solid #0062ff;
|
|
}
|
|
.border-red {
|
|
border: 1px solid #ff1500;
|
|
}
|
|
.border-yellow {
|
|
border: 1px solid #ffbf00;
|
|
}
|
|
.border-green {
|
|
border: 1px solid #00b30f;
|
|
}
|
|
.border-rounded {
|
|
border-radius: 2px;
|
|
}
|
|
.border-circle {
|
|
border-radius: 2px;
|
|
}
|
|
.color-black {
|
|
color: #111;
|
|
}
|
|
.color-gray {
|
|
color: #a7a7a7;
|
|
}
|
|
.color-white {
|
|
color: #f5f5f5;
|
|
}
|
|
.color-blue {
|
|
color: #0062ff;
|
|
}
|
|
.color-red {
|
|
color: #ff1500;
|
|
}
|
|
.color-yellow {
|
|
color: #ffbf00;
|
|
}
|
|
.color-green {
|
|
color: #00b30f;
|
|
}
|
|
.background-black {
|
|
background-color: #111;
|
|
}
|
|
.background-gray {
|
|
background-color: #a7a7a7;
|
|
}
|
|
.background-white {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.background-blue {
|
|
background-color: #0062ff;
|
|
}
|
|
.background-red {
|
|
background-color: #ff1500;
|
|
}
|
|
.background-yellow {
|
|
background-color: #ffbf00;
|
|
}
|
|
.background-green {
|
|
background-color: #00b30f;
|
|
}
|