classic-ui/assets/styles/components/_field.scss

197 lines
3.4 KiB
SCSS
Raw Permalink Normal View History

2022-04-22 06:05:56 +03:00
.field {
&:not(:last-child) {
margin-bottom: 1.25rem;
}
.control {
&.has-icons-right {
.input {
padding-right: calc(1.25em - 1px);
+ .icon.is-right {
display: none;
}
}
}
}
.label-with-buttons {
display: flex;
align-items: center;
.label {
margin-right: auto;
.b-tooltip {
.button {
margin-bottom: 0;
}
}
}
.button {
margin-bottom: 0.5em;
&.is-icon {
width: 20px;
height: 20px;
}
@include touch {
.b-tooltip {
&:before,
&:after {
content: none;
}
}
}
+ .button {
margin-left: 0.75rem;
}
&.is-primary-text {
color: $primary;
padding: 0;
height: auto;
background-color: transparent;
border: none;
border-bottom: 1px dotted $primary;
border-radius: 0;
font-size: 0.85rem;
line-height: 1;
&:focus:not(:active) {
box-shadow: none;
}
}
}
}
&.has-custom-field {
margin-top: -0.65rem;
+ .help {
margin-top: -1rem;
}
}
&-withdraw {
margin-top: -0.6rem;
}
&.has-addons {
.input {
border-right: 0;
}
.control {
&.has-text {
border: 1px solid #393939;
transition: border-color 0.15s ease-in-out;
border-left: 0;
display: inline-flex;
align-items: center;
span {
color: #6b6b6b;
font-size: 0.929rem;
}
&:not(:last-child) {
border-right: 0;
padding-right: 0.643rem;
}
&:last-child {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
padding-right: 0.643rem;
}
}
&.has-button {
display: inline-flex;
align-items: center;
transition: border-color 0.15s ease-in-out;
border: 1px solid #393939;
border-left: 0;
padding-right: 0.357rem;
.button {
padding: 0.25rem 0.5rem;
font-size: 0.929rem;
height: 28px;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
&:not(:last-child) {
border-right: 0;
padding-right: 0.643rem;
}
&:last-child {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
&:not(:only-child) .button {
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
}
}
&:not(:first-child):not(:last-child) .button {
border-radius: 2px;
}
}
}
&:hover {
.input,
.control {
border-color: $input-hover-border-color;
}
}
&:focus,
&:focus-within {
.input,
.control {
border-color: $input-focus-border-color;
}
}
}
&.is-warning {
.has-addons {
.input,
.control {
border-color: $warning;
}
}
}
&.is-grouped {
@include mobile {
flex-wrap: wrap;
> .field.is-expanded {
&:not(:last-child) {
margin-right: 0;
margin-bottom: 1.25rem;
}
flex: none;
width: 100%;
}
}
}
& > .field {
+ .help {
margin-top: -1rem;
}
}
}