Skip to content

Commit

Permalink
Refactor SCSS for customization
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpaternina9
dpaternina9 committed May 26, 2018
1 parent 7c18498 commit 26061cf
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 70 deletions.
5 changes: 3 additions & 2 deletions scss/_dialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
}

.v-cal-dialog__bg {
background-color: rgba(0,0,0,.3);
background-color: $v-cal-dialog-bg;
position: absolute;
width: 100%;
height: 100%;
Expand All @@ -25,7 +25,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 500px;
max-width: $v-cal-dialog-card-max-width;
box-shadow: $v-cal-dialog-shadow;
}

Expand All @@ -36,6 +36,7 @@
border-bottom: 1px solid $v-cal-dialog-header-border-color;

.v-cal-dialog__title {
font-size: $v-cal-dialog-title-font-size;
margin: 0;
}

Expand Down
131 changes: 68 additions & 63 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,57 +7,61 @@ $v-cal-blue: #3B86FF;

// Derived variables

$v-cal-font-color: $v-cal-blueish-grey;
$v-cal-primary: $v-cal-blue;
$v-cal-font-color: $v-cal-blueish-grey !default;
$v-cal-primary: $v-cal-blue !default;

// Title
$v-cal-title-font-size: 18px !default;

// Calendar body
$v-cal-body-bg: $white;
$v-cal-body-shadow: 0 2px 6px rgba(0,0,0,.04);
$v-cal-body-bg: $white !default;
$v-cal-body-shadow: 0 2px 6px rgba(0,0,0,.04) !default;
$v-cal-body-padding: 20px;

// Calendar header
$v-cal-header-padding: 0 0 40px;

// Calendar content
$v-cal-content-border-color: #EAF0F4;
$v-cal-content-border-color: #EAF0F4 !default;

// Calendar content head
$v-cal-days-head-bg: #F5F6FA;
$v-cal-days-head-border-color: #EAF0F4;
$v-cal-days-head-color: #A3A6B4;
$v-cal-days-head-font-size: .75rem;
$v-cal-days-head-font-weight: bold;
$v-cal-days-head-bg: #F5F6FA !default;
$v-cal-days-head-border-color: #EAF0F4 !default;
$v-cal-days-head-color: #A3A6B4 !default;
$v-cal-days-head-font-size: .75rem !default;
$v-cal-days-head-font-weight: bold !default;

// Days - Month
$v-cal-day-border-color: #EAF0F4;
$v-cal-day-number-font-size: .75rem;
$v-cal-day-number-padding: 10px;
$v-cal-day-month-height: 140px;
// Days
$v-cal-day-bg: $white !default;
$v-cal-day-border-color: #EAF0F4 !default;

$v-cal-day-month-bg: $white;
$v-cal-day-month-hover-bg: #fcfcfc;
$v-cal-day-diff-month-color: rgba(67, 66, 93, .3) !default;

// Days
$v-cal-day-color: #43425D;
$v-cal-day-diff-month-color: rgba(67, 66, 93, .3);
$v-cal-day-today-bg: #F5F6FA !default;

$v-cal-day-today-bg: #F5F6FA;
$v-cal-day-disabled-bg: #f0f0f0 !default;
$v-cal-day-disabled-color: #b0b0b0 !default;

$v-cal-day-disabled-bg: #f0f0f0;
$v-cal-day-disabled-color: #b0b0b0;
// Days - Month
$v-cal-day-number-font-size: .75rem !default;
$v-cal-day-number-padding: 10px !default;
$v-cal-day-month-height: 140px !default;

$v-cal-times-font-size: .8125rem;
$v-cal-times-border-color: #EAF0F4;
$v-cal-day-month-hover-bg: #fcfcfc !default;

// Week - Day
$v-cal-time-block-bg: transparent;
$v-cal-time-block-hover-bg: #fcfcfc;
$v-cal-time-block-bg: transparent !default;
$v-cal-time-block-hover-bg: #fcfcfc !default;

// Week - Day times
$v-cal-times-bg: $white !default;
$v-cal-times-font-size: .8125rem !default;
$v-cal-times-border-color: #EAF0F4 !default;

// Events
$v-cal-events-list-padding: 2px;
$v-cal-event-bg: $v-cal-primary;
$v-cal-event-color: $white;
$v-cal-event-border-radius: 4px;
$v-cal-event-bg: $v-cal-primary !default;
$v-cal-event-color: $white !default;
$v-cal-event-border-radius: 4px !default;

$v-cal-event-padding-sides: 14px;
$v-cal-event-padding: 7px $v-cal-event-padding-sides;
Expand All @@ -66,47 +70,48 @@ $v-cal-event-week-padding: 3px 14px;
$v-cal-event-week-font-size: .9rem;

// Time marker
$v-cal-time-marker-color: $v-cal-blue;
$v-cal-time-marker-color: $v-cal-primary !default;

