Clego/clego-app
Archived
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: rename style to styles

Browse Source
This commit is contained in:
theo
2024-04-26 23:46:53 +02:00
parent d8fb60f23c
commit 50688c6fbe
78 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
styles/bulma/sass/form/_index.scss Normal file
View File

@ -0,0 +1,9 @@
/* Bulma Form */
@charset "utf-8";
@forward "shared";
@forward "input-textarea";
@forward "checkbox-radio";
@forward "select";
@forward "file";
@forward "tools";

32
styles/bulma/sass/form/checkbox-radio.scss Normal file
View File

@ -0,0 +1,32 @@
@use "shared";
@use "../utilities/initial-variables" as iv;
%checkbox-radio {
cursor: pointer;
display: inline-block;
line-height: 1.25;
position: relative;
input {
cursor: pointer;
}
&[disabled],
fieldset[disabled] &,
input[disabled] {
color: shared.$input-disabled-color;
cursor: not-allowed;
}
}
.#{iv.$class-prefix}checkbox {
@extend %checkbox-radio;
}
.#{iv.$class-prefix}radio {
@extend %checkbox-radio;
& + .#{iv.$class-prefix}radio {
margin-inline-start: 0.5em;
}
}

330
styles/bulma/sass/form/file.scss Normal file
View File

