Skip to content

Commit de4d878

Browse files
UnderlineWordsUnderlineWords
committed
b205
1 parent dd93275 commit de4d878

13 files changed

Lines changed: 211 additions & 121 deletions

File tree

‎src/Core/Global/Getters.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
@function options($keys...)
2525
{
2626
@if length($keys) > 4 {
27-
@warn "[PUNICA] Maximum Nesting Depth is 4.";
27+
@warn "[PUNICA] The Maximum Nesting Depth is Restricted to 4.";
2828
}
2929

3030
@if map.get(option.$options, nth($keys, 1)) == null {
@@ -54,6 +54,10 @@
5454

5555
@if length($keys) > 3 {
5656
$value: map.get($value, nth($keys, 4));
57+
@if $value == null {
58+
@warn "[PUNICA] INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)} > #{nth($keys, 4)}" + ' key is not found or key returns null in the [options.scss] file.';
59+
@return null;
60+
}
5761
}
5862
}
5963

@@ -85,7 +89,7 @@
8589
@return $settings;
8690
}
8791

88-
$settings : map.get($settings, nth($keys, 2));
92+
$settings: map.get($settings, nth($keys, 2));
8993

9094
@if $settings == null {
9195
@warn "[PUNICA] INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.';

‎src/Core/Global/Options.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@
9797
@function set_variable($module, $keys...)
9898
{
9999
@if length($keys) > 4 {
100-
@warn "[PUNICA] Maximum Nesting Depth is 4.";
100+
@warn "[PUNICA] The Maximum Nesting Depth is Restricted to 4.";
101101
}
102102

103103
@if theme($module, nth($keys, 1), nth($keys, 2)) {

‎src/Core/Theme/Getters.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
///
2525
@function theme($node, $keys...)
2626
{
27-
@if list.length($keys) > 4 {
28-
@warn "[PUNICA] Maximum Nesting Depth is 4.";
27+
@if list.length($keys) > 5 {
28+
@warn "[PUNICA] The Maximum Nesting Depth is Restricted to 5.";
2929
}
3030

3131
$value: if(map.has-key($theme-map, $node), map.get($theme-map, $node), null);

‎src/Modules/Components/List/List.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
// .list > .item > i
2727
>img,
2828
>i {
29-
margin-right: components('list', 'media', 'margin-right');
29+
margin-right: components('list', 'item', 'media', 'margin-right');
3030
}
3131
// .list > .item > span
3232
// .list > .item > div
@@ -40,8 +40,8 @@
4040
>.#{class('list', 'body')} {
4141
display : initial;
4242
flex : 1;
43-
line-height: components('list', 'body', 'line-height');
44-
text-align : components('list', 'body', 'text-align');
43+
line-height: components('list', 'item', 'body', 'line-height');
44+
text-align : components('list', 'item', 'body', 'text-align');
4545
// .list > .item > .body > .title
4646
// .list > .item > .body > .subtitle
4747
>.#{class('list', 'title')},
@@ -50,15 +50,15 @@
5050
}
5151
// .list > .item > .body > .title
5252
>.#{class('list', 'title')} {
53-
font-size : components('list', 'title', 'font-size');
54-
font-weight: components('list', 'title', 'font-weight');
55-
line-height: components('list', 'title', 'line-height');
53+
font-size : components('list', 'item', 'title', 'font-size');
54+
font-weight: components('list', 'item', 'title', 'font-weight');
55+
line-height: components('list', 'item', 'title', 'line-height');
5656
}
5757
// .list > .item > .body > .subtitle
5858
>.#{class('list', 'subtitle')} {
59-
font-size : components('list', 'subtitle', 'font-size');
60-
font-weight : components('list', 'subtitle', 'font-weight');
61-
margin-bottom: components('list', 'subtitle', 'margin-bottom');
59+
font-size : components('list', 'item', 'subtitle', 'font-size');
60+
font-weight : components('list', 'item', 'subtitle', 'font-weight');
61+
margin-bottom: components('list', 'item', 'subtitle', 'margin-bottom');
6262
@if theme('type') == 'light' {
6363
color: darken(color.$grey, 20%);
6464
} @else if theme('type') == 'dark' {
@@ -68,8 +68,8 @@
6868
}
6969
// .list > .item > .actions
7070
>.#{class('list', 'actions')} {
71-
width : components('list', 'actions', 'width');
72-
margin-left: components('list', 'actions', 'margin-left');
71+
width : components('list', 'item', 'actions', 'width');
72+
margin-left: components('list', 'item', 'actions', 'margin-left');
7373
}
7474
// .list > .item.active
7575
&.#{class('list', 'active')} {

‎src/Modules/Components/Panel/Panel.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@
4747
border-bottom-style: dotted;
4848
}
4949
>.#{class('panel', 'title')} {
50-
font-size : components('panel', 'title', 'font-size');
51-
font-weight: components('panel', 'title', 'font-weight');
50+
font-size : components('panel', 'header', 'title', 'font-size');
51+
font-weight: components('panel', 'header', 'title', 'font-weight');
5252
}
5353
}
5454
&>.#{class('panel', 'content')} {
@@ -64,7 +64,7 @@
6464
flex : auto;
6565
min-width : 0;
6666
flex-wrap : wrap;
67-
margin-bottom: components('panel', 'media', 'margin-bottom');
67+
margin-bottom: components('panel', 'content', 'media', 'margin-bottom');
6868
@include embedded-media();
6969
img {
7070
display: block;
@@ -79,12 +79,12 @@
7979
}
8080
.#{class('panel', 'headline')},
8181
p.#{class('panel', 'headline')} {
82-
font-size : components('panel', 'headline', 'font-size');
83-
line-height : components('panel', 'headline', 'line-height');
84-
margin-bottom : components('panel', 'headline', 'margin-bottom');
85-
color : components('panel', 'headline', 'color');
86-
letter-spacing: components('panel', 'headline', 'letter-spacing');
87-
text-wrap : components('panel', 'headline', 'text-wrap')
82+
font-size : components('panel', 'content', 'headline', 'font-size');
83+
line-height : components('panel', 'content', 'headline', 'line-height');
84+
margin-bottom : components('panel', 'content', 'headline', 'margin-bottom');
85+
color : components('panel', 'content', 'headline', 'color');
86+
letter-spacing: components('panel', 'content', 'headline', 'letter-spacing');
87+
text-wrap : components('panel', 'content', 'headline', 'text-wrap')
8888
}
8989
}
9090
&>.#{class('panel', 'bottom')} {

