soneta-ui-style
This commit is contained in:
@@ -0,0 +1,143 @@
|
||||
@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;
|
||||
}
|
||||
Reference in New Issue
Block a user