mirror of https://github.com/Squidex/squidex.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
455 lines
11 KiB
455 lines
11 KiB
@mixin build-icon($color) {
|
|
& {
|
|
@include transition(color .3s ease);
|
|
color: $color;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: darken($color, 10%);
|
|
}
|
|
}
|
|
|
|
@mixin build-toggle-button($color, $background) {
|
|
& {
|
|
color: $color;
|
|
border-color: $color;
|
|
background: $background;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
|
|
@mixin build-text-button($color) {
|
|
& {
|
|
color: $color;
|
|
}
|
|
|
|
&:disabled
|
|
&.disabled {
|
|
@include opacity(.4);
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
@include box-shadow-raw(0 0 0 $btn-focus-width rgba($color, .5));
|
|
}
|
|
|
|
&:active,
|
|
&:hover {
|
|
color: darken($color, 15%);
|
|
}
|
|
}
|
|
|
|
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
|
|
&::-webkit-scrollbar {
|
|
width: $size;
|
|
height: $size;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: $foreground-color;
|
|
}
|
|
|
|
&::-webkit-scrollbar-corner,
|
|
&::-webkit-scrollbar-track {
|
|
background: $background-color;
|
|
}
|
|
|
|
& {
|
|
scrollbar-face-color: $foreground-color;
|
|
scrollbar-track-color: $background-color;
|
|
scrollbar-color: $foreground-color $background-color;
|
|
scrollbar-width: thin;
|
|
}
|
|
}
|
|
|
|
|
|
@mixin clearfix() {
|
|
&::after {
|
|
content: '';
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
}
|
|
|
|
@mixin hidden() {
|
|
width: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
|
|
@mixin force-width($width) {
|
|
min-width: $width;
|
|
max-width: $width;
|
|
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 caret-top($color, $size: .6rem) {
|
|
@include caret;
|
|
border: $size solid transparent;
|
|
border-bottom-color: $color;
|
|
}
|
|
|
|
@mixin caret-left($color, $size: .6rem) {
|
|
@include caret;
|
|
border: $size solid transparent;
|
|
border-right-color: $color;
|
|
}
|
|
|
|
@mixin caret-right($color, $size: .6rem) {
|
|
@include caret;
|
|
border: $size solid transparent;
|
|
border-left-color: $color;
|
|
}
|
|
|
|
@mixin caret-bottom($color, $size: .6rem) {
|
|
@include caret;
|
|
border: $size solid transparent;
|
|
border-top-color: $color;
|
|
}
|
|
|
|
@mixin caret() {
|
|
display: inline-block;
|
|
min-width: 0;
|
|
max-width: 0;
|
|
min-height: 0;
|
|
max-height: 0;
|
|
content: '';
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
@mixin placeholder-color($color) {
|
|
::placeholder {
|
|
color: $color;
|
|
}
|
|
|
|
&::-webkit-input-placeholder {
|
|
color: $color;
|
|
}
|
|
|
|
&:-moz-placeholder {
|
|
color: $color;
|
|
@include opacity(1.0);
|
|
}
|
|
|
|
&::-moz-placeholder {
|
|
color: $color;
|
|
@include opacity(1.0);
|
|
}
|
|
|
|
&:-ms-input-placeholder {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
@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 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);
|
|
}
|
|
|
|
@mixin box-shadow-raw($shadows...) {
|
|
-webkit-box-shadow: $shadows;
|
|
-moz-box-shadow: $shadows;
|
|
box-shadow: $shadows;
|
|
}
|
|
|
|
@mixin border-radius-clip() {
|
|
-webkit-background-clip: padding-box;
|
|
-moz-background-clip: padding;
|
|
background-clip: padding-box;
|
|
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
@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);
|
|
}
|
|
|
|
@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 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;
|
|
position: absolute;
|
|
}
|
|
|
|
@mixin fixed($top, $right, $bottom, $left) {
|
|
top: $top;
|
|
left: $left;
|
|
right: $right;
|
|
bottom: $bottom;
|
|
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;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@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);
|
|
}
|
|
|