2022-10-30 16:28:14 +08:00
|
|
|
@use "sass:math";
|
|
|
|
|
|
2022-07-07 05:19:05 +08:00
|
|
|
button {
|
|
|
|
|
outline: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
background: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
text-align: left;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: inherit;
|
|
|
|
|
font-weight: inherit;
|
|
|
|
|
line-height: inherit;
|
|
|
|
|
}
|
|
|
|
|
.btn {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
outline: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 5px 20px;
|
|
|
|
|
column-gap: 7px;
|
|
|
|
|
user-select: none;
|
|
|
|
|
min-width: var(--btnHeight);
|
|
|
|
|
min-height: var(--btnHeight);
|
|
|
|
|
text-align: center;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: var(--baseFontSize);
|
|
|
|
|
font-family: var(--baseFontFamily);
|
|
|
|
|
border-radius: var(--btnRadius);
|
|
|
|
|
background: none;
|
|
|
|
|
transition: color var(--baseAnimationSpeed);
|
|
|
|
|
i {
|
|
|
|
|
font-size: 1.1428em;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// background layer
|
|
|
|
|
&:before {
|
|
|
|
|
content: '';
|
|
|
|
|
border-radius: inherit;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
user-select: none;
|
2022-08-05 11:00:38 +08:00
|
|
|
backface-visibility: hidden;
|
2022-07-07 05:19:05 +08:00
|
|
|
background: var(--primaryColor);
|
|
|
|
|
transition: filter var(--baseAnimationSpeed),
|
|
|
|
|
opacity var(--baseAnimationSpeed),
|
|
|
|
|
transform var(--baseAnimationSpeed),
|
|
|
|
|
background var(--baseAnimationSpeed);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// hover/active states
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
&:before {
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.active,
|
|
|
|
|
&:active {
|
|
|
|
|
z-index: 999;
|
|
|
|
|
&:before {
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
transition-duration: var(--activeAnimationSpeed);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$variationsMap: (
|
|
|
|
|
"info": var(--infoColor),
|
|
|
|
|
"success": var(--successColor),
|
|
|
|
|
"danger": var(--dangerColor),
|
|
|
|
|
"warning": var(--warningColor),
|
|
|
|
|
"hint": var(--baseAlt4Color),
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// primary styles
|
|
|
|
|
@each $name, $color in $variationsMap {
|
|
|
|
|
&.btn-#{$name} {
|
|
|
|
|
&:before {
|
|
|
|
|
background: $color;
|
|
|
|
|
}
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
&:before {
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:active {
|
|
|
|
|
&:before {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// secondary/bordered styles
|
|
|
|
|
&.btn-outline {
|
|
|
|
|
border: 2px solid currentColor;
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
2023-01-24 03:57:35 +08:00
|
|
|
|
|
|
|
|
@mixin btnOpacity($base: 1, $hover: 1, $active: 1) {
|
2022-07-07 05:19:05 +08:00
|
|
|
&:before {
|
2023-01-24 03:57:35 +08:00
|
|
|
opacity: $base;
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
&:focus-visible,
|
2023-01-24 03:57:35 +08:00
|
|
|
&:hover {
|
2022-07-07 05:19:05 +08:00
|
|
|
&:before {
|
2023-01-24 03:57:35 +08:00
|
|
|
opacity: $hover;
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.active,
|
|
|
|
|
&:active {
|
|
|
|
|
&:before {
|
2023-01-24 03:57:35 +08:00
|
|
|
opacity: $active;
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
}
|
2023-01-24 03:57:35 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.btn-secondary,
|
|
|
|
|
&.btn-transparent,
|
|
|
|
|
&.btn-outline {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
color: var(--txtPrimaryColor);
|
2023-02-02 06:19:04 +08:00
|
|
|
@include btnOpacity(0, 0.3, 0.45);
|
2023-01-24 03:57:35 +08:00
|
|
|
&:before {
|
|
|
|
|
background: var(--baseAlt3Color);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
@each $name, $color in $variationsMap {
|
|
|
|
|
&.btn-#{$name} {
|
|
|
|
|
color: $color;
|
2023-01-24 03:57:35 +08:00
|
|
|
@include btnOpacity(0, 0.15, 0.25);
|
2022-07-07 05:19:05 +08:00
|
|
|
&:before {
|
|
|
|
|
background: $color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.btn-hint {
|
|
|
|
|
color: var(--txtHintColor);
|
2023-01-24 03:57:35 +08:00
|
|
|
&:focus-visible,
|
|
|
|
|
&:hover,
|
|
|
|
|
&:active,
|
|
|
|
|
&.active {
|
|
|
|
|
color: var(--txtPrimaryColor);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.btn-secondary {
|
2023-02-02 06:19:04 +08:00
|
|
|
@include btnOpacity(0.35, 0.5, 0.7);
|
2023-01-24 03:57:35 +08:00
|
|
|
@each $name, $color in $variationsMap {
|
|
|
|
|
&.btn-#{$name} {
|
|
|
|
|
@include btnOpacity(0.15, 0.25, 0.3);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// disabled state
|
|
|
|
|
&.btn-disabled,
|
|
|
|
|
&[disabled] {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
cursor: default;
|
2023-02-02 20:09:25 +08:00
|
|
|
background: var(--baseAlt1Color);
|
2022-07-07 05:19:05 +08:00
|
|
|
color: var(--txtDisabledColor) !important;
|
|
|
|
|
&:before {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2023-01-24 03:57:35 +08:00
|
|
|
&.btn-transparent {
|
2022-07-07 05:19:05 +08:00
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
&.btn-outline {
|
|
|
|
|
border-color: var(--baseAlt2Color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// sizes
|
|
|
|
|
&.btn-expanded {
|
2023-01-24 03:57:35 +08:00
|
|
|
min-width: 150px;
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
&.btn-expanded-sm {
|
|
|
|
|
min-width: 90px;
|
|
|
|
|
}
|
|
|
|
|
&.btn-expanded-lg {
|
|
|
|
|
min-width: 170px;
|
|
|
|
|
}
|
|
|
|
|
&.btn-lg {
|
|
|
|
|
column-gap: 10px;
|
|
|
|
|
font-size: var(--lgFontSize);
|
|
|
|
|
min-height: var(--lgBtnHeight);
|
|
|
|
|
min-width: var(--lgBtnHeight);
|
|
|
|
|
padding-left: 30px;
|
|
|
|
|
padding-right: 30px;
|
|
|
|
|
i {
|
|
|
|
|
font-size: 1.2666em;
|
|
|
|
|
}
|
|
|
|
|
&.btn-expanded {
|
|
|
|
|
min-width: 240px;
|
|
|
|
|
}
|
|
|
|
|
&.btn-expanded-sm {
|
|
|
|
|
min-width: 160px;
|
|
|
|
|
}
|
|
|
|
|
&.btn-expanded-lg {
|
|
|
|
|
min-width: 300px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.btn-sm,
|
|
|
|
|
&.btn-xs {
|
|
|
|
|
column-gap: 5px;
|
|
|
|
|
font-size: var(--smFontSize);
|
|
|
|
|
min-height: var(--smBtnHeight);
|
|
|
|
|
min-width: var(--smBtnHeight);
|
|
|
|
|
padding-left: 12px;
|
|
|
|
|
padding-right: 12px;
|
|
|
|
|
i {
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
}
|
|
|
|
|
&.btn-expanded {
|
|
|
|
|
min-width: 100px;
|
|
|
|
|
}
|
|
|
|
|
&.btn-expanded-sm {
|
|
|
|
|
min-width: 80px;
|
|
|
|
|
}
|
|
|
|
|
&.btn-expanded-lg {
|
|
|
|
|
min-width: 130px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.btn-xs {
|
|
|
|
|
min-width: var(--xsBtnHeight);
|
|
|
|
|
min-height: var(--xsBtnHeight);
|
|
|
|
|
}
|
|
|
|
|
&.btn-block {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2023-03-19 14:17:36 +08:00
|
|
|
// pill
|
|
|
|
|
&.btn-pill {
|
|
|
|
|
border-radius: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-07 05:19:05 +08:00
|
|
|
// circle
|
|
|
|
|
&.btn-circle {
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
padding: 0;
|
2022-07-19 19:36:35 +08:00
|
|
|
gap: 0;
|
2022-07-07 05:19:05 +08:00
|
|
|
i {
|
2023-01-24 03:57:35 +08:00
|
|
|
$iconSize: 19px;
|
2022-07-07 05:19:05 +08:00
|
|
|
font-size: 1.2857rem;
|
2022-07-15 02:21:33 +08:00
|
|
|
text-align: center;
|
|
|
|
|
width: $iconSize;
|
|
|
|
|
height: $iconSize;
|
|
|
|
|
line-height: $iconSize;
|
|
|
|
|
&:before {
|
|
|
|
|
margin: 0;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
2023-01-24 03:57:35 +08:00
|
|
|
&.btn-sm i {
|
2022-07-07 05:19:05 +08:00
|
|
|
font-size: 1.1rem;
|
|
|
|
|
}
|
2023-01-24 03:57:35 +08:00
|
|
|
&.btn-xs i {
|
|
|
|
|
font-size: 1.05rem;
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// loading
|
|
|
|
|
&.btn-loading {
|
|
|
|
|
--loaderSize: 24px;
|
|
|
|
|
|
|
|
|
|
cursor: default;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
&:after {
|
|
|
|
|
content: "\eec4";
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
width: var(--loaderSize);
|
|
|
|
|
height: var(--loaderSize);
|
|
|
|
|
line-height: var(--loaderSize);
|
|
|
|
|
font-size: var(--loaderSize);
|
|
|
|
|
color: inherit;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
margin-left: (calc(var(--loaderSize) * -0.5));
|
|
|
|
|
margin-top: (calc(var(--loaderSize) * -0.5));
|
|
|
|
|
font-family: var(--iconFontFamily);
|
|
|
|
|
animation: loaderShow var(--baseAnimationSpeed),
|
|
|
|
|
rotate 0.9s var(--baseAnimationSpeed) infinite linear;
|
|
|
|
|
}
|
|
|
|
|
& > * {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: scale(0.9);
|
|
|
|
|
}
|
|
|
|
|
&.btn-sm,
|
|
|
|
|
&.btn-xs {
|
|
|
|
|
--loaderSize: 20px;
|
|
|
|
|
}
|
|
|
|
|
&.btn-lg {
|
|
|
|
|
--loaderSize: 28px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// interact
|
|
|
|
|
&.btn-prev,
|
|
|
|
|
&.btn-next {
|
|
|
|
|
i {
|
|
|
|
|
transition: transform var(--baseAnimationSpeed);
|
|
|
|
|
}
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus-within {
|
|
|
|
|
i {
|
|
|
|
|
transform: translateX(3px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.btn-prev {
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus-within {
|
|
|
|
|
i {
|
|
|
|
|
transform: translateX(-3px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btns-group {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--xsSpacing);
|
2023-04-17 19:35:49 +08:00
|
|
|
&.no-gap {
|
|
|
|
|
gap: 0;
|
|
|
|
|
> * {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
box-shadow: -1px 0px 0px 0px rgba(#fff, 0.1);
|
|
|
|
|
}
|
|
|
|
|
> *:first-child {
|
|
|
|
|
border-top-left-radius: var(--btnRadius);
|
|
|
|
|
border-bottom-left-radius: var(--btnRadius);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
> *:last-child {
|
|
|
|
|
border-top-right-radius: var(--btnRadius);
|
|
|
|
|
border-bottom-right-radius: var(--btnRadius);
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
%input {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
outline: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
background: none;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
min-width: 0; // firefox flexbox grow fix
|
|
|
|
|
min-height: var(--inputHeight);
|
|
|
|
|
background: var(--baseAlt1Color);
|
|
|
|
|
color: var(--txtPrimaryColor);
|
|
|
|
|
font-size: var(--baseFontSize);
|
|
|
|
|
font-family: var(--baseFontFamily);
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
border-radius: var(--baseRadius);
|
2022-08-16 12:36:15 +08:00
|
|
|
overflow: auto; /* fallback */
|
|
|
|
|
overflow: overlay;
|
2022-07-07 05:19:05 +08:00
|
|
|
&::placeholder {
|
|
|
|
|
color: var(--txtDisabledColor);
|
|
|
|
|
}
|
|
|
|
|
&:focus,
|
2022-08-16 12:36:15 +08:00
|
|
|
&:focus-within {
|
|
|
|
|
@include scrollbar(
|
|
|
|
|
$thumbColor: var(--baseAlt3Color),
|
|
|
|
|
$thumbActiveColor: var(--baseAlt4Color)
|
|
|
|
|
);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
&[readonly],
|
|
|
|
|
&.readonly {
|
|
|
|
|
cursor: default;
|
|
|
|
|
color: var(--txtHintColor);
|
|
|
|
|
}
|
|
|
|
|
&[disabled],
|
|
|
|
|
&.disabled {
|
|
|
|
|
cursor: default;
|
|
|
|
|
color: var(--txtDisabledColor);
|
|
|
|
|
}
|
|
|
|
|
&.txt-mono {
|
2022-07-18 05:16:09 +08:00
|
|
|
line-height: var(--smLineHeight);
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
2022-08-06 04:25:16 +08:00
|
|
|
&.code {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
line-height: 1.379rem;
|
|
|
|
|
font-family: var(--monospaceFontFamily);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input,
|
|
|
|
|
select,
|
|
|
|
|
textarea {
|
|
|
|
|
@extend %input;
|
|
|
|
|
}
|
2022-09-11 03:54:26 +08:00
|
|
|
input {
|
|
|
|
|
// Safari and GNOME Web has a default height and ignores the min-height
|
|
|
|
|
height: var(--inputHeight);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
input:-webkit-autofill {
|
|
|
|
|
-webkit-text-fill-color: var(--txtPrimaryColor);
|
|
|
|
|
-webkit-box-shadow: inset 0 0 0 50px var(--baseAlt1Color);
|
|
|
|
|
}
|
|
|
|
|
.form-field:focus-within input:-webkit-autofill,
|
|
|
|
|
input:-webkit-autofill:focus {
|
|
|
|
|
-webkit-box-shadow: inset 0 0 0 50px var(--baseAlt2Color);
|
|
|
|
|
}
|
|
|
|
|
input[type="file"] {
|
|
|
|
|
padding: 9px;
|
|
|
|
|
}
|
|
|
|
|
input[type="checkbox"],
|
|
|
|
|
input[type="radio"] {
|
|
|
|
|
width: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
display: inline;
|
|
|
|
|
}
|
|
|
|
|
input[type=number] {
|
|
|
|
|
-moz-appearance: textfield;
|
|
|
|
|
appearance: textfield;
|
|
|
|
|
}
|
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
|
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
}
|
|
|
|
|
textarea {
|
|
|
|
|
min-height: 80px;
|
|
|
|
|
resize: vertical;
|
|
|
|
|
}
|
|
|
|
|
select {
|
|
|
|
|
padding-left: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-field {
|
|
|
|
|
--hPadding: 15px;
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-bottom: var(--baseSpacing);
|
|
|
|
|
%input {
|
|
|
|
|
z-index: 0;
|
|
|
|
|
padding-left: var(--hPadding);
|
|
|
|
|
padding-right: var(--hPadding);
|
|
|
|
|
}
|
|
|
|
|
select {
|
|
|
|
|
padding-left: 8px;
|
|
|
|
|
}
|
|
|
|
|
label {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
2022-07-16 15:40:04 +08:00
|
|
|
column-gap: 5px;
|
2022-07-07 05:19:05 +08:00
|
|
|
align-items: center;
|
|
|
|
|
user-select: none;
|
|
|
|
|
font-weight: 600;
|
2023-02-19 01:33:42 +08:00
|
|
|
font-size: var(--smFontSize);
|
2023-02-24 03:07:00 +08:00
|
|
|
letter-spacing: 0.1px;
|
|
|
|
|
color: var(--txtHintColor);
|
2022-07-07 05:19:05 +08:00
|
|
|
line-height: 1;
|
|
|
|
|
padding-top: 12px;
|
2023-02-19 01:33:42 +08:00
|
|
|
padding-bottom: 3px;
|
2022-07-07 05:19:05 +08:00
|
|
|
padding-left: var(--hPadding);
|
|
|
|
|
padding-right: var(--hPadding);
|
|
|
|
|
border: 0;
|
|
|
|
|
border-top-left-radius: var(--baseRadius);
|
|
|
|
|
border-top-right-radius: var(--baseRadius);
|
|
|
|
|
& ~ %input {
|
|
|
|
|
border-top: 0;
|
|
|
|
|
padding-top: 2px;
|
|
|
|
|
padding-bottom: 8px;
|
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
i {
|
|
|
|
|
font-size: 0.96rem;
|
2023-02-19 01:33:42 +08:00
|
|
|
margin-bottom: -1px;
|
|
|
|
|
&:before {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
%input, label {
|
|
|
|
|
background: var(--baseAlt1Color);
|
|
|
|
|
transition: color var(--baseAnimationSpeed),
|
|
|
|
|
background var(--baseAnimationSpeed),
|
|
|
|
|
box-shadow var(--baseAnimationSpeed);
|
|
|
|
|
}
|
|
|
|
|
&:focus-within {
|
|
|
|
|
%input, label {
|
|
|
|
|
background: var(--baseAlt2Color);
|
|
|
|
|
}
|
|
|
|
|
label {
|
|
|
|
|
color: var(--txtPrimaryColor);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// addon
|
|
|
|
|
.form-field-addon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
top: 0px;
|
|
|
|
|
right: var(--hPadding);
|
|
|
|
|
min-height: var(--inputHeight);
|
|
|
|
|
color: var(--txtHintColor);
|
|
|
|
|
.btn {
|
|
|
|
|
margin-right: -5px;
|
|
|
|
|
}
|
2023-03-17 01:21:16 +08:00
|
|
|
&:not(.prefix) ~ %input {
|
|
|
|
|
padding-right: 45px;
|
|
|
|
|
}
|
|
|
|
|
&.prefix {
|
|
|
|
|
right: auto;
|
|
|
|
|
left: var(--hPadding);
|
|
|
|
|
& ~ %input {
|
|
|
|
|
padding-left: 45px;
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
label ~ .form-field-addon {
|
2022-10-30 16:28:14 +08:00
|
|
|
min-height: calc(26px + var(--inputHeight));
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// hints
|
|
|
|
|
.help-block {
|
|
|
|
|
@extend .content;
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
font-size: var(--smFontSize);
|
|
|
|
|
line-height: var(--smLineHeight);
|
|
|
|
|
color: var(--txtHintColor);
|
2022-08-06 13:03:34 +08:00
|
|
|
word-break: break-word;
|
2022-08-10 18:22:27 +08:00
|
|
|
pre {
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
2022-08-05 11:00:38 +08:00
|
|
|
.help-block-error {
|
|
|
|
|
color: var(--dangerColor);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
|
|
|
|
|
// states
|
2022-07-16 15:40:04 +08:00
|
|
|
&.error,
|
|
|
|
|
&.invalid {
|
2022-07-07 05:19:05 +08:00
|
|
|
> label {
|
|
|
|
|
color: var(--dangerColor);
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-07-16 15:40:04 +08:00
|
|
|
&.invalid {
|
|
|
|
|
label, %input {
|
|
|
|
|
background: var(--dangerAltColor);
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
&.required:not(.form-field-toggle) {
|
|
|
|
|
> label:after {
|
|
|
|
|
content: '*';
|
|
|
|
|
color: var(--dangerColor);
|
2022-07-16 15:40:04 +08:00
|
|
|
margin-top: -2px;
|
|
|
|
|
margin-left: -2px;
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
}
|
2023-02-19 01:33:42 +08:00
|
|
|
&.readonly,
|
2022-07-07 05:19:05 +08:00
|
|
|
&.disabled {
|
2023-02-19 01:33:42 +08:00
|
|
|
label, %input {
|
|
|
|
|
background: var(--baseAlt1Color);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
> label {
|
2023-02-19 01:33:42 +08:00
|
|
|
color: var(--txtHintColor);
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
&.required > label:after {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-02-19 01:33:42 +08:00
|
|
|
&.disabled {
|
2023-02-22 04:24:49 +08:00
|
|
|
label, %input {
|
|
|
|
|
box-shadow: inset 0 0 0 var(--btnHeight) rgba(#fff, 0.45);
|
|
|
|
|
}
|
2023-02-19 01:33:42 +08:00
|
|
|
> label {
|
|
|
|
|
color: var(--txtDisabledColor);
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
|
|
|
|
|
// checkbox/radio
|
|
|
|
|
input[type="radio"],
|
|
|
|
|
input[type="checkbox"] {
|
|
|
|
|
$size: 20px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
min-height: 0;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
background: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
~ label {
|
|
|
|
|
border: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
outline: 0;
|
|
|
|
|
background: none;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: auto;
|
|
|
|
|
column-gap: 5px;
|
|
|
|
|
user-select: none;
|
|
|
|
|
padding: 0 0 0 ($size + 7px);
|
|
|
|
|
line-height: $size;
|
|
|
|
|
min-height: $size;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
font-size: var(--baseFontSize);
|
|
|
|
|
text-transform: none;
|
|
|
|
|
color: var(--txtPrimaryColor);
|
|
|
|
|
&:before {
|
|
|
|
|
content: '';
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
width: $size;
|
|
|
|
|
height: $size;
|
|
|
|
|
line-height: $size - 4;
|
|
|
|
|
font-family: var(--iconFontFamily);
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: var(--baseColor);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background: var(--baseColor);
|
|
|
|
|
border-radius: var(--baseRadius);
|
|
|
|
|
border: 2px solid var(--baseAlt3Color);
|
|
|
|
|
transition: transform var(--baseAnimationSpeed),
|
|
|
|
|
border-color var(--baseAnimationSpeed),
|
|
|
|
|
color var(--baseAnimationSpeed),
|
|
|
|
|
background var(--baseAnimationSpeed);
|
|
|
|
|
}
|
|
|
|
|
&:active:before {
|
|
|
|
|
transform: scale(0.9);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:focus ~ label,
|
|
|
|
|
& ~ label:hover {
|
|
|
|
|
&:before {
|
|
|
|
|
border-color: var(--baseAlt4Color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:checked ~ label {
|
|
|
|
|
&:before {
|
|
|
|
|
content: '\eb7a';
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
mix-blend-mode: unset;
|
|
|
|
|
background: var(--successColor);
|
|
|
|
|
border-color: var(--successColor);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:disabled ~ label {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
color: var(--txtDisabledColor);
|
|
|
|
|
&:before {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
input[type="radio"] {
|
|
|
|
|
& ~ label:before {
|
|
|
|
|
border-radius: 50%;
|
2022-08-21 19:30:36 +08:00
|
|
|
font-size: 1rem;
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
2022-08-21 19:30:36 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-field-block {
|
|
|
|
|
@extend %block;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 0 0 var(--xsSpacing);
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-bottom: 0;
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// toggle
|
|
|
|
|
&.form-field-toggle {
|
2022-10-30 16:28:14 +08:00
|
|
|
@mixin toggleSize($toggleWidth: 40px, $toggleHeight: 24px) {
|
|
|
|
|
$toggleSize: $toggleHeight - 8;
|
|
|
|
|
$toggleOffset: ($toggleHeight - $toggleSize) * 0.5;
|
|
|
|
|
input[type="radio"],
|
|
|
|
|
input[type="checkbox"] {
|
|
|
|
|
& ~ label {
|
|
|
|
|
min-height: $toggleHeight;
|
|
|
|
|
padding-left: $toggleWidth + 7px;
|
|
|
|
|
&:empty {
|
|
|
|
|
padding-left: $toggleWidth;
|
|
|
|
|
}
|
|
|
|
|
&:before {
|
|
|
|
|
width: $toggleWidth;
|
|
|
|
|
height: $toggleHeight;
|
|
|
|
|
border-radius: $toggleHeight;
|
|
|
|
|
}
|
|
|
|
|
&:after {
|
|
|
|
|
top: $toggleOffset;
|
|
|
|
|
left: $toggleOffset;
|
|
|
|
|
width: $toggleSize;
|
|
|
|
|
height: $toggleSize;
|
|
|
|
|
border-radius: $toggleSize;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:checked ~ label {
|
|
|
|
|
&:after {
|
|
|
|
|
left: $toggleWidth - $toggleSize - $toggleOffset;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-07 05:19:05 +08:00
|
|
|
input[type="radio"],
|
|
|
|
|
input[type="checkbox"] {
|
|
|
|
|
& ~ label {
|
2022-10-30 16:28:14 +08:00
|
|
|
position: relative;
|
2022-07-07 05:19:05 +08:00
|
|
|
&:before {
|
|
|
|
|
content: '';
|
|
|
|
|
border: 0;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
background: var(--baseAlt3Color);
|
|
|
|
|
transition: background var(--activeAnimationSpeed);
|
|
|
|
|
}
|
|
|
|
|
&:after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background: var(--baseColor);
|
|
|
|
|
transition: left var(--activeAnimationSpeed),
|
|
|
|
|
transform var(--activeAnimationSpeed),
|
|
|
|
|
background var(--activeAnimationSpeed);
|
|
|
|
|
@include shadowize();
|
|
|
|
|
}
|
|
|
|
|
&:active:before {
|
|
|
|
|
transform: none;
|
|
|
|
|
}
|
|
|
|
|
&:active:after {
|
|
|
|
|
transform: scale(0.9);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:focus-visible ~ label {
|
|
|
|
|
&:before {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--baseAlt2Color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
& ~ label:hover {
|
|
|
|
|
&:before {
|
|
|
|
|
background: var(--baseAlt4Color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:checked ~ label {
|
|
|
|
|
&:before {
|
|
|
|
|
background: var(--successColor);
|
|
|
|
|
}
|
|
|
|
|
&:after {
|
|
|
|
|
background: var(--baseColor);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-10-30 16:28:14 +08:00
|
|
|
|
|
|
|
|
@include toggleSize(40px, 24px);
|
|
|
|
|
|
|
|
|
|
&.form-field-sm {
|
|
|
|
|
@include toggleSize(32px, 20px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-field-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
align-items: center;
|
|
|
|
|
> .form-field {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
border-left: 1px solid var(--baseAlt2Color);
|
|
|
|
|
&:first-child {
|
|
|
|
|
border-left: 0;
|
|
|
|
|
}
|
|
|
|
|
&:not(:first-child) {
|
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
|
> label {
|
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
> %input,
|
|
|
|
|
> .select .selected-container {
|
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:not(:last-child) {
|
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
> label {
|
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
> %input,
|
|
|
|
|
> .select .selected-container {
|
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@for $i from 12 through 1 {
|
|
|
|
|
.form-field.col-#{$i} {
|
|
|
|
|
width: math.div(100%, math.div(12, $i));
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// select field
|
|
|
|
|
.select {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: block;
|
|
|
|
|
outline: 0;
|
|
|
|
|
.option {
|
|
|
|
|
user-select: none;
|
2023-01-25 02:58:24 +08:00
|
|
|
column-gap: 5px;
|
2022-07-07 05:19:05 +08:00
|
|
|
.icon {
|
|
|
|
|
min-width: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: inherit;
|
|
|
|
|
i {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
line-height: inherit;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// selected
|
|
|
|
|
.txt-placeholder {
|
|
|
|
|
color: var(--txtHintColor);
|
|
|
|
|
}
|
|
|
|
|
label ~ & .selected-container {
|
|
|
|
|
border-top: 0;
|
|
|
|
|
}
|
|
|
|
|
.selected-container {
|
|
|
|
|
@extend %input;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
width: 100%;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding-top: 0px;
|
|
|
|
|
padding-bottom: 0px;
|
|
|
|
|
padding-right: 35px !important;
|
|
|
|
|
user-select: none;
|
|
|
|
|
&:after {
|
|
|
|
|
$size: 20px;
|
|
|
|
|
content: "\ea4d";
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 5px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
width: $size;
|
|
|
|
|
height: $size;
|
|
|
|
|
line-height: $size;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: -($size * 0.5);
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
font-family: var(--iconFontFamily);
|
|
|
|
|
align-self: flex-end;
|
|
|
|
|
color: var(--txtHintColor);
|
|
|
|
|
transition: color var(--baseAnimationSpeed),
|
|
|
|
|
transform var(--baseAnimationSpeed);
|
|
|
|
|
}
|
|
|
|
|
&:active,
|
|
|
|
|
&.active {
|
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
&:after {
|
|
|
|
|
color: var(--txtPrimaryColor);
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.option {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
align-items: center;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
user-select: text;
|
|
|
|
|
}
|
|
|
|
|
.clear {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: var(--txtHintColor);
|
|
|
|
|
transition: color var(--baseAnimationSpeed);
|
|
|
|
|
i {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
color: var(--txtPrimaryColor);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.multiple .selected-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding-left: 2px;
|
|
|
|
|
row-gap: 3px;
|
|
|
|
|
column-gap: 4px;
|
|
|
|
|
.txt-placeholder {
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
}
|
|
|
|
|
.option {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
width: auto;
|
|
|
|
|
padding: 3px 5px;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
border-radius: var(--baseRadius);
|
|
|
|
|
background: var(--baseColor);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:not(.multiple) .selected-container {
|
|
|
|
|
.label {
|
|
|
|
|
margin-left: -2px;
|
|
|
|
|
}
|
|
|
|
|
.option .txt {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
line-height: normal;
|
|
|
|
|
}
|
2023-01-25 02:58:24 +08:00
|
|
|
}
|
|
|
|
|
&:not(.disabled) .selected-container:hover {
|
|
|
|
|
cursor: pointer;
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
&.disabled {
|
|
|
|
|
color: var(--txtDisabledColor);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
.txt-placeholder {
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
.selected-container {
|
|
|
|
|
color: inherit;
|
|
|
|
|
.link-hint {
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
}
|
|
|
|
|
*:not(.link-hint) {
|
|
|
|
|
color: inherit !important;
|
|
|
|
|
}
|
|
|
|
|
&:after,
|
|
|
|
|
.clear {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
cursor: inherit;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// dropdown
|
|
|
|
|
.txt-missing {
|
|
|
|
|
@extend %block;
|
|
|
|
|
color: var(--txtHintColor);
|
|
|
|
|
padding: 5px 12px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
.options-dropdown {
|
|
|
|
|
max-height: none;
|
|
|
|
|
border: 0;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
|
margin-top: -2px;
|
|
|
|
|
@include shadowize(inset 0 0 0 2px var(--baseAlt2Color));
|
|
|
|
|
.input-group:focus-within {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
.form-field.options-search {
|
|
|
|
|
margin: 0px 0 5px;
|
|
|
|
|
padding: 0 0 2px;
|
|
|
|
|
color: var(--txtHintColor);
|
|
|
|
|
border-bottom: 1px solid var(--baseAlt2Color);
|
|
|
|
|
.input-group {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
padding: 0 0 0 10px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
background: none;
|
|
|
|
|
column-gap: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
input {
|
|
|
|
|
border: 0;
|
|
|
|
|
padding-left: 9px;
|
|
|
|
|
padding-right: 9px;
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.options-list {
|
|
|
|
|
overflow: auto;
|
2023-01-25 02:58:24 +08:00
|
|
|
max-height: 240px;
|
2022-07-07 05:19:05 +08:00
|
|
|
width: auto;
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
margin-right: -5px;
|
|
|
|
|
padding-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.options-list:not(:empty) ~ [slot="afterOptions"]:not(:empty) {
|
|
|
|
|
margin: 5px -5px -5px;
|
|
|
|
|
.btn-block {
|
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
|
border-bottom-left-radius: var(--baseRadius);
|
|
|
|
|
border-bottom-right-radius: var(--baseRadius);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// with label
|
|
|
|
|
label ~ & {
|
|
|
|
|
.selected-container {
|
|
|
|
|
padding-bottom: 4px;
|
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
&.multiple .selected-container {
|
|
|
|
|
padding-top: 3px;
|
|
|
|
|
padding-bottom: 3px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// block/full-width options style
|
|
|
|
|
&.block-options {
|
|
|
|
|
&.multiple .selected-container {
|
|
|
|
|
.option {
|
|
|
|
|
width: 100%;
|
|
|
|
|
@include shadowize();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-10-30 16:28:14 +08:00
|
|
|
.field-type-select {
|
|
|
|
|
.options-dropdown {
|
2023-01-17 19:31:48 +08:00
|
|
|
padding: 2px 1px 1px 2px;
|
2022-10-30 16:28:14 +08:00
|
|
|
.form-field.options-search {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
.options-list {
|
|
|
|
|
max-height: 490px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
.dropdown-item {
|
|
|
|
|
width: 50%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding-left: 12px; // visual align with the label
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
border-bottom: 1px solid var(--baseAlt2Color);
|
2023-01-17 19:31:48 +08:00
|
|
|
border-right: 1px solid var(--baseAlt2Color);
|
2022-10-30 16:28:14 +08:00
|
|
|
&.selected {
|
|
|
|
|
background: var(--baseAlt1Color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
|
2023-01-24 03:57:35 +08:00
|
|
|
.form-field-list {
|
2023-04-13 21:46:41 +08:00
|
|
|
border-radius: var(--baseRadius);
|
|
|
|
|
transition: box-shadow var(--baseAnimationSpeed);
|
2022-07-07 05:19:05 +08:00
|
|
|
label {
|
2023-01-24 03:57:35 +08:00
|
|
|
padding-bottom: 10px;
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
2023-01-24 03:57:35 +08:00
|
|
|
.list {
|
2022-07-07 05:19:05 +08:00
|
|
|
background: var(--baseAlt1Color);
|
|
|
|
|
border: 0;
|
2023-01-24 03:57:35 +08:00
|
|
|
border-radius: 0;
|
2022-07-07 05:19:05 +08:00
|
|
|
border-bottom-left-radius: var(--baseRadius);
|
|
|
|
|
border-bottom-right-radius: var(--baseRadius);
|
2023-04-13 21:46:41 +08:00
|
|
|
transition: background var(--baseAnimationSpeed);
|
2022-07-07 05:19:05 +08:00
|
|
|
.list-item {
|
|
|
|
|
border-top: 1px solid var(--baseAlt2Color);
|
2023-01-24 03:57:35 +08:00
|
|
|
&.selected {
|
|
|
|
|
background: var(--baseAlt2Color);
|
|
|
|
|
}
|
|
|
|
|
&.handle:not(.disabled) {
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
background: var(--baseAlt2Color);
|
|
|
|
|
}
|
|
|
|
|
&:active {
|
|
|
|
|
background: var(--baseAlt3Color);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:focus-within {
|
2023-01-24 03:57:35 +08:00
|
|
|
.list, label {
|
2022-07-07 05:19:05 +08:00
|
|
|
background: var(--baseAlt1Color);
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-04-13 21:46:41 +08:00
|
|
|
&.dragover {
|
|
|
|
|
box-shadow: 0px 0px 0px 2px var(--warningColor);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// codemirror field
|
|
|
|
|
.code-editor {
|
|
|
|
|
@extend %input;
|
2023-02-19 01:33:42 +08:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 100%;
|
2022-07-07 05:19:05 +08:00
|
|
|
.form-field label ~ & {
|
|
|
|
|
padding-bottom: 6px;
|
|
|
|
|
padding-top: 4px;
|
|
|
|
|
}
|
|
|
|
|
.cm-editor {
|
2023-02-19 01:33:42 +08:00
|
|
|
flex-grow: 1;
|
2022-07-07 05:19:05 +08:00
|
|
|
border: 0 !important;
|
|
|
|
|
outline: none !important;
|
|
|
|
|
.cm-line {
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
.cm-tooltip-autocomplete {
|
|
|
|
|
@include shadowize();
|
|
|
|
|
border-radius: var(--baseRadius);
|
|
|
|
|
background: var(--baseColor);
|
|
|
|
|
border: 0;
|
2022-10-30 16:28:14 +08:00
|
|
|
z-index: 9999;
|
2022-07-07 05:19:05 +08:00
|
|
|
padding: 0 3px;
|
|
|
|
|
font-size: 0.92rem;
|
|
|
|
|
ul {
|
|
|
|
|
margin: 0;
|
|
|
|
|
border-radius: inherit;
|
|
|
|
|
> :first-child {
|
|
|
|
|
border-top-left-radius: inherit;
|
|
|
|
|
border-top-right-radius: inherit;
|
|
|
|
|
}
|
|
|
|
|
> :last-child {
|
|
|
|
|
border-bottom-left-radius: inherit;
|
|
|
|
|
border-bottom-right-radius: inherit;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
ul li[aria-selected] {
|
|
|
|
|
background: var(--infoColor);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cm-scroller {
|
2023-02-19 01:33:42 +08:00
|
|
|
flex-grow: 1;
|
2022-07-07 05:19:05 +08:00
|
|
|
outline: 0 !important;
|
|
|
|
|
font-family: var(--monospaceFontFamily);
|
|
|
|
|
font-size: var(--baseFontSize);
|
|
|
|
|
line-height: var(--baseLineHeight);
|
|
|
|
|
}
|
|
|
|
|
.cm-cursorLayer {
|
|
|
|
|
.cm-cursor {
|
|
|
|
|
margin-left: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cm-placeholder {
|
|
|
|
|
color: var(--txtDisabledColor);
|
|
|
|
|
font-family: var(--monospaceFontFamily);
|
|
|
|
|
font-size: var(--baseFontSize);
|
|
|
|
|
line-height: var(--baseLineHeight);
|
|
|
|
|
}
|
2022-08-06 04:25:16 +08:00
|
|
|
.cm-selectionMatch {
|
|
|
|
|
background: var(--infoAltColor);
|
|
|
|
|
}
|
2022-08-21 19:30:36 +08:00
|
|
|
&.cm-focused .cm-matchingBracket {
|
|
|
|
|
background-color: rgba(50, 140, 130, 0.1);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
2023-02-19 01:33:42 +08:00
|
|
|
.ͼf {
|
|
|
|
|
color: var(--dangerColor);
|
|
|
|
|
}
|
2022-07-07 05:19:05 +08:00
|
|
|
}
|
2023-01-17 19:31:48 +08:00
|
|
|
|
|
|
|
|
// tinymce field
|
|
|
|
|
.tinymce-wrapper {
|
|
|
|
|
@extend %input;
|
|
|
|
|
min-height: 277px;
|
|
|
|
|
.tox-tinymce {
|
|
|
|
|
border-radius: var(--baseRadius);
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
.form-field label ~ & {
|
|
|
|
|
padding: 5px 2px 2px 2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
.tox .tox-tbtn {
|
|
|
|
|
height: 30px;
|
|
|
|
|
svg {
|
|
|
|
|
transform: scale(0.85);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tox .tox-tbtn:not(.tox-tbtn--select) {
|
|
|
|
|
width: 30px;
|
|
|
|
|
}
|
|
|
|
|
.tox .tox-button,
|
|
|
|
|
.tox .tox-button--secondary {
|
|
|
|
|
font-size: var(--smFontSize);
|
|
|
|
|
}
|
|
|
|
|
.tox .tox-toolbar-overlord {
|
|
|
|
|
@include shadowize();
|
|
|
|
|
}
|
|
|
|
|
.tox .tox-listboxfield .tox-listbox--select,
|
|
|
|
|
.tox .tox-textarea, .tox .tox-textfield,
|
|
|
|
|
.tox .tox-toolbar-textfield {
|
|
|
|
|
padding: 3px 5px;
|
|
|
|
|
}
|
|
|
|
|
.tox-swatch:not(.tox-swatch--remove):not(.tox-collection__item--enabled) {
|
|
|
|
|
svg {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
