Your IP : 216.73.216.43
// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
//
// Components
// _____________________________________________
@import 'controls/_checkbox-radio.less';
//
// Basic controls
// _____________________________________________
// Common
.__form-control-pattern() {
-webkit-appearance: none;
background-color: @field-control__background-color;
border: @field-control__border-width solid @field-control__border-color;
border-radius: @field-control__border-radius;
box-shadow: @field-control__box-shadow;
color: @field-control__color;
font-size: @field-control__font-size;
font-weight: @font-weight__regular;
height: auto;
line-height: @field-control__line-height;
padding: @field-control__padding-top @field-control__padding-horizontal @field-control__padding-bottom;
transition: @smooth__border-color;
vertical-align: baseline;
width: auto;
}
.__form-control-pattern__hover() {
border-color: @field-control__hover__border-color;
}
.__form-control-pattern__focus() {
border-color: @field-control__focus__border-color;
box-shadow: none;
outline: 0;
}
.__form-control-pattern__disabled() {
background-color: @field-control__disabled__background-color;
border-color: @field-control__border-color;
color: @field-control__color;
cursor: not-allowed;
opacity: @disabled__opacity;
}
// Input text styles
.admin__control-text {
&:extend(.abs-form-control-pattern all);
min-width: 4rem;
}
// Select styles
.admin__control-select {
&:extend(.abs-form-control-pattern all);
.lib-css(appearance, none, 1);
background-image+: url('../images/arrows-bg.svg');
background-position+: ~'calc(100% - 12px)' -34px;
background-size+: auto;
background-image+: linear-gradient(@color-gray89, @color-gray89);
background-position+: 100%;
background-size+: @field-control__height 100%;
background-image+: linear-gradient(@field-control__border-color,@field-control__border-color);
background-position+: ~'calc(100% - @{field-control__height})' 0;
background-size+: 1px 100%;
background-repeat: no-repeat;
max-width: 100%;
min-width: 8.5rem;
padding-bottom: @field-control__padding-bottom;
padding-right: 4.4rem; // Distance between select switch and inner text
padding-top: @field-control__padding-top;
transition: @smooth__border-color;
&:hover {
border-color: @field-control__hover__border-color;
cursor: pointer;
}
&:active {
background-image+: url('../images/arrows-bg.svg');
background-position+: ~'calc(100% - 12px)' 13px;
background-image+: linear-gradient(@color-gray89, @color-gray89);
background-position+: 100%;
background-image+: linear-gradient(@field-control__focus__border-color, @field-control__focus__border-color);
background-position+: ~'calc(100% - @{field-control__height})' 0;
border-color: @field-control__focus__border-color;
}
&::-ms-expand {
display: none;
}
}
option:empty {
display: none;
}
// Multiple select
.admin__control-multiselect {
&:extend(.abs-form-control-pattern all);
height: auto;
max-width: 100%;
min-width: @field-size__s;
overflow: auto;
padding: 0;
resize: both;
option,
optgroup {
padding: .5rem 1rem;
}
}
// File uploader
.admin__control-file-wrapper {
display: inline-block;
padding: .5rem 1rem;
position: relative;
z-index: 1;
}
.admin__control-file-label {
&:before {
&:extend(.abs-form-control-pattern);
.admin__control-file:active + &,
.admin__control-file:focus + & {
/**
* @codingStandardsIgnoreStart
*/
&:extend(.abs-form-control-pattern:focus);
}
.admin__control-file[disabled] + & {
&:extend(.abs-form-control-pattern[disabled]);
}
content: '';
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
}
.admin__control-file {
background: transparent;
border: 0;
padding-top: .7rem;
position: relative;
width: auto;
z-index: 1;
}
//
// Support text. Can be used on label or plain text to align controls & actions
// ---------------------------------------------
.admin__control-support-text { // ToDo UI: should be renamed to .admin__control-text
border: @field-control__border-width solid transparent;
display: inline-block;
font-size: @field-control__font-size;
line-height: @field-control__line-height;
padding-bottom: @field-control__padding-bottom;
padding-top: @field-control__padding-top;
margin-left: @action__outer-indent;
+ [class*='admin__control-'] {
margin-left: @action__outer-indent;
}
}
[class*='admin__control-'] {
+ .admin__control-support-text {
margin-left: @action__outer-indent;
}
}
//
// Service text or control. Can be used to add text or 'Use Default Value' checkbox
// ---------------------------------------------
.admin__control-service {
float: left;
margin: .8rem 0 0 3rem;
}
//
// Textarea
// ---------------------------------------------
.admin__control-textarea {
&:extend(.abs-form-control-pattern all);
line-height: 1.18;
padding-top: .8rem;
resize: vertical;
}
// Control with additional prefix or suffix label
.admin__control-addon {
.lib-vendor-prefix-display(inline-flex);
.lib-vendor-prefix-flex-direction(row);
display: inline-flex;
flex-flow: row nowrap;
position: relative;
width: 100%;
z-index: 1;
> [class*='admin__addon-'],
> [class*='admin__control-'] {
.lib-vendor-prefix-flex-basis(auto);
.lib-vendor-prefix-flex-grow(0);
.lib-vendor-prefix-flex-shrink(0);
position: relative;
z-index: 1;
}
.admin__control-select {
width: auto;
}
.admin__control-text {
margin: .1rem;
padding: @field-control__padding-top - .1rem @field-control__padding-horizontal - .1rem @field-control__padding-bottom - .1rem;
width: 100%;
}
[class*='admin__control-'][class] {
.lib-css(appearence,none);
.lib-vendor-prefix-flex-grow(1);
.lib-vendor-prefix-order(1);
.lib-vendor-prefix-flex-shrink(1);
background-color: transparent;
border-color: transparent;
box-shadow: none;
vertical-align: top;
& + [class*='admin__control-'] {
border-left-color: @field-control__border-color;
}
:focus {
box-shadow: 0;
}
& ~ [class*='admin__addon-']:last-child {
padding-left: 1rem;
position: static !important;
z-index: 0;
> * {
position: relative;
vertical-align: top;
z-index: 1;
}
&:empty {
padding: 0;
}
}
& ~ [class*='admin__addon-']:last-child:before {
&:extend(.abs-form-control-pattern);
bottom: 0;
box-sizing: border-box;
content: '';
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
&[disabled] ~ [class*='admin__addon-']:last-child:before {
&:extend(.abs-form-control-pattern[disabled]);
}
&:focus ~ [class*='admin__addon-']:last-child:before {
&:extend(.abs-form-control-pattern:focus);
}
&:hover ~ [class*='admin__addon-']:last-child:before {
&:extend(.abs-form-control-pattern:hover);
}
}
}
.admin__addon-suffix,
.admin__addon-prefix {
border: 0;
box-sizing: border-box;
color: @field-control-addon__color;
display: inline-block;
font-size: @field-control__font-size;
font-weight: @font-weight__regular;
height: @field-control__height;
line-height: @field-control__height;
padding: 0;
}
.admin__addon-suffix {
.lib-vendor-prefix-order(3);
&:last-child {
padding-right: 1rem;
}
}
.admin__addon-prefix {
.lib-vendor-prefix-order(0);
}