Adding mixins.
This commit is contained in:
connors
Родитель
2ac06451ee
Коммит
19970e9805
|
|
@ -254,13 +254,13 @@ strong {
|
|||
left: 0;
|
||||
overflow: auto;
|
||||
background-color: #efeff4;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-transition-property: top, bottom;
|
||||
transition-property: top, bottom;
|
||||
-webkit-transition-duration: .2s, .2s;
|
||||
transition-duration: .2s, .2s;
|
||||
-webkit-transition-duration: 0.2s, 0.2s;
|
||||
transition-duration: 0.2s, 0.2s;
|
||||
-webkit-transition-timing-function: linear, linear;
|
||||
transition-timing-function: linear, linear;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.content > * {
|
||||
|
|
@ -292,6 +292,7 @@ strong {
|
|||
height: 44px;
|
||||
padding: 5px 10px;
|
||||
background-color: rgba(247, 247, 247, 0.98);
|
||||
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
[class*="bar-"].bar-header-secondary {
|
||||
|
|
@ -301,6 +302,7 @@ strong {
|
|||
bottom: 0;
|
||||
}
|
||||
[class*="bar-"].bar-footer.bar-standard, [class*="bar-"].bar-footer-secondary.bar-standard {
|
||||
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
|
|
@ -342,6 +344,7 @@ strong {
|
|||
bottom: 0;
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
-webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
|
||||
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
|
|
@ -385,6 +388,7 @@ strong {
|
|||
padding-left: 15px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 12px 12px 0 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.popover .bar-nav .title + [class*="button"]:last-child {
|
||||
|
|
@ -517,8 +521,8 @@ input[type="color"],
|
|||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type=search] {
|
||||
|
|
@ -544,8 +548,7 @@ select {
|
|||
height: auto;
|
||||
font-size: 14px;
|
||||
background-color: #f8f8f8;
|
||||
background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
|
||||
background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -564,6 +567,7 @@ select {
|
|||
border: 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -620,8 +624,12 @@ select {
|
|||
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
|
||||
color: #fff;
|
||||
background-color: #929292;
|
||||
-webkit-transition: background-color .1s linear, opacity .1s linear;
|
||||
transition: background-color .1s linear, opacity .1s linear;
|
||||
-webkit-transition: background-color, opacity;
|
||||
transition: background-color, opacity;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-webkit-transition-timing-function: linear;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
[class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
|
||||
opacity: .6;
|
||||
|
|
@ -668,8 +676,8 @@ select {
|
|||
line-height: 44px;
|
||||
color: #007aff;
|
||||
border: 0;
|
||||
-webkit-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
-webkit-box-flex: 0;
|
||||
box-flex: 0;
|
||||
}
|
||||
|
|
@ -874,7 +882,8 @@ input[type="button"] {
|
|||
}
|
||||
.segmented-controller li.selected {
|
||||
background-color: #007aff;
|
||||
transition: background-color .2s linear;
|
||||
-webkit-transition: background-color 0.2s linear;
|
||||
transition: background-color 0.2s linear;
|
||||
}
|
||||
.segmented-controller li.selected > a {
|
||||
color: #fff;
|
||||
|
|
@ -916,8 +925,8 @@ input[type="button"] {
|
|||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
-webkit-transform: translate3d(0, -15px, 0);
|
||||
transform: translate3d(0, -15px, 0);
|
||||
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
-webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
}
|
||||
.popover:after {
|
||||
position: absolute;
|
||||
|
|
@ -958,16 +967,18 @@ input[type="button"] {
|
|||
background-color: #fff;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
|
||||
transition: transform .25s, opacity 1ms .25s;
|
||||
-webkit-transition: -webkit-transform 0.25s, transform 0.25s, opacity 1ms 0.25s;
|
||||
transition: -webkit-transform 0.25s, transform 0.25s, opacity 1ms 0.25s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
|
||||
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
|
||||
}
|
||||
.modal.active {
|
||||
opacity: 1;
|
||||
height: 100%;
|
||||
-webkit-transition: -webkit-transform .25s;
|
||||
transition: transform .25s;
|
||||
-webkit-transition: -webkit-transform 0.25s, transform 0.25s;
|
||||
transition: -webkit-transform 0.25s, transform 0.25s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
|
||||
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
|
@ -1018,9 +1029,14 @@ input[type="button"] {
|
|||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 100px;
|
||||
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
|
||||
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
|
||||
-webkit-transition-property: -webkit-transform, border;
|
||||
transition-property: -webkit-transform, border;
|
||||
-webkit-transition-duration: 0.1s;
|
||||
transition-duration: 0.1s;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
.toggle.active {
|
||||
background-color: #4cd964;
|
||||
|
|
@ -1035,25 +1051,26 @@ input[type="button"] {
|
|||
.content.fade {
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity .2s ease-in-out;
|
||||
transition: opacity .2s ease-in-out;
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
.content.fade.in {
|
||||
opacity: 1;
|
||||
}
|
||||
.content.slide {
|
||||
z-index: 2;
|
||||
-webkit-transition: -webkit-transform .5s;
|
||||
transition: transform .5s;
|
||||
-webkit-transition: -webkit-transform 0.4s;
|
||||
transition: -webkit-transform 0.4s;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
|
||||
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
|
||||
}
|
||||
.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) {
|
||||
-webkit-animation-name: fadeOverlay;
|
||||
animation-name: fadeOverlay;
|
||||
-webkit-animation-duration: .4s;
|
||||
animation-duration: .4s;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
.content.slide.right:not([class*="sliding-in"]) {
|
||||
-webkit-animation-direction: reverse;
|
||||
|
|
@ -1072,10 +1089,12 @@ input[type="button"] {
|
|||
|
||||
@-webkit-keyframes fadeOverlay {
|
||||
from {
|
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
|
||||
.bar-nav {
|
||||
top: 20px;
|
||||
-webkit-box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
|
||||
box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
height: $bar-base-height;
|
||||
padding: 5px $bar-side-spacing;
|
||||
background-color: $chrome-color;
|
||||
box-shadow: 0 0 1px rgba(0,0,0,.85);
|
||||
@include box-shadow(0 0 1px rgba(0,0,0,.85));
|
||||
|
||||
// Modifier class to dock any bar below .bar-nav
|
||||
&.bar-header-secondary {
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
// Flip border position to top for footer bars
|
||||
&.bar-footer.bar-standard,
|
||||
&.bar-footer-secondary.bar-standard {
|
||||
box-shadow: 0 0 1px rgba(0,0,0,.85);
|
||||
@include box-shadow(0 0 1px rgba(0,0,0,.85));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,8 +38,7 @@
|
|||
top: 0;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
-webkit-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
@include box-orient(horizontal);
|
||||
}
|
||||
|
||||
// Centered text in the .bar-nav
|
||||
|
|
@ -79,7 +78,7 @@
|
|||
bottom: 0;
|
||||
height: $bar-tab-height;
|
||||
padding: 0;
|
||||
box-shadow: 0 0px 1px rgba(0,0,0,.85);
|
||||
@include box-shadow(0 0px 1px rgba(0,0,0,.85));
|
||||
}
|
||||
|
||||
// Wrapper for individual tab
|
||||
|
|
@ -90,8 +89,7 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
-webkit-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
@include box-orient(horizontal);
|
||||
}
|
||||
|
||||
// Navigational tab
|
||||
|
|
@ -99,8 +97,7 @@
|
|||
height: 100%;
|
||||
padding-top: 9px;
|
||||
text-align: center;
|
||||
-webkit-box-flex: 1;
|
||||
box-flex: 1;
|
||||
@include box-flex(1);
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
|
|
@ -128,7 +125,7 @@
|
|||
padding-left: 15px;
|
||||
border-bottom: 1px solid rgba(0,0,0,.15);
|
||||
border-radius: 12px 12px 0 0;
|
||||
box-shadow: none;
|
||||
@include box-shadow(none);
|
||||
|
||||
.title + [class*="button"]:last-child {
|
||||
right: 15px;
|
||||
|
|
|
|||
|
|
@ -37,13 +37,10 @@ strong {
|
|||
left: 0;
|
||||
overflow: auto;
|
||||
background-color: #efeff4;
|
||||
-webkit-transition-property: top, bottom;
|
||||
transition-property: top, bottom;
|
||||
-webkit-transition-duration: .2s, .2s;
|
||||
transition-duration: .2s, .2s;
|
||||
-webkit-transition-timing-function: linear, linear;
|
||||
transition-timing-function: linear, linear;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@include transition-property(top, bottom);
|
||||
@include transition-duration(.2s, .2s);
|
||||
@include transition-timing-function(linear, linear);
|
||||
}
|
||||
|
||||
// Hack to force all relatively and absolutely positioned elements still render while scrolling
|
||||
|
|
|
|||
|
|
@ -24,8 +24,9 @@
|
|||
&.button-filled {
|
||||
color: #fff;
|
||||
background-color: $default-color;
|
||||
-webkit-transition: background-color .1s linear, opacity .1s linear;
|
||||
transition: background-color .1s linear, opacity .1s linear;
|
||||
@include transition(background-color, opacity);
|
||||
@include transition-duration(.2s);
|
||||
@include transition-timing-function(linear);
|
||||
}
|
||||
|
||||
// Disabled styles & filled button active styles
|
||||
|
|
@ -100,10 +101,8 @@
|
|||
line-height: $bar-base-height;
|
||||
color: $primary-color;
|
||||
border: 0;
|
||||
-webkit-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear;
|
||||
-webkit-box-flex: 0;
|
||||
box-flex: 0;
|
||||
@include transition(opacity .2s linear);
|
||||
@include box-flex(0);
|
||||
}
|
||||
|
||||
// Hacky way to right align buttons outside of flex-box system
|
||||
|
|
@ -184,13 +183,11 @@
|
|||
// Rotate the chevrons
|
||||
.button-prev:before,
|
||||
.button-next:after {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
@include transform(rotate(-45deg));
|
||||
}
|
||||
.button-prev:after,
|
||||
.button-next:before {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,12 +20,10 @@
|
|||
// Position and rotate respective halves of the chevron
|
||||
&:before {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
&:after {
|
||||
top: 8px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
@include transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
|
|
@ -36,8 +36,8 @@ input[type="color"],
|
|||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, .2);
|
||||
border-radius: 3px;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// Fully round search input
|
||||
|
|
@ -65,9 +65,7 @@ select {
|
|||
height: auto;
|
||||
font-size: 14px;
|
||||
background-color: #f8f8f8;
|
||||
background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
|
||||
background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
|
||||
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .1));
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -91,7 +89,7 @@ select {
|
|||
border: 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
// Remove bottom border on last input to avoid double bottom border
|
||||
|
|
|
|||
|
|
@ -11,20 +11,16 @@
|
|||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
|
||||
transition: transform .25s, opacity 1ms .25s;
|
||||
-webkit-transition-timing-function: $timing-fuction;
|
||||
@include transform(translate3d(0, 100%, 0));
|
||||
@include transition(-webkit-transform .25s, transform .25s, opacity 1ms .25s);
|
||||
@include transition-timing-function($timing-fuction);
|
||||
|
||||
// Active modal
|
||||
&.active {
|
||||
opacity: 1;
|
||||
height: 100%;
|
||||
-webkit-transition: -webkit-transform .25s;
|
||||
transition: transform .25s;
|
||||
-webkit-transition-timing-function: $timing-fuction;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
@include transition(-webkit-transform .25s, transform .25s);
|
||||
@include transition-timing-function($timing-fuction);
|
||||
@include transform(translate3d(0, 0, 0));
|
||||
}
|
||||
}
|
||||
|
|
@ -14,10 +14,8 @@
|
|||
border-radius: 12px;
|
||||
opacity: 0;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
|
||||
-webkit-transform: translate3d(0, -15px, 0);
|
||||
transform: translate3d(0, -15px, 0);
|
||||
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
@include transform(translate3d(0, -15px, 0));
|
||||
@include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
|
||||
|
||||
// Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
|
||||
&:after {
|
||||
|
|
@ -38,8 +36,7 @@
|
|||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
@include transform(translate3d(0, 0, 0));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@
|
|||
&.fade {
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity .2s ease-in-out;
|
||||
transition: opacity .2s ease-in-out;
|
||||
@include transition(opacity .2s ease-in-out);
|
||||
|
||||
&.in {
|
||||
opacity: 1;
|
||||
|
|
@ -19,42 +18,35 @@
|
|||
// Slide animation iOS7
|
||||
&.slide {
|
||||
z-index: 2;
|
||||
-webkit-transition: -webkit-transform .5s;
|
||||
transition: transform .5s;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transition-timing-function: $timing-fuction;
|
||||
@include transition(-webkit-transform .4s);
|
||||
@include transform(translate3d(0, 0, 0));
|
||||
@include transition-timing-function ($timing-fuction);
|
||||
|
||||
// Adding the overlay
|
||||
&.sliding-in,
|
||||
&.right:not([class*="sliding-in"]) {
|
||||
-webkit-animation-name: fadeOverlay;
|
||||
animation-name: fadeOverlay;
|
||||
-webkit-animation-duration: .4s;
|
||||
animation-duration: .4s;
|
||||
@include animation-name(fadeOverlay);
|
||||
@include animation-duration(.4s);
|
||||
}
|
||||
|
||||
&.right:not([class*="sliding-in"]) {
|
||||
-webkit-animation-direction: reverse;
|
||||
animation-direction: reverse;
|
||||
@include animation-direction(reverse);
|
||||
}
|
||||
|
||||
&.left {
|
||||
z-index: 1;
|
||||
-webkit-transform: translate3d(-20%, 0, 0); // Creates the parallax effect
|
||||
transform: translate3d(-20%, 0, 0);
|
||||
@include transform(translate3d(-20%, 0, 0)); // Creates the parallax effect
|
||||
}
|
||||
|
||||
&.right {
|
||||
z-index: 3;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
@include transform(translate3d(100%, 0, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay animation for the slide transition
|
||||
@-webkit-keyframes fadeOverlay {
|
||||
from { box-shadow: 0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0); }
|
||||
to { box-shadow: 0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1); }
|
||||
from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
|
||||
to { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
|
||||
}
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
|
||||
// Variables
|
||||
@import "variables.scss";
|
||||
|
||||
// Mixins
|
||||
@import "mixins.scss";
|
||||
|
||||
// Normalize & Base CSS
|
||||
@import "normalize.scss";
|
||||
@import "base.scss";
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@
|
|||
background-color: transparent;
|
||||
border: 1px solid $primary-color;
|
||||
border-radius: 4px;
|
||||
-webkit-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
@include box-orient(horizontal);
|
||||
|
||||
// Section within controller
|
||||
li {
|
||||
|
|
@ -23,8 +22,7 @@
|
|||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border-left: 1px solid $primary-color;
|
||||
-webkit-box-flex: 1;
|
||||
box-flex: 1;
|
||||
@include box-flex(1);
|
||||
|
||||
// Link that fills each section
|
||||
> a {
|
||||
|
|
@ -49,7 +47,7 @@
|
|||
// Selected segment of controller
|
||||
&.selected {
|
||||
background-color: $primary-color;
|
||||
transition: background-color .2s linear;
|
||||
@include transition(background-color .2s linear);
|
||||
|
||||
// Set color of links to white
|
||||
> a {
|
||||
|
|
@ -74,8 +72,7 @@
|
|||
// Remove standard segmented bottom margin
|
||||
[class*="bar-"] .segmented-controller {
|
||||
margin: 3px 0;
|
||||
-webkit-box-flex: 1;
|
||||
box-flex: 1;
|
||||
@include box-flex(1);
|
||||
}
|
||||
.bar-nav .segmented-controller {
|
||||
margin-bottom: 4px;
|
||||
|
|
|
|||
|
|
@ -20,8 +20,7 @@
|
|||
padding: 0;
|
||||
font-size: 0; // Remove spaces from inline-block children
|
||||
white-space: nowrap;
|
||||
-webkit-transition: all 0 linear;
|
||||
transition: all 0 linear;
|
||||
@include transition(all 0 linear);
|
||||
|
||||
// Individual slide
|
||||
> li {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "mixins.scss";
|
||||
|
||||
//
|
||||
// Variable overrides
|
||||
// --------------------------------------------------
|
||||
|
|
@ -34,7 +36,7 @@ $negative-color: #e71e1e;
|
|||
}
|
||||
.bar-nav {
|
||||
top: 20px;
|
||||
box-shadow: 0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85)
|
||||
@include box-shadow(0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85));
|
||||
}
|
||||
[class*="bar-"].bar-header-secondary {
|
||||
top: 64px;
|
||||
|
|
|
|||
|
|
@ -21,9 +21,10 @@
|
|||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
border-radius: 100px;
|
||||
box-shadow: 0 3px 3px rgba(0,0,0,.08);
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
|
||||
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
|
||||
@include box-shadow(0 3px 3px rgba(0,0,0,.08));
|
||||
@include transition-property(-webkit-transform, border);
|
||||
@include transition-duration(.1s);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
}
|
||||
|
||||
// Active state for toggle
|
||||
|
|
@ -35,7 +36,6 @@
|
|||
// Active state for toggle handle
|
||||
&.active .toggle-handle {
|
||||
border-color: $positive-color;
|
||||
-webkit-transform: translate3d(17px,0,0);
|
||||
transform: translate3d(17px,0,0);
|
||||
@include transform(translate3d(17px,0,0));
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче