Skip to content

Commit 7e94186

Browse files
UnderlineWordsUnderlineWords
committed
updated core files for v1.8.0
1 parent 960b9bd commit 7e94186

File tree

10 files changed

+181
-114
lines changed

10 files changed

+181
-114
lines changed

‎src/Components/Card/Card.scss‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,18 @@ PUNICA CSS > COMPONENTS : CARD ***********************/
2424
}
2525
.#{$card-name} {
2626
background: $card-bg;
27-
border: $main-border-width $main-border-style $main-border-color;
28-
border-radius: $main-border-radius;
29-
@include shadow();
27+
28+
// has card border?
29+
@if $has-card-border {
30+
border: $main-border-width $main-border-style $main-border-color;
31+
border-radius: $main-border-radius;
32+
}
33+
34+
// has card shadow?
35+
@if $has-card-shadow {
36+
@include shadow();
37+
}
38+
3039
display: flex;
3140
flex-direction: column;
3241
width: $card-default-width; // for only a single card

‎src/Components/Card/variables.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
/*****************************************************
22
PUNICA CSS > COMPONENTS : CARD > VARIABLES ***********/
33

4+
/*****************************************************
5+
STYLE OPTIONS ****************************************/
6+
$has-card-shadow : true;
7+
$has-card-border : true;
8+
49
/*****************************************************
510
CLASS NAMING *****************************************/
611
$card-name : 'card';

‎src/Components/Panel/Panel.scss‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,18 @@ PUNICA CSS > COMPONENTS : PANEL **********************/
77
.#{$panel-name} {
88
display: flex;
99
flex-direction: column;
10-
border: $panel-border-width $panel-border-style $panel-border-color;
11-
border-radius: $panel-border-radius;
12-
@include shadow();
10+
11+
// has panel border?
12+
@if $has-panel-border {
13+
border: $panel-border-width $panel-border-style $panel-border-color;
14+
border-radius: $panel-border-radius;
15+
}
16+
17+
// has panel shadow?
18+
@if $has-panel-shadow {
19+
@include shadow();
20+
}
21+
1322
background: $main-bg;
1423
margin: $panel-margin;
1524
&>.#{$panel-header},

‎src/Components/Panel/variables.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
/*****************************************************
22
PUNICA CSS > COMPONENT : PANEL > VARIABLES ***********/
33

4+
/*****************************************************
5+
STYLE OPTIONS ****************************************/
6+
$has-panel-shadow : true;
7+
$has-panel-border : true;
8+
49
/*****************************************************
510
CLASS NAMING *****************************************/
611
$panel-name : 'panel';
@@ -24,7 +29,7 @@ $panel-border-style : $main-border-style;
2429
/* Header & Title */
2530
$panel-title-font-size : 1.185rem;
2631
$panel-title-font-weight : 900;
27-
$panel-title-bottom-border : 1px $panel-border-style $panel-border-color;
32+
$panel-title-bottom-border : $panel-border-width $panel-border-style $panel-border-color;
2833
$panel-title-padding : 12px $panel-padding;
2934
/* Headline */
3035
$panel-headline-font-size : 1.39em;
@@ -34,5 +39,5 @@ $panel-headline-color : darken($main-font-color, 16%);
3439
$panel-headline-letter-spacing : -.0158em;
3540
/* Bottom */
3641
$panel-bottom-min-height : 50px;
37-
$panel-bottom-border : 1px $panel-border-style $panel-border-color;
42+
$panel-bottom-border : $panel-border-width $panel-border-style $panel-border-color;
3843
$panel-bottom-padding : 6px;

‎src/Components/Process/Process.scss‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,16 @@ PUNICA CSS > COMPONENTS : PROCESS ********************/
9090
}
9191
}
9292
}
93-
&.#{$process-vertical} {
94-
@include process-vertical();
95-
}
96-
@include breakpoints($breakpoints-medium, 'max-width') {
97-
@include process-vertical();
93+
//
94+
// VERTICAL PROCESS
95+
//
96+
@if $components-process-vertical {
97+
&.#{$process-vertical} {
98+
@include process-vertical();
99+
}
100+
@include breakpoints($breakpoints-medium, 'max-width') {
101+
@include process-vertical();
102+
}
98103
}
99104
}
100105
}