‎src/Modules/Components/Process/Process.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
top : 0;
3535
width : 100%;
3636
background: theme('color', 'primary');
37-
height : components('process', 'stepbar', 'height');
37+
height : components('process', 'item', 'stepbar', 'height');
3838
}
3939
a {
4040
color : theme('color', 'text');
@@ -48,24 +48,24 @@
4848
top : 0;
4949
left : 50%;
5050
background: theme('color', 'primary');
51-
height : components('process', 'stickbar', 'height');
52-
width : components('process', 'stickbar', 'width');
51+
height : components('process', 'item', 'stickbar', 'height');
52+
width : components('process', 'item', 'stickbar', 'width');
5353
z-index : 1;
5454
}
5555
&:first-child::before {
56-
left: calc(50% - (#{variables('process', 'stickbar', 'width')} - 1px));
56+
left: calc(50% - (#{variables('process', 'item', 'stickbar', 'width')} - 1px));
5757
}
5858
}
5959
&.#{class('process', 'active')} {
6060
a {
6161
color: theme('color', 'primary');
6262
&::after {
6363
position : absolute;
64-
content : components('process', 'indicator', 'content');
65-
top : calc(-15px - #{components('process', 'indicator', 'font-size')});
66-
left : calc(50% - ((#{components('process', 'stickbar', 'width')} * 10) / 2));
64+
content : components('process', 'item', 'indicator', 'content');
65+
top : calc(-15px - #{components('process', 'item', 'indicator', 'font-size')});
66+
left : calc(50% - ((#{components('process', 'item', 'stickbar', 'width')} * 10) / 2));
6767
color : theme('color', 'primary');
68-
font-size: components('process', 'indicator', 'font-size');
68+
font-size: components('process', 'item', 'indicator', 'font-size');
6969
}
7070
}
7171
&~.#{class('process', 'item')} {

‎src/Modules/Components/Process/mixins.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
border-top: set-border();
6161
}
6262
&:not(:first-child)::before {
63-
width : components('process', 'stickbar', 'width');
63+
width : components('process', 'item', 'stickbar', 'width');
6464
height: 100%;
6565
left : 0;
6666
}
@@ -78,7 +78,7 @@
7878
font-weight: bold;
7979
&::after {
8080
top : 15px;
81-
left: calc(-15px - #{components('process', 'indicator', 'font-size')});
81+
left: calc(-15px - #{components('process', 'item', 'indicator', 'font-size')});
8282
}
8383
}
8484
}

‎src/Modules/Components/Timeline/Timeline.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,12 @@
4141
background-color: color.$grey;
4242
justify-content : center;
4343
flex-shrink : 0;
44-
width : components('timeline', 'type-width');
45-
height : components('timeline', 'type-width');
46-
top : components('timeline', 'type', 'top');
47-
left : -(calc(components('timeline', 'type-width') / 2px) - components('timeline', 'border-width'));
48-
border : components('timeline', 'type', 'border');
49-
border-radius : components('timeline', 'type', 'border-radius');
44+
width : components('timeline', 'item', 'type', 'width');
45+
height : components('timeline', 'item', 'type', 'width');
46+
top : components('timeline', 'item', 'type', 'top');
47+
left : -(calc(components('timeline', 'item', 'type', 'width') / 2px) - components('timeline', 'border-width'));
48+
border : components('timeline', 'item', 'type', 'border');
49+
border-radius : components('timeline', 'item', 'type', 'border-radius');
5050
box-shadow: theme('shadow');
5151
///
5252
/// STYLES
@@ -74,13 +74,13 @@
7474
width : 100%;
7575
}
7676
.#{class('timeline', 'author')} {
77-
font-weight: components('timeline', 'author', 'font-weight');
78-
font-size : components('timeline', 'author', 'font-size');
79-
color : components('timeline', 'author', 'color');
77+
font-weight: components('timeline', 'item', 'author', 'font-weight');
78+
font-size : components('timeline', 'item', 'author', 'font-size');
79+
color : components('timeline', 'item', 'author', 'color');
8080
}
8181
.#{class('timeline', 'date')} {
82-
font-size: components('timeline', 'date', 'font-size');
83-
opacity : components('timeline', 'date', 'opacity');
82+
font-size: components('timeline', 'item', 'date', 'font-size');
83+
opacity : components('timeline', 'item', 'date', 'opacity');
8484
}
8585
///
8686
/// MEDIA

‎src/Modules/Elements/Form/Form.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
padding : elements('form', 'padding');
8080
.#{class('form', 'item')} {
8181
height : elements('form', 'item', 'height');
82-
margin : elements('form', 'item', 'margin');
82+
margin : elements('form', 'item', 'margin-y') elements('form', 'item', 'margin-x');
8383
display : elements('form', 'item', 'display');
8484
flex-wrap : elements('form', 'item', 'flex-wrap');
8585
width : elements('form', 'item', 'width');
@@ -168,7 +168,7 @@
168168
@each $name, $number in elements('form', 'columns') {
169169
.#{$name}.#{class('form', 'items')} {
170170
>.#{class('form', 'item')} {
171-
flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{elements('form', 'items', 'item-spacer')}));
171+
flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{elements('form', 'item', 'margin-x')}));
172172
}
173173
}
174174
@include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') {

‎src/Modules/Utilities/helpers.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@
5151
@include set_sides(utils('margin'));
5252
@include set_utils('object-fit');
5353
@include set_utils('order');
54+
@include set_utils('outline-color', true);
55+
@include set_utils('outline-offset');
56+
@include set_utils('outline-style');
57+
@include set_utils('outline-width');
5458
@include set_utils('overflow', false, true);
5559
@include utils_with_specs(utils('padding'));
5660
@include set_sides(utils('padding'), 'padding');

0 commit comments

Comments
 (0)