|
|
|
@ -1,7 +1,7 @@ |
|
|
|
@mixin build-icon($color) { |
|
|
|
& { |
|
|
|
@include transition(color .3s ease); |
|
|
|
color: $color; |
|
|
|
transition: color .3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
&:hover, |
|
|
|
@ -12,9 +12,9 @@ |
|
|
|
|
|
|
|
@mixin build-toggle-button($color, $background) { |
|
|
|
& { |
|
|
|
color: $color; |
|
|
|
border-color: $color; |
|
|
|
background: $background; |
|
|
|
border-color: $color; |
|
|
|
color: $color; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -26,12 +26,12 @@ |
|
|
|
|
|
|
|
&:disabled |
|
|
|
&.disabled { |
|
|
|
@include opacity(.4); |
|
|
|
opacity: .4; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:focus, |
|
|
|
&.focus { |
|
|
|
@include box-shadow-raw(0 0 0 $btn-focus-width rgba($color, .5)); |
|
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); |
|
|
|
} |
|
|
|
|
|
|
|
&:active, |
|
|
|
@ -42,8 +42,8 @@ |
|
|
|
|
|
|
|
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) { |
|
|
|
&::-webkit-scrollbar { |
|
|
|
width: $size; |
|
|
|
height: $size; |
|
|
|
width: $size; |
|
|
|
} |
|
|
|
|
|
|
|
&::-webkit-scrollbar-thumb { |
|
|
|
@ -56,112 +56,40 @@ |
|
|
|
} |
|
|
|
|
|
|
|
& { |
|
|
|
scrollbar-color: $foreground-color $background-color; |
|
|
|
scrollbar-face-color: $foreground-color; |
|
|
|
scrollbar-track-color: $background-color; |
|
|
|
scrollbar-color: $foreground-color $background-color; |
|
|
|
scrollbar-width: thin; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@mixin clearfix() { |
|
|
|
@mixin clearfix { |
|
|
|
&::after { |
|
|
|
content: ''; |
|
|
|
clear: both; |
|
|
|
content: ''; |
|
|
|
display: table; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@mixin hidden() { |
|
|
|
width: 0; |
|
|
|
opacity: 0; |
|
|
|
overflow: hidden; |
|
|
|
position: absolute; |
|
|
|
width: 0; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin force-width($width) { |
|
|
|
min-width: $width; |
|
|
|
max-width: $width; |
|
|
|
width: $width; |
|
|
|
// Ensure that we use the minimum width in flex scenarios. |
|
|
|
max-width: $width; |
|
|
|
min-width: $width; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin flex-box { |
|
|
|
display: -webkit-box; |
|
|
|
display: -webkit-flex; |
|
|
|
display: -moz-flex; |
|
|
|
display: -ms-flexbox; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin flex-inline { |
|
|
|
display: -webkit-inline-box; |
|
|
|
display: -webkit-inline-flex; |
|
|
|
display: -moz-inline-flex; |
|
|
|
display: -ms-inline-flexbox; |
|
|
|
display: inline-flex; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin flex-direction($direction) { |
|
|
|
-webkit-flex-direction: $direction; |
|
|
|
-moz-flex-direction: $direction; |
|
|
|
-ms-flex-direction: $direction; |
|
|
|
flex-direction: $direction; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin flex-flow($values: (row nowrap)) { |
|
|
|
-webkit-flex-flow: $values; |
|
|
|
-moz-flex-flow: $values; |
|
|
|
-ms-flex-flow: $values; |
|
|
|
flex-flow: $values; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin flex-grow($int: 0) { |
|
|
|
-webkit-box-flex: $int; |
|
|
|
-webkit-flex-grow: $int; |
|
|
|
-moz-flex-grow: $int; |
|
|
|
-ms-flex-positive: $int; |
|
|
|
flex-grow: $int; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin flex-shrink($int: 0) { |
|
|
|
-webkit-flex-shrink: $int; |
|
|
|
-moz-flex-shrink: $int; |
|
|
|
flex-shrink: $int; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin inner-border($color: #999) { |
|
|
|
-webkit-box-shadow: inset 1px 1px 1px $color; |
|
|
|
-moz-box-shadow: inset 1px 1px 1px $color; |
|
|
|
box-shadow: inset 1px 1px 1px $color; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin no-selection() { |
|
|
|
-webkit-touch-callout: none; |
|
|
|
-webkit-user-select: none; |
|
|
|
-khtml-user-select: none; |
|
|
|
-moz-user-select: none; |
|
|
|
-ms-user-select: none; |
|
|
|
user-select: none; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin ellipsis() { |
|
|
|
-o-text-overflow: ellipsis; |
|
|
|
-ms-text-overflow: ellipsis; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin box-sizing($sizing: border-box) { |
|
|
|
-webkit-box-sizing: $sizing; |
|
|
|
-ms-box-sizing: $sizing; |
|
|
|
-moz-box-sizing: $sizing; |
|
|
|
box-sizing: $sizing; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin border-box() { |
|
|
|
-webkit-box-sizing: border-box; |
|
|
|
-ms-box-sizing: border-box; |
|
|
|
-moz-box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
@mixin force-height($height) { |
|
|
|
height: $height; |
|
|
|
// Ensure that we use the minimum width in flex scenarios. |
|
|
|
max-height: $height; |
|
|
|
min-height: $height; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin caret-top($color, $size: .6rem) { |
|
|
|
@ -188,28 +116,18 @@ |
|
|
|
border-top-color: $color; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin caret() { |
|
|
|
display: inline-block; |
|
|
|
min-width: 0; |
|
|
|
max-width: 0; |
|
|
|
min-height: 0; |
|
|
|
max-height: 0; |
|
|
|
@mixin caret { |
|
|
|
@include force-height(0); |
|
|
|
@include force-width(0); |
|
|
|
content: ''; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin circle($size) { |
|
|
|
@include border-radius($size * .5); |
|
|
|
min-height: $size; |
|
|
|
max-height: $size; |
|
|
|
min-width: $size; |
|
|
|
max-width: $size; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin wrap() { |
|
|
|
-ms-word-break: normal; |
|
|
|
word-break: normal; |
|
|
|
-ms-word-wrap: break-word; |
|
|
|
word-wrap: break-word; |
|
|
|
@include force-height($size); |
|
|
|
@include force-width($size); |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin placeholder-color($color) { |
|
|
|
@ -223,12 +141,12 @@ |
|
|
|
|
|
|
|
&:-moz-placeholder { |
|
|
|
color: $color; |
|
|
|
@include opacity(1.0); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
&::-moz-placeholder { |
|
|
|
color: $color; |
|
|
|
@include opacity(1.0); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
&:-ms-input-placeholder { |
|
|
|
@ -236,220 +154,71 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@mixin text-shadow($x-axis: 1px, $y-axis: 1px, $blur: 1px, $color: #000) { |
|
|
|
-webkit-text-shadow: $x-axis $y-axis $blur $color; |
|
|
|
text-shadow: $x-axis $y-axis $blur $color; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin text-shadow-none() { |
|
|
|
-webkit-text-shadow: none; |
|
|
|
text-shadow: none; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin box-shadow-none() { |
|
|
|
-webkit-box-shadow: none; |
|
|
|
-moz-box-shadow: none; |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) { |
|
|
|
-webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); |
|
|
|
-moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); |
|
|
|
box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); |
|
|
|
} |
|
|
|
|
|
|
|
@mixin box-shadow-colored($x-axis: 0, $y-axis: 1px, $blur: 2px, $color: #000) { |
|
|
|
-webkit-box-shadow: $x-axis $y-axis $blur $color; |
|
|
|
-moz-box-shadow: $x-axis $y-axis $blur $color; |
|
|
|
box-shadow: $x-axis $y-axis $blur $color; |
|
|
|
} |
|
|
|
@mixin hover-visible($selector, $display: 'block') { |
|
|
|
#{$selector} { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin box-shadow-inner($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) { |
|
|
|
-webkit-box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); |
|
|
|
-moz-box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); |
|
|
|
box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); |
|
|
|
&:hover { |
|
|
|
#{$selector} { |
|
|
|
display: $display; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@mixin box-shadow-raw($shadows...) { |
|
|
|
-webkit-box-shadow: $shadows; |
|
|
|
-moz-box-shadow: $shadows; |
|
|
|
box-shadow: $shadows; |
|
|
|
@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) { |
|
|
|
box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); |
|
|
|
} |
|
|
|
|
|
|
|
@mixin border-radius-clip() { |
|
|
|
-webkit-background-clip: padding-box; |
|
|
|
-moz-background-clip: padding; |
|
|
|
background-clip: padding-box; |
|
|
|
|
|
|
|
@mixin box-shadow-inner($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) { |
|
|
|
box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); |
|
|
|
} |
|
|
|
|
|
|
|
@mixin border-radius ($radius: 4px) { |
|
|
|
-webkit-border-radius: $radius; |
|
|
|
-moz-border-radius: $radius; |
|
|
|
border-radius: $radius; |
|
|
|
@include border-radius-clip; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin border-radiusn($topright, $bottomright, $bottomleft, $topleft) { |
|
|
|
-webkit-border-radius: $topright $bottomright $bottomleft $topleft; |
|
|
|
-moz-border-radius: $topright $bottomright $bottomleft $topleft; |
|
|
|
border-radius: $topright $bottomright $bottomleft $topleft; |
|
|
|
@include border-radius-clip; |
|
|
|
border-radius: $radius; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin border-radius-left ($radius: 4px) { |
|
|
|
-webkit-border-radius: $radius 0 0 $radius; |
|
|
|
-moz-border-radius: $radius 0 0 $radius; |
|
|
|
border-radius: $radius 0 0 $radius; |
|
|
|
border-radius: $radius 0 0 $radius; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin border-radius-right ($radius: 4px) { |
|
|
|
-webkit-border-radius: 0 $radius $radius 0; |
|
|
|
-moz-border-radius: 0 $radius $radius 0; |
|
|
|
border-radius: 0 $radius $radius 0; |
|
|
|
border-radius: 0 $radius $radius 0; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin border-radius-bottom ($radius: 4px) { |
|
|
|
-webkit-border-radius: 0 0 $radius $radius; |
|
|
|
-moz-border-radius: 0 0 $radius $radius; |
|
|
|
border-radius: 0 0 $radius $radius; |
|
|
|
border-radius: 0 0 $radius $radius; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin border-radius-top ($radius: 4px) { |
|
|
|
-webkit-border-radius: $radius $radius 0 0; |
|
|
|
-moz-border-radius: $radius $radius 0 0; |
|
|
|
border-radius: $radius $radius 0 0; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin keyframes($name) { |
|
|
|
@-webkit-keyframes #{$name} { |
|
|
|
@content; |
|
|
|
} |
|
|
|
@-moz-keyframes #{$name} { |
|
|
|
@content; |
|
|
|
} |
|
|
|
@keyframes #{$name} { |
|
|
|
@content; |
|
|
|
} |
|
|
|
@-ms-keyframes #{$name} { |
|
|
|
@content; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@mixin animation($animation...) { |
|
|
|
-webkit-animation: $animation; |
|
|
|
-moz-animation: $animation; |
|
|
|
-o-animation: $animation; |
|
|
|
animation: $animation; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin transition($transition...) { |
|
|
|
-webkit-transition: $transition; |
|
|
|
-moz-transition: $transition; |
|
|
|
-o-transition: $transition; |
|
|
|
transition: $transition; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin transition-delay($transition-delay...) { |
|
|
|
-webkit-transition-delay: $transition-delay; |
|
|
|
-moz-transition-delay: $transition-delay; |
|
|
|
-o-transition-delay: $transition-delay; |
|
|
|
transition-delay: $transition-delay; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin transition-duration($transition-duration...) { |
|
|
|
-webkit-transition-duration: $transition-duration; |
|
|
|
-moz-transition-duration: $transition-duration; |
|
|
|
-o-transition-duration: $transition-duration; |
|
|
|
transition-duration: $transition-duration; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin rotate($degrees) { |
|
|
|
-webkit-transform: rotate($degrees); |
|
|
|
-moz-transform: rotate($degrees); |
|
|
|
-ms-transform: rotate($degrees); |
|
|
|
-o-transform: rotate($degrees); |
|
|
|
transform: rotate($degrees); |
|
|
|
} |
|
|
|
|
|
|
|
@mixin scale($ratio) { |
|
|
|
-webkit-transform: scale($ratio); |
|
|
|
-moz-transform: scale($ratio); |
|
|
|
-ms-transform: scale($ratio); |
|
|
|
-o-transform: scale($ratio); |
|
|
|
transform: scale($ratio); |
|
|
|
border-radius: $radius $radius 0 0; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin translate($x, $y) { |
|
|
|
-webkit-transform: translate($x, $y); |
|
|
|
-moz-transform: translate($x, $y); |
|
|
|
-ms-transform: translate($x, $y); |
|
|
|
-o-transform: translate($x, $y); |
|
|
|
transform: translate($x, $y); |
|
|
|
@mixin position($t: null, $r: null, $b: null, $l: null) { |
|
|
|
bottom: $b; left: $l; right: $r; top: $t; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin skew($x, $y) { |
|
|
|
-webkit-transform: skew($x, $y); |
|
|
|
-moz-transform: skew($x, $y); |
|
|
|
-ms-transform: skewX($x) skewY($y); |
|
|
|
-o-transform: skew($x, $y); |
|
|
|
transform: skew($x, $y); |
|
|
|
-webkit-backface-visibility: hidden; |
|
|
|
-moz-backface-visibility: hidden; |
|
|
|
backface-visibility: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin translate3d($x, $y, $z) { |
|
|
|
-webkit-transform: translate3d($x, $y, $z); |
|
|
|
-moz-transform: translate3d($x, $y, $z); |
|
|
|
-ms-transform: translate3d($x, $y, $z); |
|
|
|
-o-transform: translate3d($x, $y, $z); |
|
|
|
transform: translate3d($x, $y, $z); |
|
|
|
} |
|
|
|
|
|
|
|
@mixin absolute($top, $right, $bottom, $left) { |
|
|
|
top: $top; |
|
|
|
left: $left; |
|
|
|
right: $right; |
|
|
|
bottom: $bottom; |
|
|
|
@mixin absolute($t: null, $r: null, $b: null, $l: null) { |
|
|
|
@include position($t, $r, $b, $l); |
|
|
|
position: absolute; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin fixed($top, $right, $bottom, $left) { |
|
|
|
top: $top; |
|
|
|
left: $left; |
|
|
|
right: $right; |
|
|
|
bottom: $bottom; |
|
|
|
@mixin fixed($t: null, $r: null, $b: null, $l: null) { |
|
|
|
@include position($t, $r, $b, $l); |
|
|
|
position: fixed; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin opacity($value) { |
|
|
|
$opacityPercentage: $value * 100; |
|
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacityPercentage)"; |
|
|
|
-moz-opacity: $value; |
|
|
|
-khtml-opacity: $value; |
|
|
|
opacity: $value; |
|
|
|
filter: alpha(opacity=$opacityPercentage); |
|
|
|
} |
|
|
|
|
|
|
|
@mixin truncate-nowidth() { |
|
|
|
@include ellipsis; |
|
|
|
display: block; |
|
|
|
@mixin truncate-nowidth { |
|
|
|
display: block; |
|
|
|
overflow-x: hidden; |
|
|
|
overflow-y: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin truncate() { |
|
|
|
@mixin truncate { |
|
|
|
@include truncate-nowidth; |
|
|
|
width: auto; |
|
|
|
min-width: 0; |
|
|
|
max-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin gradient($stop: #EEE, $start: #FFF) { |
|
|
|
background: $start; |
|
|
|
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop)); |
|
|
|
background: -ms-linear-gradient(bottom, $start, $stop); |
|
|
|
background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%); |
|
|
|
background: -o-linear-gradient($stop, $start); |
|
|
|
} |
|
|
|
min-width: 0; |
|
|
|
width: auto; |
|
|
|
} |
Sebastian Stehle
7 years ago
GitHub