Skip to content

Commit f97bce3

Browse files
UnderlineWordsUnderlineWords
committed
updated gradient styles
1 parent 9ac6b62 commit f97bce3

File tree

4 files changed

+88
-53
lines changed

4 files changed

+88
-53
lines changed

‎src/Components/Navbar/Navbar.scss‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,20 @@
9494
outline: theme('input', 'outline-width') solid lighten(theme('color', 'primary'), 26%);
9595
}
9696
}
97+
///
98+
/// DIVIDED NAVBAR
99+
///
100+
@if options('navbar', 'features', 'divided') {
101+
&.#{class('navbar', 'divided')} {
102+
@include mixins.navbar-divided();
103+
.#{class('button', 'group')} {
104+
.#{class('button', 'name')},
105+
.#{class('button', 'dropdown')} .#{class('button', 'name')} {
106+
border: solid darken(theme('color', 'primary'), 7.15%);
107+
}
108+
}
109+
}
110+
}
97111
}
98112
}
99113
&.#{class('navbar', 'fixed')} {
@@ -131,20 +145,6 @@
131145
border-radius: 0;
132146
}
133147
}
134-
///
135-
/// DIVIDED NAVBAR
136-
///
137-
@if options('navbar', 'features', 'divided') {
138-
&.#{class('navbar', 'divided')} {
139-
@include mixins.navbar-divided();
140-
.#{class('button', 'group')} {
141-
.#{class('button', 'name')},
142-
.#{class('button', 'dropdown')} .#{class('button', 'name')} {
143-
border: solid darken(theme('color', 'primary'), 7.15%);
144-
}
145-
}
146-
}
147-
}
148148
.#{class('button', 'name')},
149149
.#{class('button', 'dropdown')} .#{class('button', 'name')} {
150150
font-size: variables('navbar', 'font-size');
@@ -165,11 +165,13 @@
165165
lighten(theme('color', 'primary'), 11.5%) 100%
166166
);
167167
}
168+
/// Gradient Left-To-Right
168169
&.#{class('navbar', 'gradient')}#{'-ltr'} {
169-
background: linear-gradient(135deg, lighten(theme('color', 'primary'), 14.5%), theme('color', 'primary'));
170+
background: linear-gradient(135deg, lighten(theme('color', 'primary'), 7.5%), theme('color', 'primary'));
170171
}
172+
/// Gradient Right-To-Left
171173
&.#{class('navbar', 'gradient')}#{'-rtl'} {
172-
background: linear-gradient(-135deg, lighten(theme('color', 'primary'), 14.5%), theme('color', 'primary'));
174+
background: linear-gradient(-135deg, lighten(theme('color', 'primary'), 7.5%), theme('color', 'primary'));
173175
}
174176
}
175177

‎src/Components/Navbar/mixins.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,11 @@
4040
}
4141
/// Gradient Left-To-Right
4242
&.#{class('navbar', 'gradient')}#{'-ltr'} {
43-
background: linear-gradient(135deg, lighten($bg-color, 23%), $bg-color);
43+
background: linear-gradient(135deg, lighten($bg-color, 9%), $bg-color);
4444
}
4545
/// Gradient Right-To-Left
4646
&.#{class('navbar', 'gradient')}#{'-rtl'} {
47-
background: linear-gradient(-135deg, lighten($bg-color, 23%), $bg-color);
47+
background: linear-gradient(-135deg, lighten($bg-color, 9%), $bg-color);
4848
}
4949
}
5050

@@ -60,19 +60,6 @@
6060
}
6161
}
6262
}
63-
///
64-
/// DIVIDED NAVBAR
65-
///
66-
@if options('navbar', 'features', 'divided') {
67-
&.#{class('navbar', 'divided')} {
68-
.#{class('button', 'group')} {
69-
.#{class('button', 'name')},
70-
.#{class('button', 'dropdown')} .#{class('button', 'name')} {
71-
border: solid $divider-color;
72-
}
73-
}
74-
}
75-
}
7663
.#{class('navbar', 'brand')} {
7764
a,
7865
a:visited {
@@ -92,6 +79,19 @@
9279
outline: theme('input', 'outline-width') solid lighten($input-border-color, 13%);
9380
}
9481
}
82+
///
83+
/// DIVIDED NAVBAR
84+
///
85+
@if options('navbar', 'features', 'divided') {
86+
&.#{class('navbar', 'divided')} {
87+
.#{class('button', 'group')} {
88+
.#{class('button', 'name')},
89+
.#{class('button', 'dropdown')} .#{class('button', 'name')} {
90+
border: solid $divider-color;
91+
}
92+
}
93+
}
94+
}
9595
}
9696
}
9797
}

