144 lines
2.5 KiB
SCSS
144 lines
2.5 KiB
SCSS
@import "../common/PredefinedMixins.scss";
|
|
@import "./partial.scss";
|
|
@import "./Variables.scss";
|
|
|
|
.label {
|
|
@include partial-label;
|
|
@include flexDisplay();
|
|
@include flexWrap(nowrap);
|
|
@include flexDirection(column);
|
|
@include flexJustifyContent(center, center);
|
|
@include flexAlignItems(flex-start, start);
|
|
@include flexAlignContent(stretch, stretch);
|
|
|
|
&.multiline {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
&:not(.multiline) {
|
|
span {
|
|
@include partial-ellipsis;
|
|
}
|
|
}
|
|
|
|
span {
|
|
@include flexDisplay();
|
|
@include flexDirection(column);
|
|
@include flexJustifyContent(center, center);
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tooltip-icon {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(50% - 9px);
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
width: 10px;
|
|
height: 10px;
|
|
|
|
path {
|
|
fill: $tooltip_icon;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.v-label {
|
|
position: relative;
|
|
z-index: 3;
|
|
padding: 0 5px;
|
|
border-radius: 12px;
|
|
max-width: calc(100% - 16px);
|
|
background-color: $input_text_editor_bg;
|
|
font-size: $font_size_vertical_label;
|
|
line-height: $font_size_vertical_label_height;
|
|
|
|
&.has-tooltip-icon {
|
|
padding-right: 19px;
|
|
.tooltip-icon {
|
|
right: 0;
|
|
top: calc(50% - 11px);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Special Class
|
|
&.bold {
|
|
font-weight: 600;
|
|
}
|
|
|
|
&.center {
|
|
@include flexJustifyContent(center, center);
|
|
}
|
|
|
|
&.center + .icon {
|
|
top: unset;
|
|
bottom: 0;
|
|
height: 26px;
|
|
}
|
|
|
|
&.right-label {
|
|
@include flexJustifyContent(flex-end, end);
|
|
position: relative !important;
|
|
width: unset !important;
|
|
|
|
&.multiline {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
&:not(.v-label) {
|
|
&.multiline {
|
|
text-overflow: unset;
|
|
white-space: normal;
|
|
line-height: 15px;
|
|
}
|
|
}
|
|
|
|
&.warninglabel {
|
|
color: $field_warning_label_fg !important;
|
|
}
|
|
|
|
&.radio.v-label,
|
|
&.checkbox.v-label {
|
|
@include partial-ellipsis;
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: 300;
|
|
max-width: calc(100% - 32px);
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
&.radio.v-label,
|
|
&.checkbox.v-label,
|
|
&.richedit.v-label,
|
|
&.memotext.v-label {
|
|
background-color: transparent;
|
|
|
|
&.disabled {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
&:focus-visible {
|
|
@include focus();
|
|
}
|
|
}
|
|
|
|
// ColorPicker
|
|
.cp-label {
|
|
position: relative !important;
|
|
width: 75px;
|
|
color: $cp_box_fg;
|
|
}
|
|
|
|
.clickable:not(.disabled) {
|
|
cursor: pointer;
|
|
}
|