vault/ui/app/styles/components/calendar-widget.scss

99 lines
1.8 KiB
SCSS

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
$dark-gray: #535f73;
.calendar-content {
display: flex;
width: 234px;
&.calendar-open {
width: 500px;
}
> .menu {
margin-bottom: 0px;
}
}
.calendar-title {
padding: $size-10 $size-8;
}
.select-year {
grid-area: select-year;
margin: 10px 24px;
font-weight: $font-weight-bold;
display: flex;
justify-content: space-between;
align-items: first baseline;
}
.calendar-widget {
grid-area: calendar-widget;
> button {
&.is-month-list {
background-color: $white;
color: black;
text-align: center;
border: $light-border;
border-radius: $radius;
}
&.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;
}
}
}
.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: $radius;
}
.calendar-widget-grid {
display: grid;
grid-template-columns: 110px 110px;
grid-template-rows: repeat(2, 1fr);
grid-gap: 0.7rem;
padding: 7px 28px 28px 28px;
}
// for modal-dialog tooltips
.calendar-tooltip {
background-color: $ui-gray-700;
color: $white;
font-size: $size-8;
padding: $size-9;
border-radius: $radius-large;
width: 141px;
}
.ember-modal-dialog {
z-index: 1000;
}