feat: styles package (#1074)
This commit is contained in:
Mo
782
packages/styles/src/Styles/_ui.scss
Normal file
782
packages/styles/src/Styles/_ui.scss
Normal file
@@ -0,0 +1,782 @@
|
||||
.red {
|
||||
color: var(--sn-stylekit-danger-color);
|
||||
}
|
||||
|
||||
.tinted {
|
||||
color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.selectable {
|
||||
user-select: text !important;
|
||||
-ms-user-select: text !important;
|
||||
-moz-user-select: text !important;
|
||||
-webkit-user-select: text !important;
|
||||
}
|
||||
|
||||
.sk-h1,
|
||||
.sk-h2,
|
||||
.sk-h3,
|
||||
.sk-h4,
|
||||
.sk-h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.sk-h1 {
|
||||
font-weight: 500;
|
||||
font-size: var(--sn-stylekit-font-size-h1);
|
||||
line-height: 1.54375rem;
|
||||
}
|
||||
|
||||
.sk-h2 {
|
||||
font-size: var(--sn-stylekit-font-size-h2);
|
||||
line-height: 1.4625rem;
|
||||
}
|
||||
|
||||
.sk-h3 {
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
line-height: 1.38125rem;
|
||||
}
|
||||
|
||||
.sk-h4 {
|
||||
font-size: var(--sn-stylekit-font-size-p);
|
||||
line-height: 1.1375rem;
|
||||
}
|
||||
|
||||
.sk-h5 {
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
}
|
||||
|
||||
.sk-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sk-font-small {
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
}
|
||||
|
||||
.sk-font-normal {
|
||||
font-size: var(--sn-stylekit-font-size-p);
|
||||
}
|
||||
|
||||
.sk-font-large {
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
}
|
||||
|
||||
a.sk-a {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&.disabled {
|
||||
color: var(--sn-stylekit-neutral-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.boxed {
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
padding: 0.24375rem 0.325rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.neutral {
|
||||
background-color: var(--sn-stylekit-neutral-color);
|
||||
color: var(--sn-stylekit-neutral-contrast-color);
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: var(--sn-stylekit-info-color);
|
||||
color: var(--sn-stylekit-info-contrast-color);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: var(--sn-stylekit-warning-color);
|
||||
color: var(--sn-stylekit-warning-contrast-color);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: var(--sn-stylekit-danger-color);
|
||||
color: var(--sn-stylekit-danger-contrast-color);
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: var(--sn-stylekit-success-color);
|
||||
color: var(--sn-stylekit-success-contrast-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
* {
|
||||
&.sk-base {
|
||||
color: var(--sn-stylekit-foreground-color);
|
||||
}
|
||||
|
||||
&.contrast {
|
||||
color: var(--sn-stylekit-contrast-foreground-color);
|
||||
}
|
||||
|
||||
&.neutral {
|
||||
color: var(--sn-stylekit-neutral-color);
|
||||
}
|
||||
|
||||
&.info {
|
||||
color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
&.info-contrast {
|
||||
color: var(--sn-stylekit-info-contrast-color);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: var(--sn-stylekit-warning-color);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: var(--sn-stylekit-danger-color);
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: var(--sn-stylekit-success-color);
|
||||
}
|
||||
|
||||
&.info-i {
|
||||
color: var(--sn-stylekit-info-color) !important;
|
||||
}
|
||||
|
||||
&.warning-i {
|
||||
color: var(--sn-stylekit-warning-color) !important;
|
||||
}
|
||||
|
||||
&.danger-i {
|
||||
color: var(--sn-stylekit-danger-color) !important;
|
||||
}
|
||||
|
||||
&.success-i {
|
||||
color: var(--sn-stylekit-success-color) !important;
|
||||
}
|
||||
|
||||
&.clear {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.center-text {
|
||||
text-align: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
p.sk-p {
|
||||
margin: 0.40625rem 0;
|
||||
}
|
||||
|
||||
input.sk-input {
|
||||
box-sizing: border-box;
|
||||
padding: 0.56875rem 0.65rem;
|
||||
margin: 0.24375rem 0;
|
||||
border: none;
|
||||
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
resize: none;
|
||||
|
||||
&.clear {
|
||||
// usually sk-inputs should have ui-rect classes like info, warning, etc. If clear, no text color will be assigned unless we do it explicitely.
|
||||
color: var(--sn-stylekit-foreground-color);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.no-border {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-label {
|
||||
font-weight: bold;
|
||||
|
||||
&.no-bold {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
label.sk-label {
|
||||
margin: 0.56875rem 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.sk-label input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
width: auto;
|
||||
margin-right: 0.365625rem; /* Space after checkbox */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sk-horizontal-group {
|
||||
> * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 0.73125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-border-bottom {
|
||||
border-bottom: 1px solid var(--sn-stylekit-border-color);
|
||||
}
|
||||
|
||||
.sk-input-group {
|
||||
@extend .sk-horizontal-group;
|
||||
}
|
||||
|
||||
.sk-checkbox-group {
|
||||
padding-top: 0.40625rem;
|
||||
padding-bottom: 0.24375rem;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: var(--sn-stylekit-input-placeholder-color);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
color: var(--sn-stylekit-input-placeholder-color);
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
/* Microsoft Edge */
|
||||
color: var(--sn-stylekit-input-placeholder-color);
|
||||
}
|
||||
|
||||
.sk-button-group {
|
||||
&.stretch {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.sk-button {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.sk-button {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
// margin-bottom: 5px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
&.featured {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-segmented-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.sk-button {
|
||||
border-radius: 0;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: var(--sn-stylekit-general-border-radius);
|
||||
border-bottom-left-radius: var(--sn-stylekit-general-border-radius);
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: var(--sn-stylekit-general-border-radius);
|
||||
border-bottom-right-radius: var(--sn-stylekit-general-border-radius);
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-box-group {
|
||||
.sk-box {
|
||||
display: inline-block;
|
||||
// margin-bottom: 5px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sk-button {
|
||||
display: table;
|
||||
padding: 0.40625rem 0.56875rem;
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
|
||||
&:after {
|
||||
// uncomment to disable hover borders on buttons
|
||||
// color: transparent !important; // no borders for buttons, looks nicer
|
||||
}
|
||||
|
||||
&.no-hover-border {
|
||||
&:after {
|
||||
color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.wide {
|
||||
padding: 0.24375rem 1.38125rem;
|
||||
}
|
||||
|
||||
> .sk-label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.big {
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
padding: 0.56875rem 2.03125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-box {
|
||||
@extend .sk-button;
|
||||
padding: 2.03125rem 1.21875rem;
|
||||
}
|
||||
|
||||
@mixin ui-rect($color, $contrast-color, $hoverable, $border-color: '') {
|
||||
/*
|
||||
If $border-color is supplied, we use traditional borders for rect.
|
||||
Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.
|
||||
If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders
|
||||
*/
|
||||
color: $contrast-color;
|
||||
position: relative;
|
||||
background-color: $color;
|
||||
overflow: hidden;
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
/*
|
||||
We use box-shadow instead of border so that the borders are rounded properly around the rect.
|
||||
We keep border-color as well incase the individual elements want a border in some cases.
|
||||
*/
|
||||
@if $border-color != '' {
|
||||
// box-shadow: inset 0 0 0 1px $border-color;
|
||||
border-color: $border-color;
|
||||
border: 1px solid $border-color;
|
||||
} @else {
|
||||
// box-shadow: inset 0 0 0 1px $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
// Make background separately layer so we can set its color using CSS vars
|
||||
// (as opposed to CSS vars in SASS functions, which is impossible).
|
||||
|
||||
* {
|
||||
// required to correctly position other layers on top of background layer.
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $color;
|
||||
opacity: 1;
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
}
|
||||
|
||||
// Border shadow. Needs to be separate element so that the before element on hover brightness filter doesn't affect border,
|
||||
// and gives contrasting effect
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
pointer-events: none; // otherwise this rect would block clickable elements
|
||||
// color here refers to shadow color
|
||||
@if $border-color != '' {
|
||||
color: $border-color;
|
||||
border-color: $border-color;
|
||||
} @else {
|
||||
box-shadow: inset 0 0 0 1px;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@if $hoverable == true {
|
||||
&:hover {
|
||||
&:before {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-bg {
|
||||
background-color: transparent;
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.featured {
|
||||
border: none;
|
||||
padding: 0.609375rem 1.015625rem;
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-button.sk-base,
|
||||
.sk-box.sk-base,
|
||||
.sk-circle.sk-base {
|
||||
@include ui-rect(var(--sn-stylekit-background-color), var(--sn-stylekit-foreground-color), true);
|
||||
}
|
||||
|
||||
.sk-button.contrast,
|
||||
.sk-box.contrast,
|
||||
.sk-circle.contrast {
|
||||
@include ui-rect(var(--sn-stylekit-contrast-background-color), var(--sn-stylekit-contrast-foreground-color), true);
|
||||
}
|
||||
|
||||
.sk-button.sk-secondary,
|
||||
.sk-box.sk-secondary,
|
||||
.sk-circle.sk-secondary {
|
||||
@include ui-rect(var(--sn-stylekit-secondary-background-color), var(--sn-stylekit-secondary-foreground-color), true);
|
||||
}
|
||||
|
||||
.sk-button.sk-secondary-contrast,
|
||||
.sk-box.sk-secondary-contrast,
|
||||
.sk-circle.sk-secondary-contrast {
|
||||
@include ui-rect(
|
||||
var(--sn-stylekit-secondary-contrast-background-color),
|
||||
var(--sn-stylekit-secondary-contrast-foreground-color),
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
.sk-button.neutral,
|
||||
.sk-box.neutral,
|
||||
.sk-circle.neutral {
|
||||
@include ui-rect(var(--sn-stylekit-neutral-color), var(--sn-stylekit-neutral-contrast-color), true);
|
||||
}
|
||||
|
||||
.sk-button.info,
|
||||
.sk-box.info,
|
||||
.sk-circle.info {
|
||||
@include ui-rect(var(--sn-stylekit-info-color), var(--sn-stylekit-info-contrast-color), true);
|
||||
}
|
||||
|
||||
.sk-button.warning,
|
||||
.sk-box.warning,
|
||||
.sk-circle.warning {
|
||||
@include ui-rect(var(--sn-stylekit-warning-color), var(--sn-stylekit-warning-contrast-color), true);
|
||||
}
|
||||
|
||||
.sk-button.danger,
|
||||
.sk-box.danger,
|
||||
.sk-circle.danger {
|
||||
@include ui-rect(var(--sn-stylekit-danger-color), var(--sn-stylekit-danger-contrast-color), true);
|
||||
}
|
||||
|
||||
.sk-button.success,
|
||||
.sk-box.success,
|
||||
.sk-circle.success {
|
||||
@include ui-rect(var(--sn-stylekit-success-color), var(--sn-stylekit-success-contrast-color), true);
|
||||
}
|
||||
|
||||
.sk-notification.contrast,
|
||||
.sk-input.contrast {
|
||||
@include ui-rect(
|
||||
var(--sn-stylekit-contrast-background-color),
|
||||
var(--sn-stylekit-contrast-foreground-color),
|
||||
false,
|
||||
var(--sn-stylekit-contrast-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.sk-notification.sk-secondary,
|
||||
.sk-input.sk-secondary {
|
||||
@include ui-rect(
|
||||
var(--sn-stylekit-secondary-background-color),
|
||||
var(--sn-stylekit-secondary-foreground-color),
|
||||
false,
|
||||
var(--sn-stylekit-secondary-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.sk-notification.sk-secondary-contrast,
|
||||
.sk-input.sk-secondary-contrast {
|
||||
@include ui-rect(
|
||||
var(--sn-stylekit-secondary-contrast-background-color),
|
||||
var(--sn-stylekit-secondary-contrast-foreground-color),
|
||||
false,
|
||||
var(--sn-stylekit-secondary-contrast-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.sk-notification.sk-base,
|
||||
.sk-input.sk-base {
|
||||
@include ui-rect(
|
||||
var(--sn-stylekit-background-color),
|
||||
var(--sn-stylekit-foreground-color),
|
||||
false,
|
||||
var(--sn-stylekit-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.sk-notification.neutral,
|
||||
.sk-input.neutral {
|
||||
@include ui-rect(var(--sn-stylekit-neutral-color), var(--sn-stylekit-neutral-contrast-color), false);
|
||||
}
|
||||
|
||||
.sk-notification.info,
|
||||
.sk-input.info {
|
||||
@include ui-rect(var(--sn-stylekit-info-color), var(--sn-stylekit-info-contrast-color), false);
|
||||
}
|
||||
|
||||
.sk-notification.warning,
|
||||
.sk-input.warning {
|
||||
@include ui-rect(var(--sn-stylekit-warning-color), var(--sn-stylekit-warning-contrast-color), false);
|
||||
}
|
||||
|
||||
.sk-notification.danger,
|
||||
.sk-input.danger {
|
||||
@include ui-rect(var(--sn-stylekit-danger-color), var(--sn-stylekit-danger-contrast-color), false);
|
||||
}
|
||||
|
||||
.sk-notification.success,
|
||||
.sk-input.success {
|
||||
@include ui-rect(var(--sn-stylekit-success-color), var(--sn-stylekit-success-contrast-color), false);
|
||||
}
|
||||
|
||||
.sk-notification {
|
||||
padding: 0.89375rem 0.8125rem;
|
||||
margin: 1.1375rem 0;
|
||||
text-align: left;
|
||||
cursor: default;
|
||||
|
||||
&.one-line {
|
||||
padding: 0rem 0.325rem;
|
||||
}
|
||||
|
||||
&.stretch {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.dashed {
|
||||
border-style: dashed;
|
||||
border-width: 2px;
|
||||
|
||||
// represents border element
|
||||
&:after {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-notification-title {
|
||||
font-size: var(--sn-stylekit-font-size-h1);
|
||||
font-weight: bold;
|
||||
line-height: 1.54375rem;
|
||||
}
|
||||
|
||||
.sk-notification-text {
|
||||
line-height: 1.21875rem;
|
||||
font-size: var(--sn-stylekit-font-size-p);
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-circle {
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
|
||||
border-color: var(--sn-stylekit-contrast-foreground-color);
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
|
||||
padding: 0;
|
||||
border-radius: 50% !important;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:before {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-spinner {
|
||||
border: 1px solid var(--sn-stylekit-neutral-color);
|
||||
border-radius: 50%;
|
||||
animation: rotate 0.8s infinite linear;
|
||||
border-right-color: transparent;
|
||||
|
||||
&.small {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&.info-contrast {
|
||||
border-color: var(--sn-stylekit-info-contrast-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
&.info {
|
||||
border-color: var(--sn-stylekit-info-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: var(--sn-stylekit-warning-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
border-color: var(--sn-stylekit-danger-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
&.success {
|
||||
border-color: var(--sn-stylekit-success-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-info {
|
||||
border-color: var(--sn-stylekit-info-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
svg.sk-circular-progress {
|
||||
$pi: 3.14159265358979;
|
||||
|
||||
$circle-size: 18px;
|
||||
$stroke-width: $circle-size * (0.1 / 100) * 100 + 1;
|
||||
$radius: ($circle-size - $stroke-width) / 2;
|
||||
$circumference: ($radius * $pi * 2);
|
||||
|
||||
height: $circle-size;
|
||||
width: $circle-size;
|
||||
|
||||
circle.background {
|
||||
cx: $circle-size / 2;
|
||||
cy: $circle-size / 2;
|
||||
r: $radius;
|
||||
fill: none;
|
||||
stroke: var(--sn-stylekit-contrast-border-color);
|
||||
stroke-width: $stroke-width;
|
||||
}
|
||||
|
||||
circle.progress {
|
||||
cx: $circle-size / 2;
|
||||
cy: $circle-size / 2;
|
||||
r: $radius;
|
||||
fill: none;
|
||||
stroke: var(--sn-stylekit-info-color);
|
||||
stroke-linecap: round;
|
||||
stroke-width: $stroke-width;
|
||||
transition: all 0.5s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
@mixin set-progress($progress) {
|
||||
$dash: ($progress * $circumference) / 100;
|
||||
stroke-dasharray: $dash $circumference - $dash;
|
||||
}
|
||||
|
||||
&.p-0 {
|
||||
@include set-progress(0);
|
||||
}
|
||||
|
||||
&.p-10 {
|
||||
@include set-progress(10);
|
||||
}
|
||||
|
||||
&.p-20 {
|
||||
@include set-progress(20);
|
||||
}
|
||||
|
||||
&.p-30 {
|
||||
@include set-progress(30);
|
||||
}
|
||||
|
||||
&.p-40 {
|
||||
@include set-progress(40);
|
||||
}
|
||||
|
||||
&.p-50 {
|
||||
@include set-progress(50);
|
||||
}
|
||||
|
||||
&.p-60 {
|
||||
@include set-progress(60);
|
||||
}
|
||||
|
||||
&.p-70 {
|
||||
@include set-progress(70);
|
||||
}
|
||||
|
||||
&.p-80 {
|
||||
@include set-progress(80);
|
||||
}
|
||||
|
||||
&.p-90 {
|
||||
@include set-progress(90);
|
||||
}
|
||||
|
||||
&.p-100 {
|
||||
@include set-progress(100);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user