339 lines
11 KiB
SCSS
339 lines
11 KiB
SCSS
@mixin icon-override($icon) {
|
|
font-family: 'primeicons' !important;
|
|
speak: none;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-indent: 0 !important;
|
|
background-image: none !important;
|
|
|
|
&:before {
|
|
content: $icon;
|
|
}
|
|
}
|
|
|
|
@mixin action-icon {
|
|
width: $actionIconWidth;
|
|
height: $actionIconHeight;
|
|
background: $actionIconBg;
|
|
color: $actionIconColor;
|
|
transition: $transition;
|
|
border-radius: $actionIconBorderRadius;
|
|
border: $actionIconBorder;
|
|
text-align: center;
|
|
line-height: $actionIconHeight;
|
|
padding: 0;
|
|
|
|
&:hover {
|
|
background: $actionIconHoverBg;
|
|
color: $actionIconHoverColor;
|
|
border-color: $actionIconHoverBorderColor;
|
|
}
|
|
}
|
|
|
|
@mixin secondary-button() {
|
|
background: $secondaryButtonBg;
|
|
color: $secondaryButtonTextColor;
|
|
border: $secondaryButtonBorder;
|
|
|
|
&.ui-state-hover, &:not(:disabled):hover {
|
|
background: $secondaryButtonHoverBg;
|
|
border-color: $secondaryButtonHoverBorderColor;
|
|
color: $secondaryButtonHoverTextColor;
|
|
}
|
|
|
|
&.ui-state-focus {
|
|
box-shadow: $secondaryButtonFocusShadow;
|
|
}
|
|
|
|
&.ui-state-active, &:active {
|
|
background: $secondaryButtonActiveBg;
|
|
border-color: $secondaryButtonActiveBorderColor;
|
|
color: $secondaryButtonActiveTextColor;
|
|
}
|
|
}
|
|
|
|
@mixin border-radius-right($val) {
|
|
border-top-right-radius: $val;
|
|
border-bottom-right-radius: $val;
|
|
}
|
|
|
|
@mixin border-radius-left($val) {
|
|
border-top-left-radius: $val;
|
|
border-bottom-left-radius: $val;
|
|
}
|
|
|
|
@mixin border-radius-top($val) {
|
|
border-top-left-radius: $val;
|
|
border-top-right-radius: $val;
|
|
}
|
|
|
|
@mixin border-radius-bottom($val) {
|
|
border-bottom-left-radius: $val;
|
|
border-bottom-right-radius: $val;
|
|
}
|
|
|
|
@mixin flex() {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
@mixin flex-wrap($value) {
|
|
-ms-flex-wrap: $value;
|
|
flex-wrap: $value;
|
|
}
|
|
|
|
@mixin flex-direction-row() {
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
}
|
|
|
|
@mixin flex-direction-column() {
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@mixin flex-justify-center() {
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin flex-justify-between() {
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@mixin flex-align-center() {
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@mixin flex-align-start() {
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
@mixin flex-align-end() {
|
|
-ms-flex-align: end;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
@mixin flex-justify-start() {
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@mixin flex-justify-end() {
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@mixin focused-input() {
|
|
border-color: $inputFocusBorderColor;
|
|
outline: 0 none;
|
|
box-shadow: $inputFocusShadow;
|
|
}
|
|
|
|
@mixin focused() {
|
|
outline: $focusOutline;
|
|
outline-offset: $focusOutlineOffset;
|
|
box-shadow: $focusShadow;
|
|
}
|
|
|
|
@mixin focused-inset() {
|
|
outline: $focusOutline;
|
|
outline-offset: $focusOutlineOffset;
|
|
box-shadow: inset $focusShadow;
|
|
}
|
|
|
|
@mixin placeholder {
|
|
::-webkit-input-placeholder {@content}
|
|
:-moz-placeholder {@content; opacity: 1}
|
|
::-moz-placeholder {@content; opacity: 1}
|
|
:-ms-input-placeholder {@content}
|
|
}
|
|
|
|
@mixin gradient($deg, $color1, $color2) {
|
|
background: -moz-linear-gradient($deg, $color1 0%, $color2 100%); /* ff3.6+ */
|
|
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, $color1), color-stop(100%, $color2)); /* safari4+,chrome */
|
|
background: -webkit-linear-gradient($deg, $color1 0%, $color2 100%); /* safari5.1+,chrome10+ */
|
|
background: -o-linear-gradient($deg, $color1 0%, $color2 100%); /* opera 11.10+ */
|
|
background: -ms-linear-gradient($deg, $color1 0%, $color2 100%); /* ie10+ */
|
|
background: linear-gradient($deg, $color1 0%, $color2 100%); /* w3c */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=1 ); /* ie6-9 */
|
|
}
|
|
|
|
@mixin background-gradient-left2right($start-color, $end-color) {
|
|
background: $start-color;
|
|
background-image: -webkit-gradient(linear, left top, right top, from($start-color), to($end-color));
|
|
background-image: -webkit-linear-gradient(left, $start-color, $end-color);
|
|
background-image: -moz-linear-gradient(left, $start-color, $end-color);
|
|
background-image: -ms-linear-gradient(left, $start-color, $end-color);
|
|
background-image: -o-linear-gradient(left, $start-color, $end-color);
|
|
background-image: linear-gradient(left, $start-color, $end-color);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', gradientType='1');
|
|
}
|
|
|
|
@mixin background-gradient-right2left($start-color, $end-color) {
|
|
background: $start-color;
|
|
background-image: -webkit-gradient(linear, right top, left top, from($start-color), to($end-color));
|
|
background-image: -webkit-linear-gradient(right, $start-color, $end-color);
|
|
background-image: -moz-linear-gradient(right, $start-color, $end-color);
|
|
background-image: -ms-linear-gradient(right, $start-color, $end-color);
|
|
background-image: -o-linear-gradient(right, $start-color, $end-color);
|
|
background-image: linear-gradient(right, $start-color, $end-color);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', gradientType='1');
|
|
}
|
|
|
|
@mixin background-gradient-top2bottom($start-color, $end-color) {
|
|
background: $start-color;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from($start-color), to($end-color));
|
|
background-image: -webkit-linear-gradient(top, $start-color, $end-color);
|
|
background-image: -moz-linear-gradient(top, $start-color, $end-color);
|
|
background-image: -ms-linear-gradient(top, $start-color, $end-color);
|
|
background-image: -o-linear-gradient(top, $start-color, $end-color);
|
|
background-image: linear-gradient(to bottom, $start-color, $end-color);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}');
|
|
}
|
|
|
|
@mixin background-gradient-bottom2top($start-color, $end-color) {
|
|
background: $end-color;
|
|
background-image: -webkit-gradient(linear, left bottom, left top, from($start-color), to($end-color));
|
|
background-image: -webkit-linear-gradient(bottom, $start-color, $end-color);
|
|
background-image: -moz-linear-gradient(bottom, $start-color, $end-color);
|
|
background-image: -ms-linear-gradient(bottom, $start-color, $end-color);
|
|
background-image: -o-linear-gradient(bottom, $start-color, $end-color);
|
|
background-image: linear-gradient(to top, $start-color, $end-color);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}');
|
|
}
|
|
|
|
@mixin flex-center() {
|
|
@include flex();
|
|
@include flex-align-center();
|
|
@include flex-justify-center();
|
|
}
|
|
|
|
@mixin nested-submenu-indents($val, $index, $length) {
|
|
ul {
|
|
li {
|
|
a {
|
|
padding-left: $val * $index * 1px;
|
|
}
|
|
|
|
@if $index < $length {
|
|
@include nested-submenu-indents($val, $index + 1, $length);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin transition($transition...) {
|
|
-moz-transition: $transition;
|
|
-o-transition: $transition;
|
|
-webkit-transition: $transition;
|
|
transition: $transition;
|
|
}
|
|
|
|
@mixin rotate($deg) {
|
|
-webkit-transform: rotate($deg);
|
|
-moz-transform: rotate($deg);
|
|
-o-transform: rotate($deg);
|
|
-ms-transform: rotate($deg);
|
|
transform: rotate($deg);
|
|
}
|
|
|
|
@mixin scale($deg) {
|
|
-webkit-transform: scale($deg);
|
|
-moz-transform: scale($deg);
|
|
-o-transform: scale($deg);
|
|
-ms-transform: scale($deg);
|
|
transform: scale($deg);
|
|
}
|
|
|
|
@mixin opacity($opacity) {
|
|
opacity: $opacity;
|
|
$opacity-ie: $opacity * 100;
|
|
filter: alpha(opacity=$opacity-ie);
|
|
}
|
|
|
|
@mixin background-gradient-top2bottom($start-color, $end-color) {
|
|
background-color: $start-color;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from($start-color), to($end-color));
|
|
background-image: -webkit-linear-gradient(top, $start-color, $end-color);
|
|
background-image: -moz-linear-gradient(top, $start-color, $end-color);
|
|
background-image: -ms-linear-gradient(top, $start-color, $end-color);
|
|
background-image: -o-linear-gradient(top, $start-color, $end-color);
|
|
background-image: linear-gradient(to bottom, $start-color, $end-color);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}');
|
|
}
|
|
|
|
@mixin background-gradient-left2right($start-color, $end-color) {
|
|
background-color: $start-color;
|
|
background-image: -webkit-gradient(linear, left top, right top, from($start-color), to($end-color));
|
|
background-image: -webkit-linear-gradient(left, $start-color, $end-color);
|
|
background-image: -moz-linear-gradient(left, $start-color, $end-color);
|
|
background-image: -ms-linear-gradient(left, $start-color, $end-color);
|
|
background-image: -o-linear-gradient(left, $start-color, $end-color);
|
|
background-image: linear-gradient(left, $start-color, $end-color);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', gradientType='1');
|
|
}
|
|
|
|
@mixin shadow($value) {
|
|
-webkit-box-shadow: $value;
|
|
-moz-box-shadow: $value;
|
|
box-shadow: $value;
|
|
}
|
|
|
|
@mixin border-radius($val) {
|
|
-moz-border-radius: $val;
|
|
-webkit-border-radius: $val;
|
|
border-radius: $val;
|
|
}
|
|
|
|
@mixin border-radius-top($val) {
|
|
-moz-border-radius-topleft: $val;
|
|
-webkit-border-top-left-radius: $val;
|
|
border-top-left-radius: $val;
|
|
-moz-border-radius-topright: $val;
|
|
-webkit-border-top-right-radius: $val;
|
|
border-top-right-radius: $val;
|
|
}
|
|
|
|
@mixin border-radius-bottom($val) {
|
|
-moz-border-radius-bottomleft: $val;
|
|
-webkit-border-bottom-left-radius: $val;
|
|
border-bottom-left-radius: $val;
|
|
-moz-border-radius-bottomright: $val;
|
|
-webkit-border-bottom-right-radius: $val;
|
|
border-bottom-right-radius: $val;
|
|
}
|
|
|
|
@mixin border-radius-right($val) {
|
|
-moz-border-radius-topright: $val;
|
|
-webkit-border-top-right-radius: $val;
|
|
border-top-right-radius: $val;
|
|
-moz-border-radius-bottomright: $val;
|
|
-webkit-border-bottom-right-radius: $val;
|
|
border-bottom-right-radius: $val;
|
|
}
|
|
|
|
@mixin border-radius-left($val) {
|
|
-moz-border-radius-topleft: $val;
|
|
-webkit-border-top-left-radius: $val;
|
|
border-top-left-radius: $val;
|
|
-moz-border-radius-bottomleft: $val;
|
|
-webkit-border-bottom-left-radius: $val;
|
|
border-bottom-left-radius: $val;
|
|
}
|
|
|
|
@mixin input-placeholder($color) {
|
|
&::-webkit-input-placeholder {color: $color}
|
|
&:-moz-placeholder {color: $color}
|
|
&::-moz-placeholder {color: $color}
|
|
&:-ms-input-placeholder {color: $color}
|
|
}
|