// Buttons
$v-cal-button-bg: $white;
$v-cal-button-shadow: 0 2px 3px rgba(0,0,0,.05);
$v-cal-button-padding: 8px 18px;
$v-cal-button-border-color: $v-cal-light-grey;
$v-cal-button-border-radius: 4px;
$v-cal-button-active-color: $v-cal-primary;
$v-cal-button-hover-color: $v-cal-primary;
$v-cal-button-hover-bg: $v-cal-whitish;
$v-cal-button-disabled-bg: #f0f0f0;
$v-cal-button-disabled-color: #d0d0d0;
$v-cal-button-disabled-cursor: not-allowed;

// Select
$v-cal-select-arrow-color: red;
$v-cal-button-bg: $white !default;
$v-cal-button-shadow: 0 2px 3px rgba(0,0,0,.05) !default;
$v-cal-button-padding: 8px 18px !default;
$v-cal-button-border-color: $v-cal-light-grey !default;
$v-cal-button-border-radius: 4px !default;

// Title
$v-cal-title-font-size: 18px;
$v-cal-button-active-bg: $v-cal-button-bg !default;
$v-cal-button-active-color: $v-cal-primary !default;

$v-cal-button-hover-bg: $v-cal-whitish !default;
$v-cal-button-hover-color: $v-cal-primary !default;

$v-cal-button-disabled-bg: #f0f0f0 !default;
$v-cal-button-disabled-color: #d0d0d0 !default;
$v-cal-button-disabled-cursor: not-allowed !default;

// Dialog

$v-cal-dialog-bg: rgba(0,0,0,.3);
$v-cal-dialog-shadow: 0 0 6px rgba(0,0,0,.4);
$v-cal-dialog-card-bg: $white;
$v-cal-dialog-bg: rgba(0,0,0,.3) !default;
$v-cal-dialog-card-bg: $white !default;
$v-cal-dialog-card-max-width: 500px !default;
$v-cal-dialog-shadow: 0 0 6px rgba(0,0,0,.4) !default;

$v-cal-dialog-header-padding: 20px !default;
$v-cal-dialog-header-border-color: #EAF0F4 !default;

$v-cal-dialog-header-padding: 20px;
$v-cal-dialog-header-border-color: #EAF0F4;
$v-cal-dialog-title-font-size: 13px !default;

$v-cal-dialog-body-padding: 20px;
$v-cal-dialog-close-width: 18px !default;
$v-cal-dialog-close-color: #BCBCCB !default;

$v-cal-field-border-radius: 4px;
$v-cal-field-padding: 10px 12px;
$v-cal-dialog-body-padding: 20px !default;

$v-cal-field-idle-border-color: #E8E9EC;
$v-cal-field-hover-border-color: #808495;
$v-cal-field-active-border-color: $v-cal-primary;
$v-cal-field-border-radius: 4px !default;
$v-cal-field-padding: 10px 12px !default;

$v-cal-dialog-footer-padding: 20px;
$v-cal-dialog-footer-border-color: #EAF0F4;
$v-cal-field-idle-border-color: #E8E9EC !default;
$v-cal-field-hover-border-color: #808495 !default;
$v-cal-field-active-border-color: $v-cal-primary !default;

$v-cal-dialog-close-width: 18px;
$v-cal-dialog-close-color: #BCBCCB;
$v-cal-dialog-footer-padding: 20px !default;
$v-cal-dialog-footer-border-color: #EAF0F4 !default;
13 changes: 8 additions & 5 deletions scss/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
}

&.v-cal-button--is-active {
background-color: $v-cal-button-active-bg;
color: $v-cal-button-active-color;
}

Expand Down Expand Up @@ -97,10 +98,6 @@
display: flex;
}

//.v-cal-event-list {
// padding: $v-cal-events-list-padding;
//}

.v-cal-event-item {
@include unselectable;
position: relative;
Expand Down Expand Up @@ -147,6 +144,11 @@
&.v-cal-content--month,
&.v-cal-content--week,
&.v-cal-content--day {

.v-cal-days .v-cal-day {
background: $v-cal-day-bg;
}

.v-cal-weekdays {
background-color: $v-cal-days-head-bg;
color: $v-cal-days-head-color;
Expand Down Expand Up @@ -181,7 +183,6 @@
text-align: right;
min-height: $v-cal-day-month-height;
padding-bottom: 2px;
background-color: $v-cal-day-month-bg;

&.v-cal-day--month {
overflow: hidden;
Expand Down Expand Up @@ -217,6 +218,7 @@

&.v-cal-content--month .v-cal-day,
&.v-cal-content--week .v-cal-day {

&.is-disabled {
background-color: $v-cal-day-disabled-bg;
color: $v-cal-day-disabled-color;
Expand All @@ -233,6 +235,7 @@

&.v-cal-content--week .v-cal-times,
&.v-cal-content--day .v-cal-times {
background: $v-cal-times-bg;
font-size: $v-cal-times-font-size;
font-weight: normal;
border-right: 1px solid $v-cal-times-border-color;
Expand Down

0 comments on commit 26061cf

Please sign in to comment.