woocommerce/plugins/woocommerce-admin/client/components/calendar/style.scss

175 lines
2.9 KiB
SCSS
Raw Normal View History

2018-05-28 10:55:19 +00:00
/** @format */
.woocommerce-calendar {
2018-07-22 23:43:21 +00:00
width: 100%;
background-color: $core-grey-light-100;
border-top: 1px solid $core-grey-light-700;
height: 396px;
&.is-mobile {
height: 100%;
min-height: 537px;
}
}
.woocommerce-calendar__react-dates {
width: 100%;
2018-08-30 21:53:25 +00:00
overflow-x: hidden;
2018-07-22 23:43:21 +00:00
2018-05-28 10:55:19 +00:00
.DayPicker {
margin: 0 auto;
}
.CalendarMonth_table {
margin-top: 10px;
}
2018-07-22 23:43:21 +00:00
.CalendarDay__selected_span {
background: $woocommerce;
border: 1px solid $core-grey-light-700;
}
.CalendarDay__selected {
background: $woocommerce-700;
border: 1px solid $core-grey-light-700;
}
.CalendarDay__hovered_span {
background: $woocommerce;
border: 1px solid $core-grey-light-500;
color: $white;
}
.CalendarDay__blocked_out_of_range {
color: $core-grey-light-900;
}
.DayPicker_transitionContainer,
.CalendarMonthGrid,
.CalendarMonth,
.DayPicker {
background-color: $core-grey-light-100;
}
.DayPicker_weekHeader_li {
color: $core-grey-dark-400;
}
2018-08-29 16:11:35 +00:00
.DayPickerNavigation_button {
&:focus {
outline: 2px solid #bfe7f3;
}
}
2018-07-22 23:43:21 +00:00
}
.woocommerce-calendar__inputs {
padding: 1em;
width: 100%;
max-width: 500px;
display: grid;
grid-template-columns: 43% 14% 43%;
margin: 0 auto;
.components-base-control {
margin: 0;
}
}
.woocommerce-calendar__inputs-to {
display: flex;
align-items: center;
justify-content: center;
grid-column-start: 2;
2018-07-22 23:43:21 +00:00
}
.woocommerce-calendar__input {
position: relative;
.dashicons-calendar {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
path {
fill: $core-grey-dark-300;
}
}
&:first-child {
grid-column-start: 1;
}
&:last-child {
grid-column-start: 3;
}
2018-07-22 23:43:21 +00:00
&.is-empty {
.dashicons-calendar path {
fill: $core-grey-dark-300;
}
}
&.is-error {
.dashicons-calendar path {
fill: $error-red;
}
.woocommerce-calendar__input-text {
border: 1px solid $error-red;
box-shadow: inset 0 0 8px $error-red;
2018-07-22 23:43:21 +00:00
&:focus {
box-shadow: inset 0 0 8px $error-red, 0 0 6px rgba(30, 140, 190, 0.8);
2018-07-22 23:43:21 +00:00
}
}
}
.woocommerce-calendar__input-text {
color: $core-grey-dark-500;
border-radius: 3px;
padding: 10px 10px 10px 30px;
width: 100%;
@include font-size( 13 );
&::placeholder {
color: $core-grey-dark-300;
}
&:focus + span .woocommerce-calendar__input-error {
display: block;
}
}
}
2018-08-29 02:50:34 +00:00
.woocommerce-filters-date__content {
.woocommerce-calendar__input-error {
2018-08-29 03:03:55 +00:00
display: none;
2018-07-22 23:43:21 +00:00
.components-popover__content {
2018-08-29 02:50:34 +00:00
background-color: $core-grey-dark-400;
color: $white;
padding: 0.5em;
border: none;
2018-07-22 23:43:21 +00:00
}
2018-05-28 10:55:19 +00:00
2018-08-29 02:50:34 +00:00
&.components-popover {
.components-popover__content {
min-width: 100px;
2018-08-29 03:03:20 +00:00
width: 100px;
2018-08-29 02:50:34 +00:00
text-align: center;
}
&:not(.no-arrow):not(.is-mobile).is-bottom::before {
2018-08-29 02:50:34 +00:00
border-bottom-color: $core-grey-dark-400;
z-index: 1;
top: -6px;
}
2018-05-28 10:55:19 +00:00
}
}
2018-08-29 02:50:34 +00:00
&.is-mobile .woocommerce-calendar__input-error .components-popover__content {
height: initial;
}
2018-05-28 10:55:19 +00:00
}