‎src/Elements/Button/Button.scss‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,26 @@
6161
///
6262
@if options('button', 'features', 'gradient') {
6363
&.#{class('button', 'gradient')} {
64+
z-index: 1;
65+
position: relative;
6466
@include set-gradient(theme('color', 'background'));
65-
&:hover {
67+
&:before {
68+
position: absolute;
69+
content: "";
70+
width: 100%;
71+
height: 100%;
72+
top: 0;
73+
left: 0;
74+
opacity: 0;
75+
transition: opacity 0.25s;
76+
z-index: -1;
6677
@include set-gradient(theme('color', 'background'), to bottom, 23%);
6778
}
68-
&:active,
69-
&:focus {
70-
background: theme('color', 'background');
79+
&:hover::before {
80+
opacity: 1;
81+
}
82+
&:active::before,
83+
&:focus::before {
7184
@include set-gradient(theme('color', 'background'), to bottom, 27%);
7285
}
7386
}

‎src/Elements/Button/mixins.scss‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -312,12 +312,26 @@
312312
@if options('button', 'features', 'gradient') {
313313
&.#{class('button', 'gradient')} {
314314
background: $bg-color;
315+
z-index: 1;
316+
position: relative;
315317
@include set-gradient($bg-color, to top);
316-
&:hover {
318+
&:before {
319+
content: "";
320+
position: absolute;
321+
top: 0;
322+
left: 0;
323+
width: 100%;
324+
height: 100%;
317325
@include set-gradient($bg-color, to bottom, 23%);
326+
opacity: 0;
327+
transition: opacity 0.25s;
328+
z-index: -1;
329+
}
330+
&:hover::before {
331+
opacity: 1;
318332
}
319-
&:active,
320-
&:focus {
333+
&:active::before,
334+
&:focus::before {
321335
background: $bg-color;
322336
@include set-gradient($bg-color, to bottom, 27%);
323337
}
@@ -326,26 +340,32 @@
326340
&.#{class('button', 'gradient')}#{'-ltr'} {
327341
background: linear-gradient(135deg, lighten($bg-color, 26.5%), darken($bg-color, 5%));
328342
}
329-
&.#{class('button', 'gradient')}#{'-ltr'} {
330-
&:hover {
331-
background: linear-gradient(135deg, lighten($bg-color, 32%), darken($bg-color, 2%));
332-
}
333-
&:active,
334-
&:focus {
335-
background: linear-gradient(135deg, lighten($bg-color, 36%), $bg-color);
336-
}
337-
}
338343
/// Gradient Right-To-Left
339344
&.#{class('button', 'gradient')}#{'-rtl'} {
340345
background: linear-gradient(-135deg, lighten($bg-color, 26.5%), darken($bg-color, 5%));
341346
}
347+
&.#{class('button', 'gradient')}#{'-ltr'},
342348
&.#{class('button', 'gradient')}#{'-rtl'} {
343-
&:hover {
344-
background: linear-gradient(-135deg, lighten($bg-color, 32%), darken($bg-color, 2%));
345-
}
346-
&:active,
347-
&:focus {
348-
background: linear-gradient(-135deg, lighten($bg-color, 36%), $bg-color);
349+
z-index: 1;
350+
position: relative;
351+
&:before {
352+
position: absolute;
353+
content: "";
354+
width: 100%;
355+
height: 100%;
356+
top: 0;
357+
left: 0;
358+
opacity: 0;
359+
transition: opacity 0.25s;
360+
z-index: -1;
361+
background: linear-gradient(0deg, lighten($bg-color, 32%), darken($bg-color, 2%));
362+
}
363+
&:hover::before {
364+
opacity: 1;
365+
}
366+
&:active::before,
367+
&:focus::before {
368+
background: linear-gradient(0deg, lighten($bg-color, 36%), $bg-color);
349369
}
350370
}
351371
}

0 commit comments

Comments
 (0)