Skip to content

Commit e2e405b

Browse files
UnderlineWordsUnderlineWords
committed
updated button element
1 parent 0b977bf commit e2e405b

File tree

3 files changed

+131
-37
lines changed

3 files changed

+131
-37
lines changed

‎src/Elements/Button/Button.scss‎

Lines changed: 92 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,6 @@ PUNICA CSS > ELEMENTS : BUTTON ***********************/
148148
display: flex;
149149
.#{$button-class} {
150150
flex: 1 0 0;
151-
flex-flow: column;
152151
}
153152
}
154153
.#{$button-class-inactive} {
@@ -203,6 +202,52 @@ PUNICA CSS > ELEMENTS : BUTTON ***********************/
203202
//button-class-group
204203
box-shadow: none;
205204
}
205+
//
206+
// VERTICAL BUTTONS
207+
//
208+
@if $elements-button-group-vertical {
209+
&.#{$button-class-group-vertical} {
210+
flex-flow: column;
211+
>.#{$button-class},
212+
&.#{$button-class-block},
213+
&.#{$button-class-block} > .#{$button-class},
214+
&>.#{$dropdown-name} >.#{$button-class} {
215+
width: 100%;
216+
}
217+
>.#{$button-class} {
218+
border-radius: 0;
219+
&:last-child:not(:first-child),
220+
&:not(:first-child):not(:last-child) {
221+
margin: -$button-border-width 0 0;
222+
}
223+
}
224+
&.#{$button-class-block} {
225+
display: inline-flex;
226+
}
227+
//
228+
// DROPDOWN FOR VERTICAL BUTTONS
229+
//
230+
@if $elements-button-dropdown {
231+
&>.#{$dropdown-name}:last-child:not(:first-child),
232+
&>.#{$dropdown-name}:last-child:not(:first-child) > .#{$button-class},
233+
&>.#{$dropdown-name}:not(:first-child):not(:last-child) > .#{$button-class} {
234+
margin: -$button-border-width 0 0;
235+
border-radius: 0;
236+
}
237+
}
238+
//
239+
// STYLES
240+
//
241+
@if $elements-button-styles {
242+
@each $theme-name, $theme-color in $button-styles {
243+
&>.#{$theme-name}.#{$button-class},
244+
&>.#{$dropdown-name} > .#{$theme-name}.#{$button-class} {
245+
border: $button-border-width solid darken($theme-color, 6%);
246+
}
247+
}
248+
}
249+
}
250+
}
206251
}
207252
}
208253
//
@@ -221,25 +266,70 @@ PUNICA CSS > ELEMENTS : BUTTON ***********************/
221266
position: absolute;
222267
top: 100%;
223268
z-index: $menu-z-index + 1;
269+
width: auto;
224270
&>.#{$menu-item} {
225271
& > a {
226272
padding: .1rem $menu-padding;
227273
}
228274
}
229275
}
276+
&.#{$dropdown-right},
277+
&.#{$dropdown-left} {
278+
&>.#{$menu-name} {
279+
top: 0;
280+
}
281+
}
230282
&.#{$dropdown-right} {
283+
&>.#{$menu-name} {
284+
left: 100%;
285+
right: auto;
286+
}
287+
}
288+
&.#{$dropdown-left} {
231289
&>.#{$menu-name} {
232290
left: auto;
233-
right: 0;
291+
right: 100%;
292+
}
293+
}
294+
&.#{$dropdown-top}.#{$dropdown-left} {
295+
&>.#{$menu-name} {
296+
right: auto !important;
297+
left: 0 !important;
298+
}
299+
}
300+
&.#{$dropdown-top}.#{$dropdown-right} {
301+
&>.#{$menu-name} {
302+
right: 0 !important;
303+
left: auto !important;
234304
}
235305
}
236306
&.#{$dropdown-top} {
237307
&>.#{$menu-name} {
238308
bottom: 100%;
239309
top: auto;
310+
right: 0;
311+
left: auto;
240312
@include shadow(0, -3px, 10px, rgba(0, 0, 0, 0.15));
241313
}
242314
}
315+
&.#{$dropdown-bottom}.#{$dropdown-left},
316+
&.#{$dropdown-bottom}.#{$dropdown-right} {
317+
&>.#{$menu-name} {
318+
top: 100%;
319+
}
320+
}
321+
&.#{$dropdown-bottom}.#{$dropdown-left} {
322+
&>.#{$menu-name} {
323+
right: auto !important;
324+
left: 0 !important;
325+
}
326+
}
327+
&.#{$dropdown-bottom}.#{$dropdown-right} {
328+
&>.#{$menu-name} {
329+
right: 0 !important;
330+
left: auto !important;
331+
}
332+
}
243333
&.#{$menu-item-active} > .#{$menu-name},
244334
&>.#{$dropdown-toggle}:focus + .#{$menu-name},
245335
&>.#{$dropdown-toggle}:hover + .#{$menu-name},