@ -0,0 +1,330 @@
@use "shared";
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/controls";
@use "../utilities/extends";
$file-radius: cv.getVar("radius") !default;
$file-h: cv.getVar("scheme-h");
$file-s: cv.getVar("scheme-s");
$file-background-l: cv.getVar("scheme-main-ter-l");
$file-background-l-delta: 0%;
$file-hover-background-l-delta: -5%;
$file-active-background-l-delta: -10%;
$file-border-l: cv.getVar("border-l");
$file-border-l-delta: 0%;
$file-hover-border-l-delta: -10%;
$file-active-border-l-delta: -20%;
$file-cta-color-l: cv.getVar("text-strong-l");
$file-name-color-l: cv.getVar("text-strong-l");
$file-color-l-delta: 0%;
$file-hover-color-l-delta: -5%;
$file-active-color-l-delta: -10%;
$file-cta-color: cv.getVar("text") !default;
$file-cta-hover-color: cv.getVar("text-strong") !default;
$file-cta-active-color: cv.getVar("text-strong") !default;
$file-name-border-color: cv.getVar("border") !default;
$file-name-border-style: solid !default;
$file-name-border-width: 1px 1px 1px 0 !default;
$file-name-max-width: 16em !default;
$file-colors: shared.$form-colors !default;
.#{iv.$class-prefix}file {
@extend %block;
@extend %unselectable;
@include cv.register-vars(
(
"file-radius": #{$file-radius},
"file-name-border-color": #{$file-name-border-color},
"file-name-border-style": #{$file-name-border-style},
"file-name-border-width": #{$file-name-border-width},
"file-name-max-width": #{$file-name-max-width},
"file-h": #{$file-h},
"file-s": #{$file-s},
"file-background-l": #{$file-background-l},
"file-background-l-delta": #{$file-background-l-delta},
"file-hover-background-l-delta": #{$file-hover-background-l-delta},
"file-active-background-l-delta": #{$file-active-background-l-delta},
"file-border-l": #{$file-border-l},
"file-border-l-delta": #{$file-border-l-delta},
"file-hover-border-l-delta": #{$file-hover-border-l-delta},
"file-active-border-l-delta": #{$file-active-border-l-delta},
"file-cta-color-l": #{$file-cta-color-l},
"file-name-color-l": #{$file-name-color-l},
"file-color-l-delta": #{$file-color-l-delta},
"file-hover-color-l-delta": #{$file-hover-color-l-delta},
"file-active-color-l-delta": #{$file-active-color-l-delta},
)
);
align-items: stretch;
display: flex;
justify-content: flex-start;
position: relative;
// Colors
@each $name, $pair in $file-colors {
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"file-h": #{cv.getVar($name, "", "-h")},
"file-s": #{cv.getVar($name, "", "-s")},
"file-background-l": #{cv.getVar($name, "", "-l")},
"file-border-l": #{cv.getVar($name, "", "-l")},
"file-cta-color-l": #{cv.getVar($name, "", "-invert-l")},
"file-name-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
)
);
}
}
// Sizes
&.#{iv.$class-prefix}is-small {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-normal {
font-size: cv.getVar("size-normal");
}
&.#{iv.$class-prefix}is-medium {
font-size: cv.getVar("size-medium");
.#{iv.$class-prefix}file-icon {
.#{iv.$class-prefix}fa {
font-size: 1.5rem;
}
}
}
&.#{iv.$class-prefix}is-large {
font-size: cv.getVar("size-large");
.#{iv.$class-prefix}file-icon {
.#{iv.$class-prefix}fa {
font-size: 2rem;
}
}
}
// Modifiers
&.#{iv.$class-prefix}has-name {
.#{iv.$class-prefix}file-cta {
border-end-end-radius: 0;
border-start-end-radius: 0;
}
.#{iv.$class-prefix}file-name {
border-end-start-radius: 0;
border-start-start-radius: 0;
}
&.#{iv.$class-prefix}is-empty {
.#{iv.$class-prefix}file-cta {
border-radius: cv.getVar("file-radius");
}
.#{iv.$class-prefix}file-name {
display: none;
}
}
}
&.#{iv.$class-prefix}is-boxed {
.#{iv.$class-prefix}file-label {
flex-direction: column;
}
.#{iv.$class-prefix}file-cta {
flex-direction: column;
height: auto;
padding: 1em 3em;
}
.#{iv.$class-prefix}file-name {
border-width: 0 1px 1px;
}
.#{iv.$class-prefix}file-icon {
height: 1.5em;
width: 1.5em;
.#{iv.$class-prefix}fa {
font-size: 1.5rem;
}
}
&.#{iv.$class-prefix}is-small {
.#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
font-size: 1rem;
}
}
&.#{iv.$class-prefix}is-medium {
.#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
font-size: 2rem;
}
}
&.#{iv.$class-prefix}is-large {
.#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
font-size: 2.5rem;
}
}
&.#{iv.$class-prefix}has-name {
.#{iv.$class-prefix}file-cta {
border-end-end-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: cv.getVar("file-radius");
border-start-start-radius: cv.getVar("file-radius");
}
.#{iv.$class-prefix}file-name {
border-end-end-radius: cv.getVar("file-radius");
border-end-start-radius: cv.getVar("file-radius");
border-start-end-radius: 0;
border-start-start-radius: 0;
border-width: 0 1px 1px;
}
}
}
&.#{iv.$class-prefix}is-centered {
justify-content: center;
}
&.#{iv.$class-prefix}is-fullwidth {
.#{iv.$class-prefix}file-label {
width: 100%;
}
.#{iv.$class-prefix}file-name {
flex-grow: 1;
max-width: none;
}
}
&.#{iv.$class-prefix}is-right {
justify-content: flex-end;
.#{iv.$class-prefix}file-cta {
border-radius: 0 cv.getVar("file-radius") cv.getVar("file-radius") 0;
}
.#{iv.$class-prefix}file-name {
border-radius: cv.getVar("file-radius") 0 0 cv.getVar("file-radius");
border-width: 1px 0 1px 1px;
order: -1;
}
}
}
.#{iv.$class-prefix}file-label {
align-items: stretch;
display: flex;
cursor: pointer;
justify-content: flex-start;
overflow: hidden;
position: relative;
&:hover {
@include cv.register-vars(
(
"file-background-l-delta": #{cv.getVar("file-hover-background-l-delta")},
"file-border-l-delta": #{cv.getVar("file-hover-border-l-delta")},
"file-color-l-delta": #{cv.getVar("file-hover-color-l-delta")},
)
);
}
&:active {
@include cv.register-vars(
(
"file-background-l-delta": #{cv.getVar("file-active-background-l-delta")},
"file-border-l-delta": #{cv.getVar("file-active-border-l-delta")},
"file-color-l-delta": #{cv.getVar("file-active-color-l-delta")},
)
);
}
}
.#{iv.$class-prefix}file-input {
height: 100%;
left: 0;
opacity: 0;
outline: none;
position: absolute;
top: 0;
width: 100%;
}
.#{iv.$class-prefix}file-cta,
.#{iv.$class-prefix}file-name {
@extend %control;
border-color: hsl(
cv.getVar("file-h"),
cv.getVar("file-s"),
calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-border-l-delta")})
);
border-radius: cv.getVar("file-radius");
font-size: 1em;
padding-left: 1em;
padding-right: 1em;
white-space: nowrap;
}
.#{iv.$class-prefix}file-cta {
background-color: hsl(
cv.getVar("file-h"),
cv.getVar("file-s"),
calc(
#{cv.getVar("file-background-l")} + #{cv.getVar(
"file-background-l-delta"
)}
)
);
color: hsl(
cv.getVar("file-h"),
cv.getVar("file-s"),
calc(#{cv.getVar("file-cta-color-l")} + #{cv.getVar("file-color-l-delta")})
);
}
.#{iv.$class-prefix}file-name {
border-color: hsl(
cv.getVar("file-h"),
cv.getVar("file-s"),
calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-color-l-delta")})
);
border-style: cv.getVar("file-name-border-style");
border-width: cv.getVar("file-name-border-width");
color: hsl(
cv.getVar("file-h"),
cv.getVar("file-s"),
calc(#{cv.getVar("file-name-color-l")} + #{cv.getVar("file-color-l-delta")})
);
display: block;
max-width: cv.getVar("file-name-max-width");
overflow: hidden;
text-align: inherit;
text-overflow: ellipsis;
}
.#{iv.$class-prefix}file-icon {
align-items: center;
display: flex;
height: 1em;
justify-content: center;
margin-inline-end: 0.5em;
width: 1em;
.#{iv.$class-prefix}fa {
font-size: 1rem;
}
}

