salix/front/core/components/field/style.scss

356 lines
10 KiB
SCSS
Raw Normal View History

@import "variables";
.vn-field {
display: inline-block;
2019-11-10 10:08:44 +00:00
box-sizing: border-box;
width: 100%;
& > .container {
display: flex;
align-items: stretch;
position: relative;
2020-04-01 14:05:43 +00:00
outline: none;
& > .infix {
position: relative;
display: flex;
flex: auto;
width: 100%;
min-width: 0;
& > label {
position: absolute;
left: 0;
top: 18px;
line-height: 20px;
pointer-events: none;
2019-11-10 10:08:44 +00:00
color: $color-font-bg-marginal;
transition-property: top, color, font-size;
transition-duration: 400ms;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
& > .required {
display: none;
}
}
& > .fix {
padding-top: 24px;
line-height: 24px;
font-size: 1rem;
opacity: 0;
transition: opacity 200ms ease-in-out;
&.prefix {
padding-right: 5px;
}
&.suffix {
padding-left: 5px;
}
}
& > .control {
height: 100%;
flex: auto;
2019-10-09 22:47:29 +00:00
& > * {
padding-top: 24px;
padding-bottom: 8px;
height: inherit;
outline: none;
border: none;
font-family: Arial, sans-serif;
display: block;
font-size: 1rem;
2019-10-09 22:47:29 +00:00
width: 100%;
background: 0;
color: inherit;
box-sizing: border-box;
min-height: 56px;
2019-10-15 14:19:35 +00:00
}
& > input {
position: relative;
2019-11-10 10:08:44 +00:00
color: $color-font;
2019-10-15 14:19:35 +00:00
2019-11-12 08:24:08 +00:00
&::placeholder {
color: $color-font-bg;
}
2019-10-09 22:47:29 +00:00
&[type=time],
2019-10-15 14:19:35 +00:00
&[type=date],
&[type=password] {
2019-10-09 22:47:29 +00:00
opacity: 0;
transition: opacity 200ms ease-in-out;
2019-10-15 14:19:35 +00:00
cursor: pointer;
}
&[type=time],
&[type=date] {
clip-path: inset(0 20px 0 0);
&::-webkit-inner-spin-button,
&::-webkit-clear-button {
display: none;
-webkit-appearance: none;
}
&::-webkit-calendar-picker-indicator {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
cursor: pointer;
}
2019-10-09 22:47:29 +00:00
}
&[type=number] {
-moz-appearance: textfield;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
&:invalid {
box-shadow: none;
}
2019-10-15 14:19:35 +00:00
&:-internal-autofill-selected {
&,
&:hover,
&:focus,
&:active,
&:valid {
box-shadow: 0 0 0 40px $color-bg-panel inset;
2021-11-19 09:18:54 +00:00
-webkit-text-fill-color: $color-primary-medium
2019-10-15 14:19:35 +00:00
}
}
}
}
}
& > .prepend,
& > .append,
& > .icons {
display: flex;
align-items: center;
2019-11-10 10:08:44 +00:00
color: $color-font-bg-marginal;
}
& > .prepend > prepend,
& > .append > append,
& > .icons {
display: flex;
2019-11-10 10:08:44 +00:00
align-items: center;
& > vn-icon {
2020-04-02 13:11:42 +00:00
font-size: 1.5rem;
}
}
& > .prepend > prepend {
padding-right: 12px;
}
2019-10-09 22:47:29 +00:00
& > .icons {
&.pre {
padding-left: 12px;
}
& > vn-icon {
cursor: pointer;
}
& > vn-icon[icon=clear] {
display: none;
}
}
& > .underline {
position: absolute;
bottom: 0;
content: ' ';
pointer-events: none;
width: 100%;
&.blur {
border-bottom: 1px solid $color-input-underline;
transition: border-color 200ms ease-in-out;
}
&.focus {
height: 2px;
2019-11-10 10:08:44 +00:00
background-color: $color-primary;
left: 50%;
width: 0;
transition-property: width, left, background-color;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
}
}
2019-10-09 22:47:29 +00:00
&.dense {
& > .hint {
display: none;
}
& > .container > .infix {
& > label {
top: 8px;
}
& > .control > * {
padding-top: 8px;
min-height: 40px;
}
}
&.not-empty,
&.focused,
&.invalid {
& > .container > .infix > label {
top: 0;
line-height: 8px;
}
2019-10-09 22:47:29 +00:00
}
}
2019-11-10 10:08:44 +00:00
&.standout {
2020-04-02 12:20:57 +00:00
border-radius: 1px;
2021-11-19 09:18:54 +00:00
background-color: rgba(161, 161, 161, 0.1);
2019-11-10 10:08:44 +00:00
padding: 0 12px;
transition-property: background-color, color;
transition-duration: 200ms;
transition-timing-function: ease-in-out;
& > .container {
& > .underline {
display: none;
}
2021-11-19 09:18:54 +00:00
& > .infix > .control > input {
&:-internal-autofill-selected {
&,
&:hover,
&:active,
&:valid {
box-shadow: 0 0 0 40px #474747 inset;
-webkit-text-fill-color: $color-font-dark
}
}
}
2019-11-10 10:08:44 +00:00
& > .infix > .control > * {
color: $color-font-dark;
2019-11-12 08:24:08 +00:00
&::placeholder {
color: $color-font-bg-dark;
}
2019-11-10 10:08:44 +00:00
}
& > .prepend,
& > .append,
& > .icons {
color: $color-font-bg-dark-marginal;
}
}
&.focused {
2021-11-18 09:12:21 +00:00
background-color: $color-font-dark;
2019-11-10 10:08:44 +00:00
& > .container {
2021-11-19 09:18:54 +00:00
& > .infix > .control > input {
&:-internal-autofill-selected {
&,
&:hover,
&:active,
&:valid {
box-shadow: 0 0 0 40px $color-font-dark inset;
-webkit-text-fill-color: $color-font-bg
}
}
}
2019-11-10 10:08:44 +00:00
& > .infix > .control > * {
2021-11-18 15:02:47 +00:00
color: $color-marginal;
2019-11-12 08:24:08 +00:00
&::placeholder {
color: $color-font-bg;
}
2019-11-10 10:08:44 +00:00
}
& > .prepend,
& > .append,
& > .icons {
2021-11-18 15:02:47 +00:00
color: $color-marginal;
2019-11-10 10:08:44 +00:00
}
}
}
}
2019-10-09 22:47:29 +00:00
&.not-empty,
&.focused,
&.invalid {
& > .container > .infix {
& > label {
top: 5px;
2019-11-10 10:08:44 +00:00
color: $color-primary;
padding: 0;
2020-04-02 13:11:42 +00:00
font-size: .75rem;
}
2019-10-09 22:47:29 +00:00
& > .control > * {
&[type=time],
2019-10-15 14:19:35 +00:00
&[type=date],
&[type=password] {
2019-10-09 22:47:29 +00:00
opacity: 1;
}
}
}
}
&.has-icons,
&.not-empty:hover,
&.not-empty.focused {
2019-10-09 22:47:29 +00:00
& > .container {
& > .append > append {
padding-left: 0;
}
& > .icons.pre {
padding-left: 12px;
}
}
}
&:not(.disabled):not(.readonly) {
&.focused > .container > .underline.focus {
left: 0;
width: 100%;
}
& > .container:hover > .underline.blur {
border-color: $color-input-underline-hover;
}
&.not-empty:hover,
&.not-empty.focused {
& > .container > .icons > vn-icon[icon=clear] {
display: initial;
}
}
}
&.readonly > .container {
2019-10-09 22:47:29 +00:00
& > .infix > .control > * {
caret-color: transparent;
}
& > .underline.blur {
border-bottom-style: dashed;
}
}
& > .hint {
2019-10-09 22:47:29 +00:00
padding: 4px 0;
height: 12px;
color: rgba(0, 0, 0, .4);
2020-04-02 13:11:42 +00:00
font-size: .75rem;
2019-10-09 22:47:29 +00:00
transform: translateY(-12px);
transition-property: opacity, transform, color;
transition-duration: 200ms;
transition-timing-function: ease-in-out;
opacity: 0;
2019-10-18 19:36:30 +00:00
visibility: hidden;
&.filled {
opacity: 1;
transform: translateY(0);
2019-10-18 19:36:30 +00:00
visibility: visible;
}
}
&.invalid {
& > .container {
& > .infix > label {
color: $color-alert;
}
& > .underline.focus {
background-color: $color-alert;
}
& > .underline.blur {
border-bottom-color: $color-alert;
opacity: 1;
}
}
& > .hint {
color: $color-alert;
}
}
}