mirror of https://github.com/ColorlibHQ/AdminLTE
212 lines
3.9 KiB
SCSS
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);
|
||
}
|
||
|