123
styles/bulma/sass/form/input-textarea.scss Normal file
View File

@ -0,0 +1,123 @@
@use "shared";
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/controls";
$textarea-padding: cv.getVar("control-padding-horizontal") !default;
$textarea-max-height: 40em !default;
$textarea-min-height: 8em !default;
$textarea-colors: shared.$form-colors !default;
%input-textarea {
@extend %input;
@include cv.register-vars(
(
"input-h": #{cv.getVar("scheme-h")},
"input-s": #{cv.getVar("scheme-s")},
"input-border-style": solid,
"input-border-width": 1px,
"input-border-l": #{cv.getVar("border-l")},
)
);
box-shadow: shared.$input-shadow;
max-width: 100%;
width: 100%;
&[readonly] {
box-shadow: none;
}
// Colors
@each $name, $pair in $textarea-colors {
$color: nth($pair, 1);
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"input-h": #{cv.getVar($name, "", "-h")},
"input-s": #{cv.getVar($name, "", "-s")},
"input-l": #{cv.getVar($name, "", "-l")},
"input-focus-h": #{cv.getVar($name, "", "-h")},
"input-focus-s": #{cv.getVar($name, "", "-s")},
"input-focus-l": #{cv.getVar($name, "", "-l")},
"input-border-l": #{cv.getVar($name, "", "-l")},
)
);
}
}
// Sizes
&.#{iv.$class-prefix}is-small {
@include controls.control-small;
}
&.#{iv.$class-prefix}is-medium {
@include controls.control-medium;
}
&.#{iv.$class-prefix}is-large {
@include controls.control-large;
}
// Modifiers
&.#{iv.$class-prefix}is-fullwidth {
display: block;
width: 100%;
}
&.#{iv.$class-prefix}is-inline {
display: inline;
width: auto;
}
}
.#{iv.$class-prefix}input {
@extend %input-textarea;
&.#{iv.$class-prefix}is-rounded {
border-radius: cv.getVar("radius-rounded");
padding-left: calc(#{controls.$control-padding-horizontal} + 0.375em);
padding-right: calc(#{controls.$control-padding-horizontal} + 0.375em);
}
&.#{iv.$class-prefix}is-static {
background-color: transparent;
border-color: transparent;
box-shadow: none;
padding-left: 0;
padding-right: 0;
}
}
.#{iv.$class-prefix}textarea {
@extend %input-textarea;
@include cv.register-vars(
(
"textarea-padding": #{$textarea-padding},
"textarea-max-height": #{$textarea-max-height},
"textarea-min-height": #{$textarea-min-height},
)
);
display: block;
max-width: 100%;
min-width: 100%;
padding: cv.getVar("textarea-padding");
resize: vertical;
&:not([rows]) {
max-height: cv.getVar("textarea-max-height");
min-height: cv.getVar("textarea-min-height");
}
&[rows] {
height: initial;
}
// Modifiers
&.#{iv.$class-prefix}has-fixed-size {
resize: none;
}
}

