Skip to content

Commit

Permalink
Merge branch '284_Blank_Theme_multiselect_arrows_are_too_small' of ht…
Browse files Browse the repository at this point in the history
  • Loading branch information
rganin committed Sep 28, 2020
2 parents 62b0bd8 + b08738f commit adc9b18
Showing 1 changed file with 158 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

//
// Actions -> Action select
// _____________________________________________

//
// Variables
// _____________________________________________

@color-blue-pure: #007bdb;

@action__height: 3.2rem;
@action__width: 3.2rem;

// Triangle marker
@button-marker-triangle__height: .5rem;
@button-marker-triangle__width: .8rem;

@button__border-color: @color-gray68;

@action__border-color: @color-gray68;
@action__active__border-color: @action__border-color;
@action__hover__border-color: @action__border-color;

@action-select__disabled__color: @text__color;
@action-select__z-index: @z-index-5;

@field-control__box-shadow: 0 0 3px 1px @color-blue3;
@field-control__active__border-color: @color-blue-pure;
@field-control__hover__border-color: @action__hover__border-color;

@_dropdown__padding-right: @action__height;
@_triangle__height: @button-marker-triangle__height;
@_triangle__width: @button-marker-triangle__width;

// Action select have the same visual styles and functionality as native <select>
.admin__action-group-wrap {
@_action-select__border-color: @button__border-color;
@_action-select__active__border-color: @action__active__border-color;
@_action-select-toggle__size: @action__height;

display: inline-block;
position: relative;

.action-select {
.lib-text-overflow();

background-color: @color-white;
font-weight: @font-weight__regular;
text-align: left;

&:hover {
border-color: @color-gray68;

&:before {
border-color: @field-control__hover__border-color;
}
}

// Toggle action
&:extend(.abs-icon-add all);

&:before {
align-items: center;
content: @icon-down;
display: flex;
font-size: 24px;
justify-content: space-around;
line-height: 1;
position: absolute;
right: 0;
width: @action__width;
}

&._active {
&:before {
content: @icon-up;
}
}

&[disabled] {
color: @action-select__disabled__color;
}

&._mage-error {
border: 1px solid @form-element-validation__border-error;
}
}

&._focus {
.action-select {
&._mage-error {
border: 1px solid @form-element-validation__border-error;
}
}
}

&._active {
z-index: @action-select__z-index;

.action-select {
&:before {
content: @icon-up;
}
}

.action-menu {
.lib-css(box-shadow, @field-control__box-shadow);
}
}

.action-menu {
border: 1px solid @action__border-color;
display: none;
max-height: 45rem;
overflow-y: auto;

&._active {
display: block;
}

._disabled {
&:hover {
background: @color-white;
}

.action-menu-item {
cursor: default;
opacity: .5;
}
}
}

.action-menu-items {
left: 0;
position: absolute;
right: 0;
top: 100%;

> .action-menu {
min-width: 100%;
position: static;

.action-submenu {
position: absolute;
right: -100%;
}
}
}

.validate-select-field {
.lib-visually-hidden();
}
}

0 comments on commit adc9b18

Please sign in to comment.