AdminLTE/build/scss/plugins/_pace.scss
2020-06-02 12:16:43 +03:00

212 lines
3.9 KiB
SCSS

//
// Plugin: Pace
//
.pace {
z-index: $zindex-main-sidebar + 10;
.pace-progress {
z-index: $zindex-main-sidebar + 11;
}
.pace-activity {
z-index: $zindex-main-sidebar + 12;
}
}
// Mixin
@mixin pace-variant($name, $color) {
.pace-#{$name} {
.pace {
.pace-progress {
background: $color;
}
}
}
.pace-barber-shop-#{$name} {
.pace {
background: color-yiq($color);
.pace-progress {
background: $color;
}
.pace-activity {
background-image: linear-gradient(45deg, rgba(color-yiq($color), 0.2) 25%, transparent 25%, transparent 50%, rgba(color-yiq($color), 0.2) 50%, rgba(color-yiq($color), 0.2) 75%, transparent 75%, transparent);
}
}
}
.pace-big-counter-#{$name} {
.pace {
.pace-progress::after {
color: rgba($color, .19999999999999996);
}
}
}
.pace-bounce-#{$name} {
.pace {
.pace-activity {
background: $color;
}
}
}
.pace-center-atom-#{$name} {
.pace-progress {
height: 100px;
width: 80px;
&::before {
background: $color;
color: color-yiq($color);
font-size: .8rem;
line-height: .7rem;
padding-top: 17%;
}
}
.pace-activity {
border-color: $color;
&::after,
&::before {
border-color: $color;
}
}
}
.pace-center-circle-#{$name} {
.pace {
.pace-progress {
background: rgba($color, .8);
color: color-yiq($color);
}
}
}
.pace-center-radar-#{$name} {
.pace {
.pace-activity {
border-color: $color transparent transparent;
}
.pace-activity::before {
border-color: $color transparent transparent;
}
}
}
.pace-center-simple-#{$name} {
.pace {
background: color-yiq($color);
border-color: $color;
.pace-progress {
background: $color;
}
}
}
.pace-material-#{$name} {
.pace {
color: $color;
}
}
.pace-corner-indicator-#{$name} {
.pace {
.pace-activity {
background: $color;
}
.pace-activity::after,
.pace-activity::before {
border: 5px solid color-yiq($color);
}
.pace-activity::before {
border-right-color: rgba($color, .2);
border-left-color: rgba($color, .2);
}
.pace-activity::after {
border-top-color: rgba($color, .2);
border-bottom-color: rgba($color, .2);
}
}
}
.pace-fill-left-#{$name} {
.pace {
.pace-progress {
background-color: rgba($color, 0.19999999999999996);
}
}
}
.pace-flash-#{$name} {
.pace {
.pace-progress {
background: $color;
}
.pace-progress-inner {
box-shadow: 0 0 10px $color, 0 0 5px $color;
}
.pace-activity {
border-top-color: $color;
border-left-color: $color;
}
}
}
.pace-loading-bar-#{$name} {
.pace {
.pace-progress {
background: $color;
color: $color;
box-shadow: 120px 0 color-yiq($color), 240px 0 color-yiq($color);
}
.pace-activity {
box-shadow: inset 0 0 0 2px $color, inset 0 0 0 7px color-yiq($color);
}
}
}
.pace-mac-osx-#{$name} {
.pace {
.pace-progress {
background-color: $color;
box-shadow: inset -1px 0 $color, inset 0 -1px $color, inset 0 2px rgba(color-yiq($color), 0.5), inset 0 6px rgba(color-yiq($color), .3);
}
.pace-activity {
background-image: radial-gradient(rgba(color-yiq($color), .65) 0%, rgba(color-yiq($color), .15) 100%);
height: 12px;
}
}
}
.pace-progress-color-#{$name} {
.pace-progress {
color: $color;
}
}
}
@each $name, $color in $theme-colors {
@include pace-variant($name, $color);
}
@each $name, $color in $colors {
@include pace-variant($name, $color);
}