‎src/Elements/Button/Button.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -329,13 +329,24 @@ PUNICA CSS > ELEMENTS : BUTTON ***********************/
329329
left: auto !important;
330330
}
331331
}
332+
// dropdown hover (default)
332333
&.#{$menu-item-active} > .#{$menu-name},
333334
&>.#{$dropdown-toggle}:focus + .#{$menu-name},
334335
&>.#{$dropdown-toggle}:hover + .#{$menu-name},
335336
&>.#{$menu-name}:focus,
336337
&>.#{$menu-name}:hover {
337338
display: block;
338339
}
340+
// clickable dropdown
341+
&.#{$dropdown-click} {
342+
&>.#{$dropdown-toggle}:hover + .#{$menu-name} {
343+
display: none;
344+
}
345+
&>.#{$dropdown-toggle}:focus ~ .#{$menu-name},
346+
&>.#{$dropdown-toggle}:active ~ .#{$menu-name} {
347+
display: block;
348+
}
349+
}
339350
//
340351
// BUTTON GROUPS
341352
//

‎src/Elements/Button/variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $dropdown-left : 'left';
2222
$dropdown-top : 'top';
2323
$dropdown-bottom : 'bottom';
2424
$dropdown-toggle : 'toggle';
25-
//$menu-secondary : 'secondary';
25+
$dropdown-click : 'clickable';
2626

2727
/*****************************************************
2828
PREFERENCES ******************************************/

‎src/Elements/Form/Form.scss‎

