at the end of the day, it was inevitable
This commit is contained in:
Mo Elzubeir
@@ -0,0 +1,71 @@
|
||||
|
||||
.rbc-agenda-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
overflow: auto;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border: 1px solid $cell-border;
|
||||
|
||||
tbody > tr > td {
|
||||
padding: 5px 10px;
|
||||
vertical-align: top;
|
||||
|
||||
}
|
||||
|
||||
.rbc-agenda-time-cell {
|
||||
padding-inline-start: 15px;
|
||||
padding-inline-end: 15px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
tbody > tr > td + td {
|
||||
border-left: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
.rbc-rtl & {
|
||||
tbody > tr > td + td {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid $cell-border;
|
||||
}
|
||||
}
|
||||
|
||||
tbody > tr + tr {
|
||||
border-top: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
thead > tr > th {
|
||||
padding: 3px 5px;
|
||||
text-align: start;
|
||||
border-bottom: 1px solid $cell-border;
|
||||
|
||||
.rbc-rtl & {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-agenda-time-cell {
|
||||
text-transform: lowercase;
|
||||
|
||||
.rbc-continues-after:after {
|
||||
content: ' »'
|
||||
}
|
||||
.rbc-continues-prior:before {
|
||||
content: '« '
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-agenda-date-cell,
|
||||
.rbc-agenda-time-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.rbc-agenda-event-cell {
|
||||
width: 100%
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@import 'variables';
|
||||
|
||||
.rbc-event {
|
||||
cursor: pointer;
|
||||
padding: $event-padding;
|
||||
background-color: $event-bg;
|
||||
border-radius: $event-border-radius;
|
||||
color: $event-color;
|
||||
|
||||
&.rbc-selected {
|
||||
background-color: darken($event-bg, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-event-label {
|
||||
@extend .rbc-ellipsis;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.rbc-event-overlaps {
|
||||
box-shadow: -1px 1px 5px 0px rgba(51,51,51,.5);
|
||||
}
|
||||
|
||||
.rbc-event-continues-prior {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.rbc-event-continues-after {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
.rbc-event-continues-earlier {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.rbc-event-continues-later {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
@import 'variables';
|
||||
|
||||
|
||||
.rbc-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.rbc-row-segment {
|
||||
padding: 0 1px 1px 1px;
|
||||
|
||||
.rbc-event-content {
|
||||
@extend .rbc-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-selected-cell {
|
||||
background-color: $date-selection-bg-color;
|
||||
}
|
||||
|
||||
|
||||
.rbc-show-more {
|
||||
@extend .rbc-ellipsis;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
z-index: $event-zindex;
|
||||
font-weight: bold;
|
||||
font-size: 85%;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rbc-month-view {
|
||||
position: relative;
|
||||
border: 1px solid $calendar-border;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
|
||||
height: 100%; // ie-fix
|
||||
|
||||
.rbc-header {
|
||||
border-bottom: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
.rbc-header + .rbc-header {
|
||||
border-left: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
.rbc-rtl & .rbc-header + .rbc-header {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid $cell-border;
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-month-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.rbc-month-row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
height: 100%; // ie-fix
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid $cell-border;
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-date-cell {
|
||||
padding-inline-end: 5px;
|
||||
text-align: end;
|
||||
flex: 1 1;
|
||||
|
||||
&.rbc-now {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> a {
|
||||
&, &:active, &:visited {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-row-bg {
|
||||
@extend .rbc-abs-full;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rbc-day-bg {
|
||||
flex: 1 0;
|
||||
& + & {
|
||||
border-left: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
.rbc-rtl & + & {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid $cell-border;
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-off-range-bg {
|
||||
background: $gray-100;
|
||||
}
|
||||
|
||||
.rbc-overlay {
|
||||
position: absolute;
|
||||
z-index: $event-zindex + 1;
|
||||
border: 1px solid #e5e5e5;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,.25);
|
||||
padding: 10px;
|
||||
|
||||
> * + * {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-overlay-header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
margin: -10px -10px 5px -10px ;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.rbc-btn {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.rbc-btn {
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[disabled].rbc-btn {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button.rbc-input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
@import 'variables';
|
||||
|
||||
|
||||
.rbc-time-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
|
||||
.rbc-timeslot-group {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rbc-timeslot-group {
|
||||
border-bottom: 1px solid $cell-border;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
.rbc-time-gutter,
|
||||
.rbc-header-gutter {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.rbc-label {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.rbc-day-slot {
|
||||
position: relative;
|
||||
|
||||
.rbc-event {
|
||||
border: 1px solid $event-border;
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
flex-flow: column wrap;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rbc-event-label {
|
||||
flex: none;
|
||||
padding-inline-end: 5px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.rbc-event-content {
|
||||
width: 100%;
|
||||
flex: 1 1 0;
|
||||
word-wrap: break-word;
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
.rbc-time-slot {
|
||||
border-top: 1px solid lighten($cell-border, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-time-slot {
|
||||
flex: 1 0 0;
|
||||
|
||||
&.rbc-now {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-day-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rbc-day-slot .rbc-event {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
@import 'variables';
|
||||
@import 'time-column';
|
||||
|
||||
.rbc-slot-selection {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
background-color: $time-selection-bg-color;
|
||||
color: $time-selection-color;
|
||||
font-size: 75%;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.rbc-time-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
border: 1px solid $calendar-border;
|
||||
min-height: 0;
|
||||
|
||||
.rbc-time-gutter {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rbc-allday-cell {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rbc-allday-events {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.rbc-row {
|
||||
min-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rbc-time-header {
|
||||
display: flex;
|
||||
flex: 0 0 auto; // should not shrink below height
|
||||
flex-direction: column;
|
||||
|
||||
&.rbc-overflowing {
|
||||
border-right: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
.rbc-rtl &.rbc-overflowing {
|
||||
border-right-width: 0;
|
||||
border-left: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
> .rbc-row > * + * {
|
||||
border-left: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
.rbc-rtl & > .rbc-row > * + * {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
> .rbc-row:first-child {
|
||||
border-bottom: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
.rbc-gutter-cell {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
> .rbc-gutter-cell + * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-time-content {
|
||||
display: flex;
|
||||
flex: 1 0 0%;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border-top: 2px solid $calendar-border;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
> .rbc-time-gutter {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
> * + * > * {
|
||||
border-left: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
.rbc-rtl & > * + * > * {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid $cell-border;
|
||||
}
|
||||
|
||||
> .rbc-day-slot {
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-current-time-indicator {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
|
||||
background-color: $current-time-color;
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: -3px;
|
||||
|
||||
content: ' ';
|
||||
background-color: $current-time-color;
|
||||
|
||||
border-radius: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.rbc-rtl &::before {
|
||||
left: 0;
|
||||
right: -3px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
@import 'variables';
|
||||
|
||||
$active-background: darken($btn-bg, 10%);
|
||||
$active-border: darken($btn-border, 12%);
|
||||
|
||||
.rbc-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
|
||||
.rbc-toolbar-label {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& button {
|
||||
color: $btn-color;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: $primary;
|
||||
border: 1px solid $btn-border;
|
||||
padding: .375rem 1rem;
|
||||
border-radius: $border-radius;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
font-size: $font-size-sm / 1.1;
|
||||
|
||||
&:active,
|
||||
&.rbc-active {
|
||||
background-image: none;
|
||||
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $btn-color;
|
||||
background-color: darken($btn-bg, 17%);
|
||||
border-color: darken($btn-border, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $btn-color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $btn-color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-btn-group {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
|
||||
> button:first-child:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
> button:last-child:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.rbc-rtl & > button:first-child:not(:last-child) {
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.rbc-rtl & > button:last-child:not(:first-child) {
|
||||
border-radius: 4px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
> button:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button + button {
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
|
||||
.rbc-rtl & button + button {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: -1px;
|
||||
}
|
||||
|
||||
& + &,
|
||||
& + button {
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
|
||||
$out-of-range-color: lighten(#333, 50%);
|
||||
|
||||
$calendar-border: $gray-200;
|
||||
$cell-border: $gray-200;
|
||||
|
||||
$border-color: $gray-300;
|
||||
|
||||
$segment-width: percentage(1 / 7);
|
||||
|
||||
$time-selection-color: #white;
|
||||
$time-selection-bg-color: rgba(0,0,0, .50);
|
||||
$date-selection-bg-color: rgba(0,0,0, .10);
|
||||
|
||||
|
||||
$event-bg: $primary;
|
||||
$event-border: darken($event-bg, 10%);
|
||||
$event-color: $white;
|
||||
$event-border-radius: $border-radius;
|
||||
$event-padding: $dropdown-spacer;
|
||||
$event-zindex: 4;
|
||||
|
||||
$btn-color: $white;
|
||||
$btn-bg: $primary;
|
||||
$btn-border: $primary;
|
||||
|
||||
$current-time-color: $success;
|
||||
|
||||
$rbc-css-prefix: rbc-i;
|
||||
|
||||
$today-highlight-bg: $dropdown-link-hover-bg;
|
||||
Reference in New Issue
Block a user