coco
364 lines
7.1 KiB
CSS
364 lines
7.1 KiB
CSS
html{
|
|
-webkit-text-size-adjust:100%;
|
|
-ms-text-size-adjust:100%;
|
|
text-size-adjust:100%
|
|
}
|
|
|
|
body{
|
|
margin:0;
|
|
overflow-y:scroll;
|
|
font-family:Roboto,sans-serif;
|
|
font-weight:400;
|
|
font-size:1rem;
|
|
letter-spacing:normal;
|
|
line-height:1.75;
|
|
color:rgba(0,0,0,.87);
|
|
-moz-osx-font-smoothing:grayscale;
|
|
-webkit-font-smoothing:antialiased
|
|
}
|
|
main{
|
|
max-width:600px;
|
|
margin:6em auto;
|
|
padding-left:1em;
|
|
padding-right:1em
|
|
}
|
|
|
|
.subtitle,h1,h2{
|
|
margin:2em 0 .3em -.07em;
|
|
font-weight:400;
|
|
letter-spacing:.02em;
|
|
line-height:1
|
|
}
|
|
|
|
h1{
|
|
font-size:3.5rem
|
|
}
|
|
.subtitle{
|
|
font-size:1.5rem;
|
|
line-height:1.2
|
|
}
|
|
.subtitle,ol,p,ul{
|
|
margin-top:0;
|
|
margin-bottom:1.5rem
|
|
}
|
|
strong{
|
|
font-weight:500
|
|
}
|
|
.bottom-nav{
|
|
display:-webkit-box;
|
|
display:-ms-flexbox;
|
|
display:flex;
|
|
-webkit-box-align:center;
|
|
-ms-flex-align:center;
|
|
align-items:center;
|
|
-webkit-box-pack:center;
|
|
-ms-flex-pack:center;
|
|
justify-content:center;
|
|
position:fixed;
|
|
bottom:0;
|
|
left:0;
|
|
right:0;
|
|
box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
|
|
border-top:1px solid #e0e0e0;
|
|
background-color:#fff;
|
|
z-index:1;
|
|
-webkit-tap-highlight-color:transparent
|
|
}
|
|
.bottom-nav__action{
|
|
padding:8px 12px;
|
|
min-width:56px;
|
|
max-width:144px;
|
|
-webkit-box-flex:1;
|
|
-ms-flex:1 1 auto;
|
|
flex:1 1 auto;
|
|
color:#757575;
|
|
text-decoration:none
|
|
}
|
|
.bottom-nav__action:not(:last-child){
|
|
margin-right:12px
|
|
}
|
|
.bottom-nav__action--active{
|
|
padding-top:6px;
|
|
color:#F57C00
|
|
}
|
|
.bottom-nav__icon{
|
|
display:block;
|
|
width:1em;
|
|
height:1em;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
margin-bottom:4px;
|
|
font-size:24px
|
|
}
|
|
.bottom-nav__icon path,.bottom-nav__icon polygon,.bottom-nav__icon rect{
|
|
fill:currentColor
|
|
}
|
|
.bottom-nav__icon circle{
|
|
stroke:currentColor;
|
|
stroke-width:1
|
|
}
|
|
.bottom-nav__label{
|
|
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Droid Sans,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
|
|
line-height:1;
|
|
text-align:center;
|
|
white-space:nowrap;
|
|
display:block;
|
|
font-size:12px
|
|
}
|
|
.bottom-nav__action--active .bottom-nav__label{
|
|
font-size:14px
|
|
}
|
|
.no-labels-nav{
|
|
display:-webkit-box;
|
|
display:-ms-flexbox;
|
|
display:flex;
|
|
-webkit-box-align:center;
|
|
-ms-flex-align:center;
|
|
align-items:center;
|
|
-webkit-box-pack:center;
|
|
-ms-flex-pack:center;
|
|
justify-content:center;
|
|
position:fixed;
|
|
bottom:0;
|
|
left:0;
|
|
right:0;
|
|
box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
|
|
border-top:1px solid #e0e0e0;
|
|
background-color:#009688;
|
|
z-index:1;
|
|
-webkit-tap-highlight-color:transparent
|
|
}
|
|
.no-labels-nav__action{
|
|
padding:16px 12px;
|
|
min-width:32px;
|
|
max-width:72px;
|
|
-webkit-box-flex:1;
|
|
-ms-flex:1 1 auto;
|
|
flex:1 1 auto;
|
|
color:#e0e0e0;
|
|
text-decoration:none
|
|
}
|
|
.no-labels-nav__action:not(:last-child){
|
|
margin-right:12px
|
|
}
|
|
.no-labels-nav__action--active{
|
|
padding-top:6px;
|
|
color:#fff;
|
|
padding-bottom:8px;
|
|
min-width:56px;
|
|
max-width:144px
|
|
}
|
|
.no-labels-nav__icon{
|
|
display:block;
|
|
width:1em;
|
|
height:1em;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
font-size:24px
|
|
}
|
|
.no-labels-nav__icon path,.no-labels-nav__icon polygon,.no-labels-nav__icon rect{
|
|
fill:currentColor
|
|
}
|
|
.no-labels-nav__icon circle{
|
|
stroke:currentColor;
|
|
stroke-width:1
|
|
}
|
|
.no-labels-nav__action--active .no-labels-nav__icon{
|
|
margin-bottom:4px
|
|
}
|
|
.no-labels-nav__label{
|
|
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Droid Sans,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
|
|
line-height:1;
|
|
text-align:center;
|
|
white-space:nowrap;
|
|
display:none
|
|
}
|
|
.no-labels-nav__action--active .no-labels-nav__label{
|
|
font-size:14px;
|
|
display:block
|
|
}
|
|
|
|
a{
|
|
text-decoration: none;
|
|
color: #0277BD;
|
|
font-weight: 500;
|
|
}
|
|
|
|
h4{
|
|
margin-bottom: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
h3{
|
|
margin-bottom: 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.text_light{
|
|
font-weight: 300;
|
|
}
|
|
|
|
.circular {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 150px;
|
|
-webkit-border-radius: 150px;
|
|
-moz-border-radius: 150px;
|
|
float: left;
|
|
display: table-cell;
|
|
}
|
|
|
|
.btn {
|
|
position: relative;
|
|
|
|
display: block;
|
|
margin: 30px auto;
|
|
padding: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
border-width: 0;
|
|
outline: none;
|
|
border-radius: 2px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
|
|
|
|
background-color: #00B8D4;
|
|
color: #ecf0f1;
|
|
|
|
transition: background-color .3s;
|
|
}
|
|
|
|
.btn:hover, .btn:focus {
|
|
background-color: #0277BD;
|
|
}
|
|
|
|
.btn > * {
|
|
position: relative;
|
|
}
|
|
|
|
.btn span {
|
|
display: block;
|
|
padding: 12px 24px;
|
|
}
|
|
|
|
.btn:before {
|
|
content: "";
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
|
|
display: block;
|
|
width: 0;
|
|
padding-top: 0;
|
|
|
|
border-radius: 100%;
|
|
|
|
background-color: rgba(236, 240, 241, .3);
|
|
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-moz-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
-o-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.btn:active:before {
|
|
width: 120%;
|
|
padding-top: 120%;
|
|
|
|
transition: width .2s ease-out, padding-top .2s ease-out;
|
|
}
|
|
|
|
/* form starting stylings ------------------------------- */
|
|
.group {
|
|
position:relative;
|
|
margin-bottom:45px;
|
|
}
|
|
input {
|
|
font-size:18px;
|
|
padding:10px 10px 10px 5px;
|
|
display:block;
|
|
width:300px;
|
|
border:none;
|
|
border-bottom:1px solid #757575;
|
|
}
|
|
input:focus { outline:none; }
|
|
|
|
/* LABEL ======================================= */
|
|
label {
|
|
color:#999;
|
|
font-size:18px;
|
|
font-weight:normal;
|
|
position:absolute;
|
|
pointer-events:none;
|
|
left:5px;
|
|
top:10px;
|
|
transition:0.2s ease all;
|
|
-moz-transition:0.2s ease all;
|
|
-webkit-transition:0.2s ease all;
|
|
}
|
|
|
|
/* active state */
|
|
input:focus ~ label, input:valid ~ label {
|
|
top:-20px;
|
|
font-size:14px;
|
|
color:#FF9800;
|
|
}
|
|
|
|
/* BOTTOM BARS ================================= */
|
|
.bar { position:relative; display:block; width:300px; }
|
|
.bar:before, .bar:after {
|
|
content:'';
|
|
height:2px;
|
|
width:0;
|
|
bottom:1px;
|
|
position:absolute;
|
|
background: #FF9800;
|
|
transition:0.2s ease all;
|
|
-moz-transition:0.2s ease all;
|
|
-webkit-transition:0.2s ease all;
|
|
}
|
|
.bar:before {
|
|
left:50%;
|
|
}
|
|
.bar:after {
|
|
right:50%;
|
|
}
|
|
|
|
/* active state */
|
|
input:focus ~ .bar:before, input:focus ~ .bar:after {
|
|
width:50%;
|
|
}
|
|
|
|
/* HIGHLIGHTER ================================== */
|
|
.highlight {
|
|
position:absolute;
|
|
height:60%;
|
|
width:100px;
|
|
top:25%;
|
|
left:0;
|
|
pointer-events:none;
|
|
opacity:0.5;
|
|
}
|
|
|
|
/* active state */
|
|
input:focus ~ .highlight {
|
|
-webkit-animation:inputHighlighter 0.3s ease;
|
|
-moz-animation:inputHighlighter 0.3s ease;
|
|
animation:inputHighlighter 0.3s ease;
|
|
}
|
|
|
|
/* ANIMATIONS ================ */
|
|
@-webkit-keyframes inputHighlighter {
|
|
from { background:#FF9800; }
|
|
to { width:0; background:transparent; }
|
|
}
|
|
@-moz-keyframes inputHighlighter {
|
|
from { background:#FF9800; }
|
|
to { width:0; background:transparent; }
|
|
}
|
|
@keyframes inputHighlighter {
|
|
from { background:#FF9800; }
|
|
to { width:0; background:transparent; }
|
|
} |