woocommerce/plugins/woocommerce-admin/client/components/dropdown-button/style.scss

81 lines
1.3 KiB
SCSS

/** @format */
.woocommerce-page .woocommerce-dropdown-button {
background-color: $white;
position: relative;
border: 1px solid $core-grey-light-500;
color: $core-grey-dark-500;
border-radius: 4px;
padding: 0 40px 0 0;
width: 100%;
&::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: $core-grey-dark-500 transparent transparent transparent;
@include animate-transform;
}
&.is-open {
&::after {
transform: translateY(-50%) rotate(180deg);
}
}
&:hover,
&:active,
&.is-open {
background-color: $core-grey-light-100;
}
&.is-multi-line .woocommerce-dropdown-button__labels {
flex-direction: column;
}
}
.woocommerce-dropdown-button__labels {
text-align: left;
padding: 8px 12px;
min-height: 48px;
display: flex;
align-items: center;
width: 100%;
justify-content: space-around;
@include breakpoint( '<400px' ) {
min-height: 46px;
}
span {
width: 100%;
text-align: left;
&:last-child {
@include font-size( 12 );
margin: 0;
}
&:first-child {
@include font-size( 13 );
font-weight: 600;
}
@include breakpoint( '<400px' ) {
&:last-child {
@include font-size( 10 );
}
&:first-child {
@include font-size( 12 );
}
}
}
}