‎src/Elements/Button/variables.scss‎

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,58 @@ PUNICA CSS > ELEMENTS : BUTTON > VARIABLES ***********/
33

44
/*****************************************************
55
CLASS NAMING *****************************************/
6-
$button-class : 'button';
6+
$button-class : 'button';
77
/* Static Button Styles */
8-
$button-class-link : 'link';
9-
$button-secondary : 'secondary';
8+
$button-class-link : 'link';
9+
$button-secondary : 'secondary';
1010
/* State of Active & Disabled */
11-
$button-class-active : 'active';
12-
$button-class-disabled : 'disabled';
13-
$button-class-inactive : 'inactive';
14-
$button-class-block : 'block';
15-
$button-class-group : 'buttons';
16-
$button-class-invert : 'invert';
11+
$button-class-active : 'active';
12+
$button-class-disabled : 'disabled';
13+
$button-class-inactive : 'inactive';
14+
$button-class-block : 'block';
15+
$button-class-group : 'buttons';
16+
$button-class-group-vertical : 'vertical';
17+
$button-class-invert : 'invert';
1718
/* Dropdown */
18-
$dropdown-name : 'dropdown';
19-
$dropdown-right : 'right';
20-
$dropdown-top : 'top';
21-
$dropdown-toggle : 'toggle';
22-
$menu-secondary : 'secondary';
19+
$dropdown-name : 'dropdown';
20+
$dropdown-right : 'right';
21+
$dropdown-left : 'left';
22+
$dropdown-top : 'top';
23+
$dropdown-bottom : 'bottom';
24+
$dropdown-toggle : 'toggle';
25+
$menu-secondary : 'secondary';
2326

2427
/*****************************************************
2528
PREFERENCES ******************************************/
2629
/* Text & Font Size */
27-
$button-font-family : $main-font-family;
28-
$button-font-size : 1em;
30+
$button-font-family : $main-font-family;
31+
$button-font-size : 1em;
2932
/* Color & Background */
30-
$button-bg-color : #fff;
31-
$button-text-color : $main-font-color;
32-
$button-bg-hover : $main-hovered-bg;
33-
$button-hover-text-color : $button-text-color;
34-
$button-bg-active : $main-secondary-bg;
33+
$button-bg-color : #fff;
34+
$button-text-color : $main-font-color;
35+
$button-bg-hover : $main-hovered-bg;
36+
$button-hover-text-color : $button-text-color;
37+
$button-bg-active : $main-secondary-bg;
3538
/* Shadow */
36-
$button-text-shadow : 0 1px 1px #fff;
37-
$button-shadow : none;
39+
$button-text-shadow : 0 1px 1px #fff;
40+
$button-shadow : none;
3841
/* Bg Image */
39-
$button-bg-image : none;
40-
$button-bg-hover-image : none;
42+
$button-bg-image : none;
43+
$button-bg-hover-image : none;
4144
/* Button Icon */
42-
$button-icon-color : $button-text-color;
43-
$button-icon-shadow : none;
45+
$button-icon-color : $button-text-color;
46+
$button-icon-shadow : none;
4447
/* Line Height & Weight */
45-
$button-line-height : 1;
46-
$button-font-weight : 700; // default button
48+
$button-line-height : 1;
49+
$button-font-weight : 700; // default button
4750
/* Border */
48-
$button-border-width : 1px;
49-
$button-border-color : #ccc;
50-
$button-border-radius : 3px;
51-
$button-group-border-radius : $button-border-radius;
51+
$button-border-width : 1px;
52+
$button-border-color : #ccc;
53+
$button-border-radius : 3px;
54+
$button-group-border-radius : $button-border-radius;
5255
/* Padding */
53-
$button-padding : .935rem 1.6rem;
54-
$button-padding-inactive : .45rem !important;
56+
$button-padding : .935rem 1.6rem;
57+
$button-padding-inactive : .45rem !important;
5558
/* Secondary Button */
5659
$button-secondary-text-color : $main-font-color;
5760
$button-secondary-hover-color : $main-font-color;

‎src/punica.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ ELEMENTS *********************************************/
8383
/* Button ===========================================*/
8484
$elements-button : true;
8585
/**/$elements-button-group : true;
86+
/**/$elements-button-group-vertical : true;
8687
/**/$elements-button-styles : true;
8788
/**/$elements-button-sizes : true;
8889
/**/$elements-button-secondary : true;

0 commit comments

Comments
 (0)