143
styles/bulma/sass/form/select.scss Normal file
View File

@ -0,0 +1,143 @@
@use "shared";
@use "../utilities/controls";
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/extends";
$select-colors: shared.$form-colors !default;
.#{iv.$class-prefix}select {
@include cv.register-vars(
(
"input-h": #{cv.getVar("scheme-h")},
"input-s": #{cv.getVar("scheme-s")},
"input-border-style": solid,
"input-border-width": 1px,
"input-border-l": #{cv.getVar("border-l")},
)
);
display: inline-block;
max-width: 100%;
position: relative;
vertical-align: top;
&:not(.#{iv.$class-prefix}is-multiple) {
height: shared.$input-height;
}
&:not(.#{iv.$class-prefix}is-multiple):not(.#{iv.$class-prefix}is-loading) {
&::after {
@extend %arrow;
inset-inline-end: 1.125em;
z-index: 4;
}
}
&.#{iv.$class-prefix}is-rounded {
select {
border-radius: cv.getVar("radius-rounded");
padding-inline-start: 1em;
}
}
select {
@extend %input;
cursor: pointer;
display: block;
font-size: 1em;
max-width: 100%;
outline: none;
&::-ms-expand {
display: none;
}
&[disabled]:hover,
fieldset[disabled] &:hover {
border-color: shared.$input-disabled-border-color;
}
&:not([multiple]) {
padding-inline-end: 2.5em;
}
&[multiple] {
height: auto;
padding: 0;
option {
padding: 0.5em 1em;
}
}
}
// Colors
@each $name, $pair in $select-colors {
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"input-h": #{cv.getVar($name, "", "-h")},
"input-s": #{cv.getVar($name, "", "-s")},
"input-l": #{cv.getVar($name, "", "-l")},
"input-focus-h": #{cv.getVar($name, "", "-h")},
"input-focus-s": #{cv.getVar($name, "", "-s")},
"input-focus-l": #{cv.getVar($name, "", "-l")},
"input-border-l": #{cv.getVar($name, "", "-l")},
)
);
}
}
// Sizes
&.#{iv.$class-prefix}is-small {
@include controls.control-small;
}
&.#{iv.$class-prefix}is-medium {
@include controls.control-medium;
}
&.#{iv.$class-prefix}is-large {
@include controls.control-large;
}
// Modifiers
&.#{iv.$class-prefix}is-disabled {
&::after {
border-color: shared.$input-disabled-color !important;
opacity: 0.5;
}
}
&.#{iv.$class-prefix}is-fullwidth {
width: 100%;
select {
width: 100%;
}
}
&.#{iv.$class-prefix}is-loading {
&::after {
@extend %loader;
inset-inline-end: 0.625em;
margin-top: 0;
position: absolute;
top: 0.625em;
transform: none;
}
&.#{iv.$class-prefix}is-small:after {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-medium:after {
font-size: cv.getVar("size-medium");
}
&.#{iv.$class-prefix}is-large:after {
font-size: cv.getVar("size-large");
}
}
}

