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