Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d1e3fed

Browse files
xusooxusoo
committed
Refactor coloring styles
And add some more colorfulness to the event form
1 parent 384cb4e commit d1e3fed

File tree

3 files changed

+64
-48
lines changed

3 files changed

+64
-48
lines changed

‎src/components/Event.vue

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<li @click.stop="edit" :class="['event', event.color + '-event']">
2+
<li @click.stop="edit" :class="['event', event.color]">
33
{{ event.description }}
44
</li>
55
</template>
@@ -30,19 +30,8 @@
3030
overflow: hidden;
3131
border-radius: 10px;
3232
33-
&.green-event { color: $green; }
34-
&.blue-event { color: $blue; }
35-
&.purple-event { color: $purple; }
36-
&.pink-event { color: $pink; }
37-
&.orange-event { color: $orange; }
38-
&.yellow-event { color: $yellow; }
39-
40-
&.green-event:hover { background: $green; }
41-
&.blue-event:hover { background: $blue; }
42-
&.purple-event:hover { background: $purple; }
43-
&.pink-event:hover { background: $pink; }
44-
&.orange-event:hover { background: $orange; }
45-
&.yellow-event:hover { background: $yellow; }
33+
@include colorize($property: 'color');
34+
@include colorize($property: 'background', $status: ':hover');
4635
4736
&:hover {
4837
color: white;

‎src/components/EventForm.vue

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
<div>
33
<div id="event-form-mask" @click="close" v-show="active"></div>
44
<div id="event-form" :class="{ active }" :style="{ left, top }">
5-
<h4>{{ isNew() ? 'Add event' : 'Edit event' }}</h4>
5+
<h4 :class="selectedColor">{{ isNew() ? 'Add event' : 'Edit event' }}</h4>
66
<p v-if="event.date">{{ event.date.format('dddd, MMM Do') }}</p>
77
<div class="text">
8-
<input v-focus placeholder="e.g. Important meeting" type="text" v-model="description" @keypress.enter="saveEvent">
8+
<input v-focus placeholder="e.g. Important meeting" type="text" :class="selectedColor" v-model="description" @keypress.enter="saveEvent">
99
</div>
1010
<div class="event-colors">
1111
<div :class="[color, color === selectedColor ? 'selected' : '' ]" v-for="color in colors" @click="selectColor(color)"></div>
1212
</div>
1313
<div class="buttons">
14-
<button @click="deleteEvent" class="btn-danger" v-if="!isNew()">Delete</button>
15-
<button @click="saveEvent">{{ isNew() ? 'Create' : 'Save' }}</button>
14+
<button @click="deleteEvent" class="delete-btn" v-if="!isNew()">Delete</button>
15+
<button @click="saveEvent" :class="selectedColor">{{ isNew() ? 'Create' : 'Save' }}</button>
1616
</div>
1717
<div id="close-button" @click="close">&times;</div>
1818
</div>
@@ -117,6 +117,8 @@
117117
color: $dusty-gray;
118118
font-weight: normal;
119119
font-size: 1.15rem;
120+
121+
@include colorize($property: 'color');
120122
}
121123
122124
p {
@@ -132,35 +134,26 @@
132134
width: calc(100% - 0.75rem);
133135
padding: 0.25rem;
134136
font-size: 0.75rem;
137+
border: 1px solid lightgray;
138+
139+
@include colorize($property: 'border-color');
140+
141+
&:focus {
142+
outline: none;
143+
}
135144
}
136145
margin-bottom: 0.75rem;
137146
}
138147
.buttons {
139148
text-align: right;
149+
140150
button {
141-
$button-col: $pickled-bluewood;
142-
padding: 0.3rem 0.5rem;
143-
background-color: $button-col;
144-
border: 1px solid darken($button-col, 5%);
145-
font-weight: bold;
146-
border-radius: 2px;
147-
color: white;
148-
cursor: pointer;
149-
&:focus {
150-
outline: none;
151-
}
152-
&:hover {
153-
background-color: lighten($button-col, 4%);
154-
border: 1px solid $button-col;
155-
}
156-
&.btn-danger {
157-
$button-col: crimson;
158-
background-color: $button-col;
159-
border: 1px solid darken($button-col, 5%);
160-
&:hover {
161-
background-color: lighten($button-col, 4%);
162-
border: 1px solid $button-col;
163-
}
151+
@include button;
152+
153+
&.delete-btn {
154+
color: crimson;
155+
background: white;
156+
border: 1px solid transparent;
164157
}
165158
}
166159
}
@@ -179,12 +172,7 @@
179172
margin: 0 1px;
180173
}
181174
182-
&.green { background: $green; }
183-
&.blue { background: $blue; }
184-
&.purple { background: $purple; }
185-
&.pink { background: $pink; }
186-
&.orange { background: $orange; }
187-
&.yellow { background: $yellow; }
175+
@include colorize($property: 'background');
188176
}
189177
190178
#close-button {

‎src/style/variables.scss

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,43 @@ $calendar-border: 1px solid $alto;
2424
@mixin calendar-cell {
2525
width: 100%;
2626
padding: 0.5rem;
27-
}
27+
}
28+
29+
@mixin color-button($color) {
30+
background-color: $color;
31+
border: 1px solid darken($color, 5%);
32+
33+
&:hover {
34+
background-color: lighten($color, 4%);
35+
border: 1px solid $color;
36+
}
37+
}
38+
39+
@mixin button {
40+
padding: 0.3rem 0.5rem;
41+
font-weight: bold;
42+
border-radius: 2px;
43+
color: white;
44+
cursor: pointer;
45+
46+
&.green { @include color-button($green); }
47+
&.blue { @include color-button($blue); }
48+
&.purple { @include color-button($purple); }
49+
&.pink { @include color-button($pink); }
50+
&.orange { @include color-button($orange); }
51+
&.yellow { @include color-button($yellow); }
52+
53+
&:focus {
54+
outline: none;
55+
}
56+
}
57+
58+
59+
@mixin colorize($property, $status: '') {
60+
&.green#{$status} { #{$property}: $green; }
61+
&.blue#{$status} { #{$property}: $blue; }
62+
&.purple#{$status} { #{$property}: $purple; }
63+
&.pink#{$status} { #{$property}: $pink; }
64+
&.orange#{$status} { #{$property}: $orange; }
65+
&.yellow#{$status} { #{$property}: $yellow; }
66+
}

0 commit comments

Comments
 (0)