app/assets/stylesheets/candl.scss
$hnh-color-black: #333333;
$hnh-color-light-gray: #eeeeee;
$hnh-color-orange: #df631d;
$hnh-color-green: #8fa841;
$hnh-color-blue: #4781ba;
$hnh-color-yellow: #f7cb51;
$hnh-size-micro: 0.125rem;
$hnh-size-tiny: 0.25rem;
$hnh-size-small: 0.5rem;
$hnh-size-medium: 1rem;
$hnh-size-big: 2rem;
$hnh-size-huge: 4rem;
$hnh-size-humongus: 8rem;
.button_holder {
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin-bottom: $hnh-size-medium;
.btn-group {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.button_item {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-content: center;
.button_icon {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
width: 100%;
height: 100%;
i {
margin: auto;
}
}
}
}
a.btn {
min-width: $hnh-size-humongus + $hnh-size-big;
min-height: $hnh-size-huge;
}
}
.error_message {
font-weight: bold;
}
.agenda {
width: 100%;
border: 1px solid lighten($hnh-color-black, 67%);
.today {
background-color: lighten($hnh-color-blue, 36%);
}
.not_today {
background-color: lighten($hnh-color-black, 72%);
}
.row_head {
color: $hnh-color-black;
padding: $hnh-size-small;
}
.event_shell {
color: darken($hnh-color-blue, 7%);
transition: background-color 0.33s;
cursor: pointer;
.event {
display: flex;
align-items: center;
padding: $hnh-size-small;
.time {
font-weight: bold;
min-width: 6rem;
text-align: center;
}
.summary {
color: inherit;
}
.auto_margin_left {
margin-left: auto;
margin-right: 1px;
}
&:hover {
background-color: $hnh-color-light-gray;
}
}
.details {
padding: $hnh-size-tiny;
color: $hnh-color-black;
.text {
display: inline-flex;
align-items: center;
.icon {
min-width: 6rem;
padding-left: $hnh-size-medium;
padding-right: $hnh-size-medium;
text-align: center;
}
.content {
padding-left: $hnh-size-medium;
padding-right: $hnh-size-medium;
}
}
}
&.past {
opacity: 0.6;
&:hover {
opacity: 1;
}
}
&:nth-child(odd) {
color: darken($hnh-color-green, 7%);
}
}
}
.table.month_view {
table-layout: fixed;
&>tbody>tr>td {
border-top: none;
border-left: solid 1px #ddd;
border-right: solid 1px #ddd;
}
th {
border-left: solid 1px #ddd;
border-right: solid 1px #ddd;
}
tr:last-child>td {
border-bottom: solid 1px #ddd;
}
.weekday_name_header {
overflow: hidden;
text-align: center;
}
tbody>tr.day_row {
background-color: lighten($hnh-color-light-gray, 4%);
&>td {
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
}
.day_head {
width: 100%;
text-align: center;
}
}
.small_padding {
padding: $hnh-size-tiny + $hnh-size-micro;
}
.multiday_event {
padding: $hnh-size-micro;
overflow: hidden;
cursor: pointer;
border-radius: $hnh-size-small;
border: $hnh-size-micro solid $hnh-color-light-gray;
background-color: lighten($hnh-color-blue, 42%);
border: 1px solid lighten($hnh-color-blue, 29%);
transition: background-color 0.33s;
.summary {
margin-left: $hnh-size-small;
color: $hnh-color-black;
}
&.past {
opacity: 0.6;
}
&:nth-child(odd) {
background-color: lighten($hnh-color-green, 42%);
border: 1px solid lighten($hnh-color-green, 29%);
}
&:hover {
background-color: lighten($hnh-color-blue, 33%);
border: 1px solid lighten($hnh-color-blue, 15%);
&:nth-child(odd) {
background-color: lighten($hnh-color-green, 33%);
border: 1px solid lighten($hnh-color-green, 15%);
}
}
}
.multiday_event_leftcut {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.multiday_event_bothcut {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.multiday_event_rightcut {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.events_row {
height: $hnh-size-huge;
.event {
padding: $hnh-size-tiny;
overflow: hidden;
margin-bottom: $hnh-size-small;
cursor: pointer;
border-radius: $hnh-size-small;
border: $hnh-size-micro solid $hnh-color-light-gray;
background-color: lighten($hnh-color-blue, 42%);
border: 1px solid lighten($hnh-color-blue, 29%);
transition: background-color 0.33s;
.time {
font-weight: bold;
}
.summary {
margin-left: $hnh-size-small;
color: $hnh-color-black;
}
&.past {
opacity: 0.6;
}
&:nth-child(odd) {
background-color: lighten($hnh-color-green, 42%);
border: 1px solid lighten($hnh-color-green, 29%);
}
&:hover {
background-color: lighten($hnh-color-blue, 33%);
border: 1px solid lighten($hnh-color-blue, 15%);
&:nth-child(odd) {
background-color: lighten($hnh-color-green, 33%);
border: 1px solid lighten($hnh-color-green, 15%);
}
}
}
}
}
.popover_backdrop {
z-index: 101;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($hnh-color-light-gray,0.4);
}
.init_display_none {
display: none;
}
.popover-content {
overflow: hidden;
display: inline-flex;
flex-direction: column;
.icon_spacing {
margin-right: $hnh-size-medium;
}
.close_span {
width: 100%;
.close {
text-align: right;
cursor: pointer;
}
}
hr {
width: 100%;
}
.text {
.medium_margin_right {
margin-right: $hnh-size-humongus;
}
display: flex;
flex-direction: row;
display: flex;
align-items: center;
.flex_wrap_it {
flex-wrap: wrap;
}
.breakable {
word-break: break-word;
hyphens: auto;
overflow-wrap: break-word;
}
}
}