soneta-ui-style
This commit is contained in:
Marcin Wojas
@@ -0,0 +1,561 @@
|
||||
@import "../common/PredefinedMixins.scss";
|
||||
@import "./partial.scss";
|
||||
@import "./Variables.scss";
|
||||
|
||||
.editor-text,
|
||||
.date-text {
|
||||
@include partial-row-center-start;
|
||||
@include flexAlignItems(center, center);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
|
||||
&:focus-within .content {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
.content {
|
||||
@include partial-row-center-start;
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
border: $theme_editor_common_border;
|
||||
background-color: $input_bg;
|
||||
border-radius: 8px;
|
||||
|
||||
input {
|
||||
background-color: $input_text_editor_bg;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
color: $input_text_editor_fg;
|
||||
font-family: $defaultFont;
|
||||
font-size: $font_size_input;
|
||||
font-weight: 500;
|
||||
line-height: $font_size_input;
|
||||
outline: none;
|
||||
padding: 0 2px 0 4px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-radius: 8px;
|
||||
|
||||
::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $input_disabled_fg;
|
||||
background-color: $input_disabled_bg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $input_focused_fg;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.clearable {
|
||||
@include partial-clearable-text;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
height: $input_height;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
@include focus();
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
path {
|
||||
fill: $input_icon_fg;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
svg {
|
||||
path {
|
||||
fill: $input_icon_fg_disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: $input_disabled_bg;
|
||||
border: $input_border_disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
top: unset;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
|
||||
.content {
|
||||
@include flexDisplay();
|
||||
@include flexWrap(nowrap);
|
||||
@include flexDirection(row);
|
||||
@include flexJustifyContent(center, center);
|
||||
@include flexAlignItems(center, center);
|
||||
@include flexAlignContent(stretch, stretch);
|
||||
|
||||
right: 0;
|
||||
height: calc(100% - 8px);
|
||||
width: calc(100% - 4px);
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
background-color: unset;
|
||||
font-family: $tertiaryFont;
|
||||
font-size: $font_size_vertical_input;
|
||||
height: inherit;
|
||||
line-height: $font_size_vertical_line_height;
|
||||
padding: 0 4px 0 14px;
|
||||
|
||||
&:disabled {
|
||||
color: $input_disabled_fg;
|
||||
background-color: $input_disabled_bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: $input_disabled_bg;
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
border: $input_vertical_border;
|
||||
border-radius: 12px;
|
||||
|
||||
&.active {
|
||||
border: $input_vertical_focused_border;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: $input_disabled_bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.locator {
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
width: 100%;
|
||||
border-color: $grid_loc_command_border_color;
|
||||
|
||||
input {
|
||||
padding-left: 16px !important;
|
||||
font-family: $tertiaryFont;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $grid_loc_input_placeholder_fg;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: $grid_loc_input_placeholder_fg;
|
||||
}
|
||||
|
||||
&:-moz-placeholder {
|
||||
color: $grid_loc_input_placeholder_fg;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: $grid_loc_input_placeholder_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.premium {
|
||||
&:not(.vertical),
|
||||
&.vertical {
|
||||
.content {
|
||||
border-left: none;
|
||||
border-color: $grid_loc_command_border_color;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.lookup {
|
||||
.icon {
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
|
||||
path {
|
||||
fill: $lookup_editor_icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.multiline-label {
|
||||
.content {
|
||||
bottom: 0;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&.empty-bg {
|
||||
.content {
|
||||
background: $cp_empty_bg;
|
||||
|
||||
.icon {
|
||||
svg path {
|
||||
fill: $cp_empty_icon !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
&:not(.grid) {
|
||||
&:not(.premium) {
|
||||
background-color: $input_focused_bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.vertical) {
|
||||
.content {
|
||||
@include partial-editor-shadow;
|
||||
border: none;
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: $input_autofill_focused_shadow !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-border {
|
||||
border: $input_vertical_focused_border;
|
||||
}
|
||||
|
||||
.content {
|
||||
.icon {
|
||||
color: $input_focused_fg;
|
||||
background-color: transparent;
|
||||
|
||||
svg path {
|
||||
fill: $input_focused_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-picker {
|
||||
.content {
|
||||
input {
|
||||
background-color: inherit;
|
||||
&:disabled {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-picker {
|
||||
.content {
|
||||
input {
|
||||
background-color: inherit;
|
||||
&:disabled {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-picker-d {
|
||||
.content {
|
||||
.icon {
|
||||
svg {
|
||||
path {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.grid:not(.color-picker) {
|
||||
.content {
|
||||
border: none;
|
||||
|
||||
input {
|
||||
padding: 0 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.content {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dashboard {
|
||||
.content {
|
||||
top: unset;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
.content {
|
||||
box-shadow: $input_warning_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
.content {
|
||||
box-shadow: $input_error_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-textRight {
|
||||
.content {
|
||||
input {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.editor-date {
|
||||
&.input-textRight {
|
||||
.content {
|
||||
input {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipHolder {
|
||||
color: $input_tooltip_fg;
|
||||
line-height: 26px;
|
||||
font-size: $font_size_label;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
input:valid {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.premium {
|
||||
&:not(.vertical) {
|
||||
.content {
|
||||
box-shadow: $input_shadow;
|
||||
border: $input_border;
|
||||
border-radius: 4px;
|
||||
|
||||
&.disabled {
|
||||
border: $input_border_disabled;
|
||||
}
|
||||
|
||||
input {
|
||||
&:disabled {
|
||||
text-shadow: $input_disabled_text_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 22px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.con-adv input {
|
||||
padding: 0 2px 0 10px;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.content {
|
||||
@include partial-editor-shadow-premium;
|
||||
box-shadow: none;
|
||||
border: $input_focused_border;
|
||||
background-color: $input_focused_bg;
|
||||
|
||||
.icon svg path {
|
||||
fill: $input_icon_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.grid.focused {
|
||||
background-color: $grid_eip_bg;
|
||||
|
||||
.content {
|
||||
background-color: $grid_eip_content_bg;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cp-editor {
|
||||
@include partial-row-center-start;
|
||||
height: 26px;
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
height: inherit;
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
||||
input {
|
||||
width: 65px;
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
border: none;
|
||||
outline: none;
|
||||
line-height: 20px;
|
||||
font-size: 9pt;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
position: relative;
|
||||
height: inherit;
|
||||
width: calc(100% - 40px);
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
width: inherit;
|
||||
height: calc(100% - 2px);
|
||||
border: none;
|
||||
outline: none;
|
||||
line-height: inherit;
|
||||
font-size: 12pt;
|
||||
background-color: transparent;
|
||||
color: $signIn_text_fg;
|
||||
|
||||
&.clearable {
|
||||
@include partial-clearable-text;
|
||||
}
|
||||
|
||||
&.clearable-dark {
|
||||
@include partial-clearable-text;
|
||||
$color: "rgb(163, 163, 163, 1)";
|
||||
$style: "style='fill: #{$color};'";
|
||||
$path: "<path d='M 6.8496094,0 A 6.8518967,6.8518967 0 0 0 2.0761719,11.765625 L 70.310547,80 2.0761719,148.23438 a 6.8518967,6.8518967 0 1 0 9.6894531,9.68945 L 80,89.689453 148.23438,157.92383 a 6.8518967,6.8518967 0 1 0 9.68945,-9.68945 L 89.689453,80 157.92383,11.765625 A 6.8518967,6.8518967 0 1 0 148.23438,2.0761719 L 80,70.310547 11.765625,2.0761719 A 6.8518967,6.8518967 0 0 0 6.8496094,0 Z' #{$style} />";
|
||||
$data-url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'>#{$path}</svg>";
|
||||
background-image: url($data-url);
|
||||
}
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: $signIn_text_shadow;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include partial-column-center;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
path {
|
||||
fill: $signIn_field_icon_fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
.content {
|
||||
padding-left: 20px;
|
||||
margin-top: 3px;
|
||||
input {
|
||||
font-size: 18px;
|
||||
&.clearable {
|
||||
padding: 0 18px 0 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.content {
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: $signIn_field_focused_shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-readonly {
|
||||
.content {
|
||||
background-color: $input_disabled_bg;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user