Skip to content

Commit 0f77125

Browse files
Se-GlSe-Gl
committed
refactpred shadowColor mixin, added new shadow colors
1 parent bb3aa26 commit 0f77125

5 files changed

Lines changed: 78 additions & 28 deletions

File tree

‎samples/index.html‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -176,13 +176,9 @@ <h3 class="text-30 font-bold text-gray">Test title</h3>
176176
<div class="flex-2 w-25rem bg-purple-6">third</div>
177177
</div> -->
178178
<div class="h-75vh"></div>
179-
<section class="from-red to-orange gradient-to-top flex min-h-100vh">
180-
<div class="m-auto">
181-
<h1 class="max-w-60rem font-800 text-80px text-black sm:text-purple sm:text-40px md:text-red md:text-60px">
182-
A classy way to write CSS design
183-
</h1>
184-
</div>
185-
</section>
179+
<div class="h-100px w-100px shadow-blue bg-green my-50px">test</div>
180+
<div class="h-100px w-100px shadow-small-blue bg-green my-50px">test</div>
181+
<div class="h-100px w-100px shadow-large-blue bg-green my-50px">test</div>
186182

187183
<button
188184
class="transition-delay-500ms outline-none bg-blue hover:bg-blue-5 active:bg-blue-3 focus:bg-blue-7 py-20px px-40px text-white text-15px font-900 rounded-50px transition-all transition-duration-500ms">

‎scss/abstracts/mixins/effects/_mixin.scss‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,39 @@
11
@use 'sass:math';
22
@use '../../variables/color/variables' as *;
33

4-
@mixin shadowColor($bp: '', $firstnumber, $secondnumber, $loop, $selector: hover) {
4+
@mixin shadowColor($bp: '', $firstnumber, $secondnumber, $loop, $x: 10px, $y: 10px, $z: 20px, $blur: -2.5px) {
55
@each $key, $val in $loop {
66
$shadowSize: 10px 10px 20px -2.5px;
77

88
@for $i from $firstnumber through $secondnumber {
99
.#{$bp}#{$key} {
10-
box-shadow: $shadowSize $val;
10+
box-shadow: $x $y $z $blur $val;
11+
-webkit-box-shadow: $x $y $z $blur $val;
12+
-moz-box-shadow: $x $y $z $blur $val;
13+
-ms-box-shadow: $x $y $z $blur $val;
1114
}
12-
.#{$selector}\:#{$bp}#{$key} {
13-
&:#{$selector} {
14-
box-shadow: $shadowSize $val;
15+
.active\:#{$bp}#{$key} {
16+
&:active {
17+
box-shadow: $x $y $z $blur $val;
18+
-webkit-box-shadow: $x $y $z $blur $val;
19+
-moz-box-shadow: $x $y $z $blur $val;
20+
-ms-box-shadow: $x $y $z $blur $val;
21+
}
22+
}
23+
.focus\:#{$bp}#{$key} {
24+
&:focus {
25+
box-shadow: $x $y $z $blur $val;
26+
-webkit-box-shadow: $x $y $z $blur $val;
27+
-moz-box-shadow: $x $y $z $blur $val;
28+
-ms-box-shadow: $x $y $z $blur $val;
29+
}
30+
}
31+
.hover\:#{$bp}#{$key} {
32+
&:hover {
33+
box-shadow: $x $y $z $blur $val;
34+
-webkit-box-shadow: $x $y $z $blur $val;
35+
-moz-box-shadow: $x $y $z $blur $val;
36+
-ms-box-shadow: $x $y $z $blur $val;
1537
}
1638
}
1739
}

‎scss/classes/effects/_utilities.scss‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,42 @@
55
@use '../../abstracts/mixins/breakpoints/mixin' as *;
66