172
styles/bulma/sass/form/shared.scss Normal file
View File

@ -0,0 +1,172 @@
@use "../utilities/css-variables" as cv;
@use "../utilities/derived-variables" as dv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/extends";
@use "../utilities/mixins" as mx;
$form-colors: dv.$colors !default;
$input-h: #{cv.getVar("scheme-h")} !default;
$input-s: #{cv.getVar("scheme-s")} !default;
$input-l: #{cv.getVar("scheme-main-l")} !default;
$input-border-l: cv.getVar("border-l") !default;
$input-border-l-delta: 0% !default;
$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
$input-color-l: cv.getVar("text-strong-l") !default;
$input-background-l: cv.getVar("scheme-main-l") !default;
$input-background-l-delta: 0% !default;
$input-height: cv.getVar("control-height") !default;
$input-shadow: inset 0 0.0625em 0.125em
hsla(
#{cv.getVar("scheme-h")},
#{cv.getVar("scheme-s")},
#{cv.getVar("scheme-invert-l")},
0.05
) !default;
$input-placeholder-color: hsla(
#{cv.getVar("text-h")},
#{cv.getVar("text-s")},
#{cv.getVar("text-strong-l")},
0.3
) !default;
$input-focus-h: cv.getVar("focus-h") !default;
$input-focus-s: cv.getVar("focus-s") !default;
$input-focus-l: cv.getVar("focus-l") !default;
$input-focus-shadow-size: cv.getVar("focus-shadow-size") !default;
$input-focus-shadow-alpha: cv.getVar("focus-shadow-alpha") !default;
$input-disabled-color: cv.getVar("text-weak") !default;
$input-disabled-background-color: cv.getVar("background") !default;
$input-disabled-border-color: cv.getVar("background") !default;
$input-disabled-placeholder-color: hsla(
#{cv.getVar("text-h")},
#{cv.getVar("text-s")},
#{cv.getVar("text-weak-l")},
0.3
) !default;
$input-arrow: cv.getVar("link") !default;
$input-icon-color: cv.getVar("text-light") !default;
$input-icon-hover-color: cv.getVar("text-weak") !default;
$input-icon-focus-color: cv.getVar("link") !default;
$input-radius: cv.getVar("radius") !default;
.#{iv.$class-prefix}control,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}textarea,
.#{iv.$class-prefix}select select {
@include cv.register-vars(
(
"input-h": #{$input-h},
"input-s": #{$input-s},
"input-l": #{$input-l},
"input-border-l": #{$input-border-l},
"input-border-l-delta": #{$input-border-l-delta},
"input-hover-border-l-delta": #{$input-hover-border-l-delta},
"input-active-border-l-delta": #{$input-active-border-l-delta},
"input-focus-h": #{$input-focus-h},
"input-focus-s": #{$input-focus-s},
"input-focus-l": #{$input-focus-l},
"input-focus-shadow-size": #{$input-focus-shadow-size},
"input-focus-shadow-alpha": #{$input-focus-shadow-alpha},
"input-color-l": #{$input-color-l},
"input-background-l": #{$input-background-l},
"input-background-l-delta": #{$input-background-l-delta},
"input-height": #{$input-height},
"input-shadow": #{$input-shadow},
"input-placeholder-color": #{$input-placeholder-color},
"input-disabled-color": #{$input-disabled-color},
"input-disabled-background-color": #{$input-disabled-background-color},
"input-disabled-border-color": #{$input-disabled-border-color},
"input-disabled-placeholder-color": #{$input-disabled-placeholder-color},
"input-arrow": #{$input-arrow},
"input-icon-color": #{$input-icon-color},
"input-icon-hover-color": #{$input-icon-hover-color},
"input-icon-focus-color": #{$input-icon-focus-color},
"input-radius": #{$input-radius},
)
);
}
@mixin input {
@extend %control;
background-color: hsl(
#{cv.getVar("input-h")},
#{cv.getVar("input-s")},
calc(
#{cv.getVar("input-background-l")} + #{cv.getVar(
"input-background-l-delta"
)}
)
);
border-color: hsl(
cv.getVar("input-h"),
cv.getVar("input-s"),
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
);
border-radius: cv.getVar("input-radius");
color: hsl(
#{cv.getVar("input-h")},
#{cv.getVar("input-s")},
#{cv.getVar("input-color-l")}
);
@include mx.placeholder {
color: cv.getVar("input-placeholder-color");
}
&:hover,
&.#{iv.$class-prefix}is-hovered {
@include cv.register-vars(
(
"input-border-l-delta": #{cv.getVar("input-hover-border-l-delta")},
)
);
}
&:active,
&.#{iv.$class-prefix}is-active {
@include cv.register-vars(
(
"input-border-l-delta": #{cv.getVar("input-active-border-l-delta")},
)
);
}
&:focus,
&:focus-within,
&.#{iv.$class-prefix}is-focused {
border-color: hsl(
cv.getVar("input-focus-h"),
cv.getVar("input-focus-s"),
cv.getVar("input-focus-l")
);
box-shadow: cv.getVar("input-focus-shadow-size")
hsla(
cv.getVar("input-focus-h"),
cv.getVar("input-focus-s"),
cv.getVar("input-focus-l"),
cv.getVar("input-focus-shadow-alpha")
);
}
&[disabled],
fieldset[disabled] & {
background-color: cv.getVar("input-disabled-background-color");
border-color: cv.getVar("input-disabled-border-color");
box-shadow: none;
color: cv.getVar("input-disabled-color");
@include mx.placeholder {
color: cv.getVar("input-disabled-placeholder-color");
}
}
}
%input {
@include input;
}

