mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-22 23:21:08 +02:00
c567279bc3
* cherry pick my changes over * clean up * styling fix * clean up * address pr comments * rename * update comment
114 lines
2.1 KiB
SCSS
114 lines
2.1 KiB
SCSS
$dark-gray: #535f73;
|
|
|
|
.calendar-content {
|
|
display: flex;
|
|
width: 500px;
|
|
|
|
> .menu {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
.calendar-title {
|
|
color: $ui-gray-300;
|
|
text-transform: uppercase;
|
|
font-size: $size-7;
|
|
font-weight: $font-weight-semibold;
|
|
|
|
&.popup-menu-item {
|
|
padding: $size-10 $size-8;
|
|
}
|
|
}
|
|
.calendar-widget-dropdown {
|
|
@extend .button;
|
|
@extend .is-ghost;
|
|
@extend .has-icon-right;
|
|
border: 0;
|
|
color: $black;
|
|
transition: background-color $speed;
|
|
width: 150px;
|
|
|
|
&:hover {
|
|
background-color: $ui-gray-100;
|
|
border: 0;
|
|
color: $blue;
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: $ui-gray-100;
|
|
border: 0;
|
|
color: $blue;
|
|
}
|
|
}
|
|
|
|
.select-year {
|
|
grid-area: select-year;
|
|
margin-left: 24px;
|
|
margin-top: 10px;
|
|
font-weight: $font-weight-bold;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: first baseline;
|
|
|
|
> .padding-right {
|
|
padding-right: 26px;
|
|
}
|
|
}
|
|
|
|
.calendar-widget {
|
|
grid-area: calendar-widget;
|
|
|
|
> button {
|
|
&.is-month-list {
|
|
background-color: white;
|
|
color: black;
|
|
text-align: center;
|
|
border: 1px solid $ui-gray-200;
|
|
border-radius: 2px;
|
|
}
|
|
&.is-current-month {
|
|
border: 1px solid $ui-gray-900;
|
|
}
|
|
&:hover {
|
|
background-color: lighten($dark-gray, 30%);
|
|
color: white;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
&.is-readOnly {
|
|
background-color: $ui-gray-100;
|
|
color: lighten($dark-gray, 30%);
|
|
pointer-events: none;
|
|
}
|
|
&.is-selected {
|
|
background-color: $blue-500;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.border-col {
|
|
grid-area: border-col;
|
|
background-color: $ui-gray-200;
|
|
}
|
|
|
|
.calendar-widget-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'select-year'
|
|
'calendar-widget';
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 0.7fr 3fr;
|
|
box-shadow: $box-shadow, $box-shadow-middle;
|
|
background-color: white;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.calendar-widget-grid {
|
|
display: grid;
|
|
grid-template-columns: 110px 110px;
|
|
grid-template-rows: repeat(2, 1fr);
|
|
grid-gap: 0.5rem;
|
|
padding: 7px 28px 28px 28px;
|
|
}
|