77
// file for effects classes - for minified omencss-effects css
8-
@include shadowColor(shadow-, 0, 0, $lightdark, hover);
9-
@include shadowColor(shadow-, 0, 0, $fullcolors, hover);
8+
@include shadowColor(shadow-, 0, 0, $lightdark);
9+
@include shadowColor(shadow-, 0, 0, $fullcolors);
10+
@include shadowColor(shadow-small-, 0, 0, $lightdark, 5px, 5px, 10px, -1px);
11+
@include shadowColor(shadow-small-, 0, 0, $fullcolors, 5px, 5px, 10px, -1px);
12+
@include shadowColor(shadow-large-, 0, 0, $lightdark, 15px, 15px, 30px, -5px);
13+
@include shadowColor(shadow-large-, 0, 0, $fullcolors, 15px, 15px, 30px, -5px);
1014
@include eachValues('', $blendModes);
1115
@include universalMixin(true, true, true, opacity-, opacity, per, 0, 100, 1, 1%);
1216

1317
@include sm {
14-
@include shadowColor(sm\:shadow-, 0, 0, $lightdark, hover);
15-
@include shadowColor(sm\:shadow-, 0, 0, $fullcolors, hover);
18+
@include shadowColor(sm\:shadow-, 0, 0, $lightdark);
19+
@include shadowColor(sm\:shadow-, 0, 0, $fullcolors);
20+
@include shadowColor(sm\:shadow-small-, 0, 0, $lightdark, 5px, 5px, 10px, -1px);
21+
@include shadowColor(sm\:shadow-small-, 0, 0, $fullcolors, 5px, 5px, 10px, -1px);
22+
@include shadowColor(sm\:shadow-large-, 0, 0, $lightdark, 15px, 15px, 30px, -5px);
23+
@include shadowColor(sm\:shadow-large-, 0, 0, $fullcolors, 15px, 15px, 30px, -5px);
1624
@include eachValues(sm\:, $blendModes);
1725
@include universalMixin(true, true, true, sm\:opacity-, opacity, per, 0, 100, 1, 1%);
1826
}
1927
@include md {
20-
@include shadowColor(md\:shadow-, 0, 0, $lightdark, hover);
21-
@include shadowColor(md\:shadow-, 0, 0, $fullcolors, hover);
28+
@include shadowColor(md\:shadow-, 0, 0, $lightdark);
29+
@include shadowColor(md\:shadow-, 0, 0, $fullcolors);
30+
@include shadowColor(md\:shadow-small-, 0, 0, $lightdark, 5px, 5px, 10px, -1px);
31+
@include shadowColor(md\:shadow-small-, 0, 0, $fullcolors, 5px, 5px, 10px, -1px);
32+
@include shadowColor(md\:shadow-large-, 0, 0, $lightdark, 15px, 15px, 30px, -5px);
33+
@include shadowColor(md\:shadow-large-, 0, 0, $fullcolors, 15px, 15px, 30px, -5px);
2234
@include eachValues(md\:, $blendModes);
2335
@include universalMixin(true, true, true, md\:opacity-, opacity, per, 0, 100, 1, 1%);
2436
}
2537
@include lg {
26-
@include shadowColor(lg\:shadow-, 0, 0, $lightdark, hover);
27-
@include shadowColor(lg\:shadow-, 0, 0, $fullcolors, hover);
38+
@include shadowColor(lg\:shadow-, 0, 0, $lightdark);
39+
@include shadowColor(lg\:shadow-, 0, 0, $fullcolors);
40+
@include shadowColor(lg\:shadow-small-, 0, 0, $lightdark, 5px, 5px, 10px, -1px);
41+
@include shadowColor(lg\:shadow-small-, 0, 0, $fullcolors, 5px, 5px, 10px, -1px);
42+
@include shadowColor(lg\:shadow-large-, 0, 0, $lightdark, 15px, 15px, 30px, -5px);
43+
@include shadowColor(lg\:shadow-large-, 0, 0, $fullcolors, 15px, 15px, 30px, -5px);
2844
@include eachValues(lg\:, $blendModes);
2945
@include universalMixin(true, true, true, lg\:opacity-, opacity, per, 0, 100, 1, 1%);
3046
}

