117 lines
3.2 KiB
SCSS
117 lines
3.2 KiB
SCSS
//mixin for icons - @include addIcon('\f021', font-size, line-height, color, margin-left, margin-right, vertical-align)
|
|
/**
|
|
* Mixin for icons in css
|
|
* Example1: @include addIcon('\f021', font-size, line-height, color, margin-left, margin-right, vertical-align)
|
|
* Example2: @include addIcon('\f021', font-size, 20px, $grey-900, margin-left, margin-right, -3px);
|
|
* Example3: @include addIcon('\f021', 14px, 20px, $grey-900, 10px, 5px, -1px);
|
|
*/
|
|
@mixin addIcon($content, $font-size, $line-height, $color, $margin-left, $margin-right, $vertical-align) {
|
|
font-family: 'FontAwesome';
|
|
content: $content;
|
|
@if $font-size != font-size {
|
|
font-size: $font-size;
|
|
}
|
|
@if $line-height != line-height {
|
|
line-height: $line-height;
|
|
}
|
|
@if $color != color {
|
|
color: $color;
|
|
}
|
|
@if $margin-left != margin-left {
|
|
margin-left: $margin-left;
|
|
}
|
|
@if $margin-right != margin-right {
|
|
margin-right: $margin-right;
|
|
}
|
|
@if $vertical-align != vertical-align {
|
|
vertical-align: $vertical-align;
|
|
}
|
|
}
|
|
|
|
@mixin addLinearIcons($content, $font-size, $line-height, $color) {
|
|
font-family: 'Linearicons';
|
|
content: $content;
|
|
@if $font-size != font-size {
|
|
font-size: $font-size;
|
|
}
|
|
@if $line-height != line-height {
|
|
line-height: $line-height;
|
|
}
|
|
@if $color != color {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Override fo "button-variant" default bootstrap's mixin
|
|
*/
|
|
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
|
|
color: color-yiq($background);
|
|
@include gradient-bg($background);
|
|
border-color: $border;
|
|
@include box-shadow(0 0 16px $background);
|
|
|
|
@include hover {
|
|
color: color-yiq($hover-background);
|
|
@include gradient-bg($hover-background);
|
|
border-color: $hover-border;
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
// Avoid using mixin so we can pass custom focus shadow properly
|
|
@if $enable-shadows {
|
|
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
|
|
} @else {
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
|
|
}
|
|
}
|
|
|
|
// Disabled comes first so active can properly restyle
|
|
&.disabled,
|
|
&:disabled {
|
|
color: color-yiq($background);
|
|
background-color: $background;
|
|
border-color: $border;
|
|
}
|
|
|
|
&:not(:disabled):not(.disabled):active,
|
|
&:not(:disabled):not(.disabled).active,
|
|
.show > &.dropdown-toggle {
|
|
color: color-yiq($active-background);
|
|
background-color: $active-background;
|
|
@if $enable-gradients {
|
|
background-image: none; // Remove the gradient for the pressed/active state
|
|
}
|
|
border-color: $active-border;
|
|
|
|
&:focus {
|
|
// Avoid using mixin so we can pass custom focus shadow properly
|
|
@if $enable-shadows {
|
|
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
|
|
} @else {
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin scroll() {
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: $gray-200;
|
|
border-radius: 0;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: $gray-500;
|
|
transition: all 0.3s;
|
|
border-radius: 0;
|
|
&:hover {
|
|
background: $brand-primary;
|
|
}
|
|
}
|
|
}
|