woocommerce/packages/js/components/src/dropdown-button/style.scss

84 lines
1.5 KiB
SCSS
Raw Normal View History

2018-07-20 03:40:15 +00:00
.woocommerce-page .woocommerce-dropdown-button {
background-color: $studio-white;
2018-06-29 00:34:17 +00:00
position: relative;
border: 1px solid $gray-700;
color: $gray-900;
2018-08-22 04:44:01 +00:00
border-radius: 4px;
2018-06-29 00:34:17 +00:00
padding: 0 40px 0 0;
width: 100%;
height: auto;
2018-06-29 00:34:17 +00:00
&::after {
content: '';
background: $gray-900;
mask: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20%2F%3E%3C%2Fsvg%3E)
no-repeat right 0 top 55%;
2018-06-29 00:34:17 +00:00
position: absolute;
right: 14px;
width: 32px;
height: 48px;
2018-06-29 00:34:17 +00:00
}
2018-08-22 04:44:01 +00:00
&.is-open {
&::after {
transform: translateX(12px) translateY(2px) rotate(180deg);
2018-08-22 04:44:01 +00:00
}
}
2018-06-29 00:34:17 +00:00
&:hover,
&:active,
&.is-open {
color: var(--wp-admin-theme-color);
&::after {
background: var(--wp-admin-theme-color);
}
2018-06-29 00:34:17 +00:00
}
&.is-multi-line .woocommerce-dropdown-button__labels {
flex-direction: column;
}
&:not(:focus):not(.is-open) {
border-color: $gray-700;
}
2018-06-29 00:34:17 +00:00
}
.woocommerce-dropdown-button__labels {
text-align: left;
2018-08-22 04:44:01 +00:00
padding: 8px 12px;
min-height: 48px;
2018-06-29 00:34:17 +00:00
display: flex;
align-items: center;
width: 100%;
2018-07-02 23:58:05 +00:00
justify-content: space-around;
2018-06-29 00:34:17 +00:00
@include breakpoint( '<400px' ) {
min-height: 46px;
}
2018-07-02 23:58:05 +00:00
span {
2018-06-29 00:34:17 +00:00
width: 100%;
text-align: left;
&:last-child {
@include font-size( 12 );
margin: 0;
}
&:first-child {
2018-08-22 04:44:01 +00:00
@include font-size( 13 );
font-weight: 600;
2018-06-29 00:34:17 +00:00
}
@include breakpoint( '<400px' ) {
&:last-child {
@include font-size( 10 );
}
&:first-child {
@include font-size( 12 );
}
}
}
}