‎scss/classes/reusable/_initial.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,8 +163,12 @@
163163
// background
164164
@include eachValues('', $background);
165165
// effects
166-
@include shadowColor(shadow-, 0, 0, $lightdark, hover);
167-
@include shadowColor(shadow-, 0, 0, $fullcolors, hover);
166+
@include shadowColor(shadow-, 0, 0, $lightdark);
167+
@include shadowColor(shadow-, 0, 0, $fullcolors);
168+
@include shadowColor(shadow-small-, 0, 0, $lightdark, 5px, 5px, 10px, -1px);
169+
@include shadowColor(shadow-small-, 0, 0, $fullcolors, 5px, 5px, 10px, -1px);
170+
@include shadowColor(shadow-large-, 0, 0, $lightdark, 15px, 15px, 30px, -5px);
171+
@include shadowColor(shadow-large-, 0, 0, $fullcolors, 15px, 15px, 30px, -5px);
168172
@include eachValues('', $blendModes);
169173
@include universalMixin(true, true, true, opacity-, opacity, per, 0, 100, 1, 1%);
170174
// transforms

‎scss/classes/reusable/_responsive.scss‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,12 @@
152152
// background
153153
@include eachValues(md\:, $background);
154154
// effects
155-
@include shadowColor(sm\:shadow-, 0, 0, $lightdark, hover);
156-
@include shadowColor(sm\:shadow-, 0, 0, $fullcolors, hover);
155+
@include shadowColor(sm\:shadow-, 0, 0, $lightdark);
156+
@include shadowColor(sm\:shadow-, 0, 0, $fullcolors);
157+
@include shadowColor(sm\:shadow-small-, 0, 0, $lightdark, 5px, 5px, 10px, -1px);
158+
@include shadowColor(sm\:shadow-small-, 0, 0, $fullcolors, 5px, 5px, 10px, -1px);
159+
@include shadowColor(sm\:shadow-large-, 0, 0, $lightdark, 15px, 15px, 30px, -5px);
160+
@include shadowColor(sm\:shadow-large-, 0, 0, $fullcolors, 15px, 15px, 30px, -5px);
157161
@include eachValues(sm\:, $blendModes);
158162
@include universalMixin(true, true, true, sm\:opacity-, opacity, per, 0, 100, 1, 1%);
159163
// transforms
@@ -398,8 +402,12 @@
398402
// background
399403
@include eachValues(md\:, $background);
400404
// effects
401-
@include shadowColor(md\:shadow-, 0, 0, $lightdark, hover);
402-
@include shadowColor(md\:shadow-, 0, 0, $fullcolors, hover);
405+
@include shadowColor(md\:shadow-, 0, 0, $lightdark);
406+
@include shadowColor(md\:shadow-, 0, 0, $fullcolors);
407+
@include shadowColor(md\:shadow-small-, 0, 0, $lightdark, 5px, 5px, 10px, -1px);
408+
@include shadowColor(md\:shadow-small-, 0, 0, $fullcolors, 5px, 5px, 10px, -1px);
409+
@include shadowColor(md\:shadow-large-, 0, 0, $lightdark, 15px, 15px, 30px, -5px);
410+
@include shadowColor(md\:shadow-large-, 0, 0, $fullcolors, 15px, 15px, 30px, -5px);
403411
@include eachValues(md\:, $blendModes);
404412
@include universalMixin(true, true, true, md\:opacity-, opacity, per, 0, 100, 1, 1%);
405413
// transforms
@@ -644,8 +652,12 @@
644652
// background
645653
@include eachValues(lg\:, $background);
646654
// effects
647-
@include shadowColor(lg\:shadow-, 0, 0, $lightdark, hover);
648-
@include shadowColor(lg\:shadow-, 0, 0, $fullcolors, hover);
655+
@include shadowColor(lg\:shadow-, 0, 0, $lightdark);
656+
@include shadowColor(lg\:shadow-, 0, 0, $fullcolors);
657+
@include shadowColor(lg\:shadow-small-, 0, 0, $lightdark, 5px, 5px, 10px, -1px);
658+
@include shadowColor(lg\:shadow-small-, 0, 0, $fullcolors, 5px, 5px, 10px, -1px);
659+
@include shadowColor(lg\:shadow-large-, 0, 0, $lightdark, 15px, 15px, 30px, -5px);
660+
@include shadowColor(lg\:shadow-large-, 0, 0, $fullcolors, 15px, 15px, 30px, -5px);
649661
@include eachValues(lg\:, $blendModes);
650662
@include universalMixin(true, true, true, lg\:opacity-, opacity, per, 0, 100, 1, 1%);
651663
// transforms

0 commit comments

Comments
 (0)