785 lines
16 KiB
SCSS
785 lines
16 KiB
SCSS
@use 'sass:math';
|
|
|
|
.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 * math.div(0.1, 100) * 100 + 1;
|
|
$radius: math.div($circle-size - $stroke-width, 2);
|
|
$circumference: ($radius * $pi * 2);
|
|
|
|
height: $circle-size;
|
|
width: $circle-size;
|
|
|
|
circle.background {
|
|
cx: math.div($circle-size, 2);
|
|
cy: math.div($circle-size, 2);
|
|
r: $radius;
|
|
fill: none;
|
|
stroke: var(--sn-stylekit-contrast-border-color);
|
|
stroke-width: $stroke-width;
|
|
}
|
|
|
|
circle.progress {
|
|
cx: math.div($circle-size, 2);
|
|
cy: math.div($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: math.div($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);
|
|
}
|
|
}
|
|
}
|