mirror of https://github.com/Budibase/budibase.git
nocodelowcodelow-codedockerdocker-composeinternal-projectinternal-toolinternal-toolslow-code-developmentlow-code-development-platformopensourceselfhostedweb-devweb-developmentweb-development-toolswebdevwebdevelopmentworkflow-automationautomationdeveloper-tools
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.
295 lines
13 KiB
295 lines
13 KiB
.spectrum-Radio {
|
|
--spectrum-radio-circle-border-size: var(--spectrum-radio-m-circle-border-size, var(--spectrum-alias-border-size-thick));
|
|
--spectrum-radio-circle-dot-size: var(--spectrum-radio-m-circle-dot-size, var(--spectrum-global-dimension-static-size-50));
|
|
--spectrum-radio-text-font-style: var(--spectrum-radio-m-text-font-style, var(--spectrum-global-font-style-regular));
|
|
--spectrum-radio-text-font-weight: var(--spectrum-radio-m-text-font-weight, var(--spectrum-alias-body-text-font-weight));
|
|
--spectrum-radio-text-line-height: var(--spectrum-radio-m-text-line-height, var(--spectrum-alias-component-text-line-height));
|
|
--spectrum-radio-text-size: var(--spectrum-radio-m-text-size, var(--spectrum-alias-item-text-size-m));
|
|
--spectrum-radio-height: var(--spectrum-radio-m-height, var(--spectrum-alias-item-height-m));
|
|
--spectrum-radio-circle-diameter: var(--spectrum-radio-m-circle-diameter, var(--spectrum-alias-item-control-2-size-m));
|
|
--spectrum-radio-text-gap: var(--spectrum-radio-m-text-gap, var(--spectrum-alias-item-control-gap-m));
|
|
|
|
--spectrum-radio-radius: calc(var(--spectrum-radio-circle-diameter) / 2);
|
|
--spectrum-radio-border-width-checked: calc(var(--spectrum-radio-circle-diameter) / 2 - var(--spectrum-radio-circle-dot-size) / 2);
|
|
|
|
--spectrum-radio-labelbelow-label-margin: var(
|
|
--spectrum-global-dimension-size-50
|
|
)
|
|
0 0 0;
|
|
--spectrum-radio-labelbelow-height: auto;
|
|
--spectrum-radio-label-margin-top: var(--spectrum-global-dimension-size-75);
|
|
}
|
|
|
|
.spectrum-Radio {
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
|
|
position: relative;
|
|
|
|
min-height: var(--spectrum-radio-height);
|
|
max-width: 100%;
|
|
|
|
vertical-align: top;
|
|
}
|
|
|
|
.spectrum-Radio-input {
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
line-height: 1.15;
|
|
margin: 0;
|
|
overflow: visible;
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
opacity: 0.0001;
|
|
z-index: 1;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.spectrum-Radio-input:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.spectrum-Radio-input:checked + .spectrum-Radio-button:before {
|
|
border-width: var(--spectrum-radio-border-width-checked);
|
|
}
|
|
|
|
.spectrum-Radio-input.focus-ring + .spectrum-Radio-button:after {
|
|
margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -1);
|
|
}
|
|
|
|
[dir="ltr"] .spectrum-Radio-label {
|
|
text-align: left;
|
|
}
|
|
|
|
[dir="rtl"] .spectrum-Radio-label {
|
|
text-align: right;
|
|
}
|
|
|
|
[dir="ltr"] .spectrum-Radio-label {
|
|
margin-left: var(--spectrum-radio-text-gap);
|
|
}
|
|
|
|
[dir="rtl"] .spectrum-Radio-label {
|
|
margin-right: var(--spectrum-radio-text-gap);
|
|
}
|
|
|
|
.spectrum-Radio-label {
|
|
margin-top: var(--spectrum-radio-label-margin-top);
|
|
|
|
font-size: var(--spectrum-radio-text-size);
|
|
font-weight: var(--spectrum-radio-text-font-weight);
|
|
font-style: var(--spectrum-radio-text-font-style);
|
|
line-height: var(--spectrum-radio-text-line-height);
|
|
|
|
transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
|
|
}
|
|
|
|
.spectrum-Radio-button {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: var(--spectrum-radio-circle-diameter);
|
|
height: var(--spectrum-radio-circle-diameter);
|
|
margin: calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter)) / 2)
|
|
0;
|
|
|
|
-ms-flex-positive: 0;
|
|
|
|
flex-grow: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.spectrum-Radio-button:before {
|
|
display: block;
|
|
z-index: 0;
|
|
content: "";
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
|
|
width: var(--spectrum-radio-circle-diameter);
|
|
height: var(--spectrum-radio-circle-diameter);
|
|
|
|
border-radius: var(--spectrum-radio-radius);
|
|
border-width: var(--spectrum-radio-circle-border-size);
|
|
border-style: solid;
|
|
|
|
transition: border var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
|
|
box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
|
|
}
|
|
|
|
.spectrum-Radio-button:after {
|
|
border-radius: 100%;
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
margin: var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25));
|
|
|
|
transition: opacity var(--spectrum-global-animation-duration-100, 130ms) ease-out,
|
|
margin var(--spectrum-global-animation-duration-100, 130ms) ease-out;
|
|
}
|
|
|
|
.spectrum-Radio--labelBelow {
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
height: var(--spectrum-radio-labelbelow-height);
|
|
}
|
|
|
|
.spectrum-Radio--labelBelow .spectrum-Radio-button {
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
.spectrum-Radio--labelBelow .spectrum-Radio-label {
|
|
margin: var(--spectrum-radio-labelbelow-label-margin);
|
|
}
|
|
|
|
.spectrum-Radio {
|
|
--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus: var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover, var(--spectrum-global-color-blue-600));
|
|
}
|
|
|
|
.spectrum-Radio-input:checked + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-circle-border-color-selected, var(--spectrum-global-color-gray-700));
|
|
}
|
|
|
|
.spectrum-Radio-label {
|
|
color: var(--spectrum-radio-m-text-color, var(--spectrum-alias-text-color));
|
|
}
|
|
|
|
.spectrum-Radio-button:before {
|
|
forced-color-adjust: none;
|
|
background-color: var(--spectrum-radio-m-circle-background-color, var(--spectrum-global-color-gray-75));
|
|
border-color: var(--spectrum-radio-m-circle-border-color, var(--spectrum-global-color-gray-600));
|
|
}
|
|
|
|
.spectrum-Radio:hover .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-circle-border-color-hover, var(--spectrum-global-color-gray-700));
|
|
box-shadow: none;
|
|
}
|
|
|
|
.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-circle-border-color-selected-hover, var(--spectrum-global-color-gray-800));
|
|
}
|
|
|
|
.spectrum-Radio:hover .spectrum-Radio-label {
|
|
color: var(--spectrum-radio-m-text-color-hover, var(--spectrum-alias-text-color-hover));
|
|
}
|
|
|
|
.spectrum-Radio:active .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-circle-border-color-down, var(--spectrum-global-color-gray-800));
|
|
}
|
|
|
|
.spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-circle-border-color-selected-down, var(--spectrum-global-color-gray-900));
|
|
}
|
|
|
|
.spectrum-Radio:active .spectrum-Radio-label {
|
|
color: var(--spectrum-radio-m-text-color-down, var(--spectrum-alias-text-color-down));
|
|
}
|
|
|
|
.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-emphasized-circle-border-color-selected, var(--spectrum-global-color-blue-500));
|
|
}
|
|
|
|
.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover, var(--spectrum-global-color-blue-600));
|
|
}
|
|
|
|
.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-emphasized-circle-border-color-selected-down, var(--spectrum-global-color-blue-700));
|
|
}
|
|
|
|
.spectrum-Radio.is-invalid:hover .spectrum-Radio-input + .spectrum-Radio-button:before, .spectrum-Radio--emphasized.is-invalid:hover .spectrum-Radio-input + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-emphasized-circle-border-color-error-hover, var(--spectrum-global-color-red-600));
|
|
}
|
|
|
|
.spectrum-Radio.is-invalid:hover .spectrum-Radio-label, .spectrum-Radio--emphasized.is-invalid:hover .spectrum-Radio-label {
|
|
color: var(--spectrum-radio-m-emphasized-text-color-error-hover, var(--spectrum-global-color-red-700));
|
|
}
|
|
|
|
.spectrum-Radio.is-invalid:active .spectrum-Radio-input + .spectrum-Radio-button:before, .spectrum-Radio--emphasized.is-invalid:active .spectrum-Radio-input + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-emphasized-text-color-error-hover, var(--spectrum-global-color-red-700));
|
|
}
|
|
|
|
.spectrum-Radio.is-invalid:active .spectrum-Radio-label, .spectrum-Radio--emphasized.is-invalid:active .spectrum-Radio-label {
|
|
color: var(--spectrum-radio-m-emphasized-text-color-error-down, var(--spectrum-global-color-red-700));
|
|
}
|
|
|
|
.spectrum-Radio.is-invalid .spectrum-Radio-button:before, .spectrum-Radio.is-invalid .spectrum-Radio-input:checked + .spectrum-Radio-button:before, .spectrum-Radio--emphasized.is-invalid .spectrum-Radio-button:before, .spectrum-Radio--emphasized.is-invalid .spectrum-Radio-input:checked + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-emphasized-circle-border-color-error, var(--spectrum-global-color-red-500));
|
|
}
|
|
|
|
.spectrum-Radio.is-invalid .spectrum-Radio-label, .spectrum-Radio--emphasized.is-invalid .spectrum-Radio-label {
|
|
color: var(--spectrum-radio-m-emphasized-text-color-error, var(--spectrum-global-color-red-600));
|
|
}
|
|
|
|
.spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-emphasized-circle-border-color-disabled, var(--spectrum-global-color-gray-400));
|
|
}
|
|
|
|
.spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label {
|
|
color: var(--spectrum-radio-m-emphasized-text-color-disabled, var(--spectrum-alias-text-color-disabled));
|
|
}
|
|
|
|
.spectrum-Radio .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:before, .spectrum-Radio:hover .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:before, .spectrum-Radio--emphasized .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:before, .spectrum-Radio--emphasized:hover .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-circle-border-color-key-focus, var(--spectrum-global-color-gray-700));
|
|
}
|
|
|
|
.spectrum-Radio .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:after, .spectrum-Radio:hover .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:after, .spectrum-Radio--emphasized .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:after, .spectrum-Radio--emphasized:hover .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:after {
|
|
forced-color-adjust: none;
|
|
box-shadow: 0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus, var(--spectrum-alias-focus-ring-size))
|
|
var(--spectrum-radio-m-focus-ring-color-key-focus, var(--spectrum-alias-focus-ring-color));
|
|
}
|
|
|
|
.spectrum-Radio .spectrum-Radio-input.focus-ring:checked + .spectrum-Radio-button:before, .spectrum-Radio:hover .spectrum-Radio-input.focus-ring:checked + .spectrum-Radio-button:before, .spectrum-Radio--emphasized .spectrum-Radio-input.focus-ring:checked + .spectrum-Radio-button:before, .spectrum-Radio--emphasized:hover .spectrum-Radio-input.focus-ring:checked + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus, var(--spectrum-global-color-blue-600));
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.spectrum-Radio {
|
|
--spectrum-radio-m-circle-background-color: ButtonFace;
|
|
--spectrum-radio-m-circle-border-color-down: Highlight;
|
|
--spectrum-radio-m-circle-border-color-hover: Highlight;
|
|
--spectrum-radio-m-circle-border-color-key-focus: Highlight;
|
|
--spectrum-radio-m-circle-border-color-selected-down: Highlight;
|
|
--spectrum-radio-m-circle-border-color-selected-hover : Highlight;
|
|
--spectrum-radio-m-circle-border-color-selected: Highlight;
|
|
--spectrum-radio-m-circle-border-color: ButtonText;
|
|
--spectrum-radio-m-emphasized-circle-border-color-disabled : GrayText;
|
|
--spectrum-radio-m-emphasized-circle-border-color-error-hover: Highlight;
|
|
--spectrum-radio-m-emphasized-circle-border-color-error: ButtonText;
|
|
--spectrum-radio-m-emphasized-circle-border-color-selected-down: Highlight;
|
|
--spectrum-radio-m-emphasized-circle-border-color-selected-hover: Highlight;
|
|
--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus: Highlight;
|
|
--spectrum-radio-m-emphasized-circle-border-color-selected: Highlight;
|
|
--spectrum-radio-m-emphasized-text-color-disabled: GrayText;
|
|
--spectrum-radio-m-emphasized-text-color-error-down: CanvasText;
|
|
--spectrum-radio-m-emphasized-text-color-error-hover: CanvasText;
|
|
--spectrum-radio-m-emphasized-text-color-error: CanvasText;
|
|
--spectrum-radio-m-focus-ring-color-key-focus: CanvasText;
|
|
--spectrum-radio-m-text-color-down: CanvasText;
|
|
--spectrum-radio-m-text-color-hover: CanvasText;
|
|
--spectrum-radio-m-text-color: CanvasText;
|
|
}
|
|
.spectrum-Radio.is-invalid .spectrum-Radio-input:checked + .spectrum-Radio-button:before {
|
|
border-color: var(--spectrum-radio-m-circle-border-color-selected, var(--spectrum-global-color-gray-700));
|
|
}
|
|
}
|
|
|
|
|