121 lines
2.5 KiB
SCSS
121 lines
2.5 KiB
SCSS
|
// the calendar displayed by the calendar applet is a heavily modified menu and inherits from the .menu selectosr
|
||
|
// indivudual elements within the menu can be themed seperately with these selectors
|
||
|
.calendar {
|
||
|
padding: 1em 1.75em;
|
||
|
spacing-rows: 1px;
|
||
|
spacing-columns: 5px;
|
||
|
}
|
||
|
// also covers the year label
|
||
|
.calendar-month-label {
|
||
|
color: $dark_fg_color;
|
||
|
font-size: 0.8em;
|
||
|
padding: 5px 10px;
|
||
|
border-radius: $roundness;
|
||
|
font-weight: bold;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.calendar-change-month-back {
|
||
|
@extend %calendar-shared;
|
||
|
|
||
|
border: 1px solid transparent;
|
||
|
background-image: url(assets/calendar-arrow-left.svg);
|
||
|
&:rtl {
|
||
|
background-image: url(assets/calendar-arrow-right.svg);
|
||
|
}
|
||
|
&:hover {
|
||
|
border: 1px solid $selected_bg_color;
|
||
|
}
|
||
|
&:active {
|
||
|
background-color: $selected_bg_color;
|
||
|
}
|
||
|
}
|
||
|
.calendar-change-month-forward {
|
||
|
@extend %calendar-shared;
|
||
|
|
||
|
border: 1px solid transparent;
|
||
|
background-image: url(assets/calendar-arrow-right.svg);
|
||
|
&:rtl {
|
||
|
background-image: url(assets/calendar-arrow-left.svg);
|
||
|
}
|
||
|
&:hover {
|
||
|
border: 1px solid $selected_bg_color;
|
||
|
}
|
||
|
&:active {
|
||
|
background-color: $selected_bg_color;
|
||
|
}
|
||
|
}
|
||
|
.datemenu-date-label {
|
||
|
padding: 1em 1.75em;
|
||
|
color: $dark_fg_color;
|
||
|
font-weight: bold;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.calendar-day-base {
|
||
|
font-size: 0.8em;
|
||
|
text-align: center;
|
||
|
width: 2.4em;
|
||
|
height: 1.8em;
|
||
|
border-radius: $roundness;
|
||
|
&:active {
|
||
|
background-color: $selected_bg_color;
|
||
|
}
|
||
|
&:hover {
|
||
|
}
|
||
|
}
|
||
|
.calendar-day-heading {
|
||
|
color: $dark_fg_color;
|
||
|
padding-top: 0.9em;
|
||
|
}
|
||
|
.calendar-week-number {
|
||
|
color: $dark_fg_color;
|
||
|
font-weight: bold;
|
||
|
padding-top: 0.6em;
|
||
|
}
|
||
|
.calendar-day {
|
||
|
&:ltr {
|
||
|
color: $dark_fg_color;
|
||
|
padding: 2px;
|
||
|
}
|
||
|
&:rtl {
|
||
|
color: $dark_fg_color;
|
||
|
padding: 3px;
|
||
|
}
|
||
|
}
|
||
|
.calendar-day-top {
|
||
|
&:ltr {
|
||
|
}
|
||
|
&:rtl {
|
||
|
}
|
||
|
}
|
||
|
.calendar-day-left {
|
||
|
&:ltr {
|
||
|
}
|
||
|
&:rtl {
|
||
|
}
|
||
|
}
|
||
|
.calendar-work-day {
|
||
|
}
|
||
|
.calendar-nonwork-day {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
// this is always is an active state
|
||
|
.calendar-today {
|
||
|
@extend %selected-bg-grad-to-bottom;
|
||
|
|
||
|
font-weight: bold;
|
||
|
&:active {
|
||
|
color: $selected_fg_color;
|
||
|
}
|
||
|
}
|
||
|
.calendar-other-month-day {
|
||
|
font-style: italic;
|
||
|
}
|
||
|
// this is always is an active state
|
||
|
.calendar-day-with-events {
|
||
|
background-color: $selected_bg_color;
|
||
|
font-weight: bold;
|
||
|
&:active {
|
||
|
color: $selected_fg_color;
|
||
|
}
|
||
|
}
|