341
styles/bulma/sass/form/tools.scss Normal file
View File

@ -0,0 +1,341 @@
@use "shared";
@use "../utilities/controls";
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/extends";
@use "../utilities/mixins" as mx;
$label-color: cv.getVar("text-strong") !default;
$label-weight: cv.getVar("weight-semibold") !default;
$help-size: cv.getVar("size-small") !default;
$label-colors: shared.$form-colors !default;
.#{iv.$class-prefix}label {
color: $label-color;
display: block;
font-size: cv.getVar("size-normal");
font-weight: $label-weight;
&:not(:last-child) {
margin-bottom: 0.5em;
}
// Sizes
&.#{iv.$class-prefix}is-small {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-medium {
font-size: cv.getVar("size-medium");
}
&.#{iv.$class-prefix}is-large {
font-size: cv.getVar("size-large");
}
}
.#{iv.$class-prefix}help {
display: block;
font-size: $help-size;
margin-top: 0.25rem;
@each $name, $pair in $label-colors {
&.#{iv.$class-prefix}is-#{$name} {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-on-scheme-l")}
);
}
}
}
// Containers
.#{iv.$class-prefix}field {
@include cv.register-vars(
(
"block-spacing": 0.75rem,
)
);
@extend %block;
// Modifiers
&.#{iv.$class-prefix}has-addons {
display: flex;
justify-content: flex-start;
.#{iv.$class-prefix}control {
&:not(:last-child) {
margin-inline-end: -1px;
}
&:not(:first-child):not(:last-child) {
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
border-radius: 0;
}
}
&:first-child:not(:only-child) {
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
// @include ltr {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
// }
}
}
&:last-child:not(:only-child) {
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
// @include ltr {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
// }
}
}
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
&:not([disabled]) {
&:hover,
&.#{iv.$class-prefix}is-hovered {
z-index: 2;
}
&:focus,
&.#{iv.$class-prefix}is-focused,
&:active,
&.#{iv.$class-prefix}is-active {
z-index: 3;
&:hover {
z-index: 4;
}
}
}
}
&.#{iv.$class-prefix}is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
}
&.#{iv.$class-prefix}has-addons-centered {
justify-content: center;
}
&.#{iv.$class-prefix}has-addons-right {
justify-content: flex-end;
}
&.#{iv.$class-prefix}has-addons-fullwidth {
.#{iv.$class-prefix}control {
flex-grow: 1;
flex-shrink: 0;
}
}
}
&.#{iv.$class-prefix}is-grouped {
display: flex;
gap: 0.75rem;
justify-content: flex-start;
& > .#{iv.$class-prefix}control {
flex-shrink: 0;
&.#{iv.$class-prefix}is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
}
&.#{iv.$class-prefix}is-grouped-centered {
justify-content: center;
}
&.#{iv.$class-prefix}is-grouped-right {
justify-content: flex-end;
}
&.#{iv.$class-prefix}is-grouped-multiline {
flex-wrap: wrap;
}
}
&.#{iv.$class-prefix}is-horizontal {
@include mx.tablet {
display: flex;
}
}
}
.#{iv.$class-prefix}field-label {
.#{iv.$class-prefix}label {
font-size: inherit;
}
@include mx.mobile {
margin-bottom: 0.5rem;
}
@include mx.tablet {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
margin-inline-end: 1.5rem;
text-align: right;
&.#{iv.$class-prefix}is-small {
font-size: cv.getVar("size-small");
padding-top: 0.375em;
}
&.#{iv.$class-prefix}is-normal {
padding-top: 0.375em;
}
&.#{iv.$class-prefix}is-medium {
font-size: cv.getVar("size-medium");
padding-top: 0.375em;
}
&.#{iv.$class-prefix}is-large {
font-size: cv.getVar("size-large");
padding-top: 0.375em;
}
}
}
.#{iv.$class-prefix}field-body {
.#{iv.$class-prefix}field .#{iv.$class-prefix}field {
margin-bottom: 0;
}
@include mx.tablet {
display: flex;
flex-basis: 0;
flex-grow: 5;
flex-shrink: 1;
.#{iv.$class-prefix}field {
margin-bottom: 0;
}
& > .#{iv.$class-prefix}field {
flex-shrink: 1;
&:not(.#{iv.$class-prefix}is-narrow) {
flex-grow: 1;
}
&:not(:last-child) {
margin-inline-end: 0.75rem;
}
}
}
}
.#{iv.$class-prefix}control {
box-sizing: border-box;
clear: both;
font-size: cv.getVar("size-normal");
position: relative;
text-align: inherit;
// Modifiers
&.#{iv.$class-prefix}has-icons-left,
&.#{iv.$class-prefix}has-icons-right {
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select {
&:hover {
& ~ .#{iv.$class-prefix}icon {
color: cv.getVar("input-icon-hover-color");
}
}
&:focus {
& ~ .#{iv.$class-prefix}icon {
color: cv.getVar("input-icon-focus-color");
}
}
&.#{iv.$class-prefix}is-small ~ .#{iv.$class-prefix}icon {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-medium ~ .#{iv.$class-prefix}icon {
font-size: cv.getVar("size-medium");
}
&.#{iv.$class-prefix}is-large ~ .#{iv.$class-prefix}icon {
font-size: cv.getVar("size-large");
}
}
.#{iv.$class-prefix}icon {
color: cv.getVar("input-icon-color");
height: cv.getVar("input-height");
pointer-events: none;
position: absolute;
top: 0;
width: cv.getVar("input-height");
z-index: 4;
}
}
&.#{iv.$class-prefix}has-icons-left {
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
padding-left: cv.getVar("input-height");
}
.#{iv.$class-prefix}icon.#{iv.$class-prefix}is-left {
left: 0;
}
}
&.#{iv.$class-prefix}has-icons-right {
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
padding-right: cv.getVar("input-height");
}
.#{iv.$class-prefix}icon.#{iv.$class-prefix}is-right {
right: 0;
}
}
&.#{iv.$class-prefix}is-loading {
&::after {
@extend %loader;
inset-inline-end: 0.75em;
position: absolute !important;
top: 0.75em;
z-index: 4;
}
&.#{iv.$class-prefix}is-small:after {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-medium:after {
font-size: cv.getVar("size-medium");
}
&.#{iv.$class-prefix}is-large:after {
font-size: cv.getVar("size-large");
}
}
}