Lines changed: 117 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,15 @@ PUNICA CSS > ELEMENTS : FORM *************************/
2626
outline-offset: -$form-outline-width;
2727
transition: .35s;
2828
}
29-
@each $style-name, $style-color in $form-input-styles {
30-
&.#{$style-name} {
31-
color: $style-color;
32-
outline-color: $style-color;
29+
//
30+
// VALIDATION STYLES
31+
//
32+
@if $elements-form-validation-styles {
33+
@each $style-name, $style-color in $form-input-styles {
34+
&.#{$style-name} {
35+
color: $style-color;
36+
outline-color: $style-color;
37+
}
3338
}
3439
}
3540
};
@@ -94,36 +99,40 @@ PUNICA CSS > ELEMENTS : FORM *************************/
9499
height: 100%;
95100
cursor: default;
96101
}
97-
// form group
98-
@at-root .#{$form-name} .#{$form-group},
99-
&>.#{$form-group} {
100-
display: flex;
101-
width: 100%;
102-
>* {
103-
flex: 1 1 auto;
104-
&:last-child {
105-
margin-left: -1px;
102+
//
103+
// FORM GROUPS
104+
//
105+
@if $elements-form-group {
106+
@at-root .#{$form-name} .#{$form-group},
107+
&>.#{$form-group} {
108+
display: flex;
109+
width: 100%;
110+
>* {
111+
flex: 1 1 auto;
112+
&:last-child {
113+
margin-left: -1px;
114+
}
115+
&:not(:first-child):not(:last-child) {
116+
margin-left: -1px;
117+
margin-right: 0;
118+
}
106119
}
107-
&:not(:first-child):not(:last-child) {
108-
margin-left: -1px;
109-
margin-right: 0;
120+
>.#{$button-class-group} {
121+
box-shadow: none;
110122
}
111-
}
112-
>.#{$button-class-group} {
113-
box-shadow: none;
114-
}
115-
>.#{$button-class} {
116-
height: $form-input-height;
117-
font-size: $button-font-size;
118-
padding: $button-padding;
119-
font-weight: $button-font-weight;
120-
&:first-child {
121-
border-bottom-right-radius: 0;
122-
border-top-right-radius: 0;
123-
}
124-
&:last-child:not(:first-child) {
125-
border-bottom-left-radius: 0;
126-
border-top-left-radius: 0;
123+
>.#{$button-class} {
124+
height: $form-input-height;
125+
font-size: $button-font-size;
126+
padding: $button-padding;
127+
font-weight: $button-font-weight;
128+
&:first-child {
129+
border-bottom-right-radius: 0;
130+
border-top-right-radius: 0;
131+
}
132+
&:last-child:not(:first-child) {
133+
border-bottom-left-radius: 0;
134+
border-top-left-radius: 0;
135+
}
127136
}
128137
}
129138
}
@@ -150,79 +159,88 @@ PUNICA CSS > ELEMENTS : FORM *************************/
150159
}
151160
}
152161
}
153-
// input sizes
154-
@each $size-name, $font-size, $input-height, $button-padding, $button-font-size in $form-input-sizes {
155-
&.#{$size-name} {
156-
@include form-inputs() {
157-
height: $input-height;
158-
font-size: $font-size;
159-
}
160-
.#{$button-class} {
161-
height: $input-height !important;
162-
font-size: $button-font-size !important;
163-
padding: $button-padding !important;
164-
}
165-
@at-root .#{$form-name}.#{$size-name} label,
166-
&>.#{$form-items}>.#{$form-item}>label,
167-
&>.#{$form-item}>label {
168-
font-size: $font-size;
162+
//
163+
// INPUT SIZES
164+
//
165+
@if $elements-form-input-sizes {
166+
@each $size-name, $font-size, $input-height, $button-padding, $button-font-size in $form-input-sizes {
167+
&.#{$size-name} {
168+
@include form-inputs() {
169+
height: $input-height;
170+
font-size: $font-size;
171+
}
172+
.#{$button-class} {
173+
height: $input-height !important;
174+
font-size: $button-font-size !important;
175+
padding: $button-padding !important;
176+
}
177+
@at-root .#{$form-name}.#{$size-name} label,
178+
&>.#{$form-items}>.#{$form-item}>label,
179+
&>.#{$form-item}>label {
180+
font-size: $font-size;
181+
}
169182
}
170183
}
171184
}
172185
}
173-
.#{$form-radio},
174-
.#{$form-checkbox} {
175-
position: relative;
176-
label {
177-
padding: $form-checkbox-label-padding;
178-
cursor: pointer;
179-
user-select: none;
180-
font-weight: 400;
181-
margin: 0;
182-
}
183-
input {
184-
left: 0;
185-
opacity: 0;
186-
position: absolute;
187-
top: 0;
188-
}
189-
input + label::before,
190-
input + label::after {
191-
position: absolute;
192-
transition: opacity 0.11s ease-in-out;
193-
font-family: $form-icon-font-family;
194-
font-style: normal;
195-
font-weight: normal;
196-
text-transform: none;
197-
color: $form-radio-checkbox-color;
198-
font-size: $form-radio-checkbox-size;
199-
top: $form-radio-checkbox-top;
200-
left: $form-radio-checkbox-left;
201-
}
202-
input + label::before {
203-
opacity: 1;
204-
}
205-
input + label::after {
206-
opacity: 0;
207-
}
208-
input:checked + label::after {
209-
opacity: 1;
210-
}
211-
}
212-
.#{$form-checkbox} {
213-
input + label::before {
214-
content: $form-checkbox-before-content;
215-
}
216-
input + label::after {
217-
content: $form-checkbox-after-content;
186+
//
187+
// CHECKBOX & RADIO
188+
//
189+
@if $elements-form-checkbox-radio {
190+
.#{$form-radio},
191+
.#{$form-checkbox} {
192+
position: relative;
193+
label {
194+
padding: $form-checkbox-label-padding;
195+
cursor: pointer;
196+
user-select: none;
197+
font-weight: 400;
198+
margin: 0;
199+
}
200+
input {
201+
left: 0;
202+
opacity: 0;
203+
position: absolute;
204+
top: 0;
205+
}
206+
input + label::before,
207+
input + label::after {
208+
position: absolute;
209+
transition: opacity 0.11s ease-in-out;
210+
font-family: $form-icon-font-family;
211+
font-style: normal;
212+
font-weight: normal;
213+
text-transform: none;
214+
color: $form-radio-checkbox-color;
215+
font-size: $form-radio-checkbox-size;
216+
top: $form-radio-checkbox-top;
217+
left: $form-radio-checkbox-left;
218+
}
219+
input + label::before {
220+
opacity: 1;
221+
}
222+
input + label::after {
223+
opacity: 0;
224+
}
225+
input:checked + label::after {
226+
opacity: 1;
227+
}
218228
}
219-
}
220-
.#{$form-radio} {
221-
input + label::before {
222-
content: $form-radio-before-content;
229+
.#{$form-checkbox} {
230+
input + label::before {
231+
content: $form-checkbox-before-content;
232+
}
233+
input + label::after {
234+
content: $form-checkbox-after-content;
235+
}
223236
}
224-
input + label::after {
225-
content: $form-radio-after-content;
237+
.#{$form-radio} {
238+
input + label::before {
239+
content: $form-radio-before-content;
240+
}
241+
input + label::after {
242+
content: $form-radio-after-content;
243+
}
226244
}
227245
}
228246
}

‎src/Elements/Icon/variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ PUNICA CSS > ELEMENTS : ICON > VARIABLES *************
44
All icons are defined from this file. Please take
55
a look at https://material.io/resources/icons/ for
66
more information. You can also define any other font
7-
library you want from this file.
7+
library you want from here.
88
======================================================/
99
1010
/*****************************************************

0 commit comments

Comments
 (0)