woocommerce/plugins/woocommerce-admin/client/components/date-picker/style.scss

122 lines
1.9 KiB
SCSS

/** @format */
.woocommerce-date-picker {
width: 33.3%;
@include breakpoint( '<1100px' ) {
width: 50%;
}
@include breakpoint( '<782px' ) {
width: 100%;
}
}
.woocommerce-date-picker__content {
> .components-popover__content {
width: 320px;
}
&.is-mobile {
& > .components-popover__content {
width: 100%;
height: 100%;
}
.components-popover__header {
border: none;
height: 0;
}
.components-popover__close {
transform: translateY(22px);
}
.components-tab-panel__tab-content {
height: calc(100% - 38px);
}
}
}
.woocommerce-date-picker__tabs {
height: calc(100% - 42px);
.components-tab-panel__tabs {
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 5px;
margin: 0 1em 1em 1em;
}
.components-tab-panel__tab-content {
display: flex;
flex-direction: column;
align-items: center;
}
}
.woocommerce-date-picker__tab {
outline: none;
border: 1px solid $woocommerce;
padding: 10px;
margin: 0;
border-radius: 5px 0 0 5px;
background-color: transparent;
&:last-child {
border-radius: 0 5px 5px 0;
}
&.is-active {
background-color: $woocommerce;
color: $white;
}
&:focus {
outline: 2px solid lightseagreen;
}
}
.woocommerce-date-picker__text {
@include font-size( 12 );
font-weight: 100;
text-transform: uppercase;
text-align: center;
color: $core-grey-dark-300;
width: 100%;
margin: 0;
padding: 1em;
background-color: $white;
}
.woocommerce-date-picker__content-controls {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
padding-bottom: 1em;
background-color: $white;
&.is-custom {
border-top: 1px solid $core-grey-light-700;
}
&.is-sticky-bottom {
position: absolute;
bottom: 0;
}
}
.woocommerce-date-picker__content-controls-btns {
padding-top: 1em;
display: flex;
justify-content: center;
width: 100%;
}
.woocommerce-date-picker__content-controls-btn {
justify-content: center;
width: 50%;
margin: 0 1em;
}