Skip to content

Commit 31faef8

Browse files
rbrtsmithrbrtsmith
committed
Add breakpoints and spacing to flag
1 parent ac3846a commit 31faef8

File tree

3 files changed

+76
-9
lines changed

3 files changed

+76
-9
lines changed

‎demo/index.html

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -527,7 +527,7 @@ <h2>Flag</h2>
527527

528528
<h3>Component left</h3>
529529
<div class="c-demo-card u-push-bottom-md">
530-
<div class="o-flag">
530+
<div class="o-flag o-flag--gutter-md">
531531
<div class="o-flag__component">
532532
<img src="assets/nebula.jpg" class="demo-img" alt="">
533533
</div>
@@ -539,7 +539,7 @@ <h3>Component left</h3>
539539

540540
<h3>Component right</h3>
541541
<div class="c-demo-card u-push-bottom-md">
542-
<div class="o-flag o-flag--reverse">
542+
<div class="o-flag o-flag--gutter-md o-flag--reverse">
543543
<div class="o-flag__body">
544544
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
545545
</div>
@@ -549,9 +549,21 @@ <h3>Component right</h3>
549549
</div>
550550
</div>
551551

552+
<h3>With breakpoint</h3>
553+
<div class="c-demo-card u-push-bottom-md">
554+
<div class="o-flag@md o-flag--gutter-md">
555+
<div class="o-flag__component">
556+
<img src="assets/nebula.jpg" class="demo-img" alt="">
557+
</div>
558+
<div class="o-flag__body">
559+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
560+
</div>
561+
</div>
562+
</div>
563+
552564
<h3>Text component</h3>
553565
<div class="c-demo-card u-push-bottom-md">
554-
<div class="o-flag">
566+
<div class="o-flag o-flag--gutter-md">
555567
<div class="o-flag__component o-flag__component--nowrap">
556568
<h2 class="u-flush-bottom">Nebula CSS</h2>
557569
</div>
@@ -563,7 +575,7 @@ <h2 class="u-flush-bottom">Nebula CSS</h2>
563575

564576
<h3>Top aligned</h3>
565577
<div class="c-demo-card u-push-bottom-md">
566-
<div class="o-flag o-flag--top">
578+
<div class="o-flag o-flag--gutter-md o-flag--top">
567579
<div class="o-flag__component">
568580
<img src="assets/nebula.jpg" class="demo-img" alt="">
569581
</div>
@@ -575,7 +587,7 @@ <h3>Top aligned</h3>
575587

576588
<h3>Bottom aligned</h3>
577589
<div class="c-demo-card u-push-bottom-md">
578-
<div class="o-flag o-flag--reverse o-flag--bottom">
590+
<div class="o-flag o-flag--gutter-md o-flag--reverse o-flag--bottom">
579591
<div class="o-flag__body">
580592
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
581593
</div>
@@ -587,9 +599,9 @@ <h3>Bottom aligned</h3>
587599

588600
<h3>Nested</h3>
589601
<div class="c-demo-card u-push-bottom-md">
590-
<div class="o-flag o-flag--reverse">
602+
<div class="o-flag o-flag--gutter-md o-flag--reverse">
591603
<div class="o-flag__body">
592-
<div class="o-flag">
604+
<div class="o-flag o-flag--gutter-md">
593605
<div class="o-flag__component">
594606
<img src="assets/nebula.jpg" class="demo-img" alt="">
595607
</div>

‎nebula-css/_settings.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ $nb-section-spacing: (
2323
md: ($nb-spacing-unit * 2)
2424
) !default;
2525

26+
$nb-flag-gutter-sizes: (
27+
md: $nb-spacing-unit
28+
) !default;
29+
2630
$nb-use-grid-zero-font-size: true !default;
2731
$nb-grid-gutter-sizes: (
2832
sm: ($nb-spacing-unit / 2),

‎nebula-css/objects/_flag.scss

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
.#{$nb-namespace}o-flag {
1+
.#{$nb-namespace}o-flag:not([class^='#{$nb-namespace}o-flag@']) {
22
display: table;
33
width: 100%;
44
}
55

6+
:not([class^='#{$nb-namespace}o-flag@']) > .#{$nb-namespace}o-flag__component,
7+
:not([class^='#{$nb-namespace}o-flag@']) > .#{$nb-namespace}o-flag__body {
8+
display: table-cell;
9+
vertical-align: middle;
10+
}
11+
612
.#{$nb-namespace}o-flag__component,
713
.#{$nb-namespace}o-flag__body {
8-
display: table-cell;
914
vertical-align: middle;
1015
}
1116

@@ -31,3 +36,49 @@
3136
.#{$nb-namespace}o-flag--bottom > .#{$nb-namespace}o-flag__body {
3237
vertical-align: bottom;
3338
}
39+
40+
@each $key, $value in $nb-flag-gutter-sizes {
41+
:not([class^='#{$nb-namespace}o-flag@']).#{$nb-namespace}o-flag--gutter-#{$key}.#{$nb-namespace}o-flag--reverse > .#{$nb-namespace}o-flag__component {
42+
padding-left: $value;
43+
}
44+
45+
:not([class^='#{$nb-namespace}o-flag@']).#{$nb-namespace}o-flag--gutter-#{$key}:not(.#{$nb-namespace}o-flag--reverse) > .#{$nb-namespace}o-flag__component {
46+
padding-right: $value;
47+
}
48+
49+
[class^='#{$nb-namespace}o-flag@'].#{$nb-namespace}o-flag--gutter-#{$key} {
50+
margin-bottom: -$value;
51+
}
52+
53+
[class^='#{$nb-namespace}o-flag@'].#{$nb-namespace}o-flag--gutter-#{$key} > .#{$nb-namespace}o-flag__body,
54+
[class^='#{$nb-namespace}o-flag@'].#{$nb-namespace}o-flag--gutter-#{$key} > .#{$nb-namespace}o-flag__component {
55+
padding-bottom: $value;
56+
}
57+
}
58+
59+
@each $bp-key, $bp-value in $nb-breakpoints {
60+
@include nb-respond-to(#{$bp-key}) {
61+
.#{$nb-namespace}o-flag\@#{$bp-key} {
62+
display: table;
63+
}
64+
65+
.#{$nb-namespace}o-flag\@#{$bp-key} > .#{$nb-namespace}o-flag__body,
66+
.#{$nb-namespace}o-flag\@#{$bp-key} > .#{$nb-namespace}o-flag__component {
67+
display: table-cell;
68+
}
69+
70+
71+
@each $key, $value in $nb-flag-gutter-sizes {
72+
// deep nesting required
73+
/* stylelint-disable max-nesting-depth */
74+
.#{$nb-namespace}o-flag\@#{$bp-key}.#{$nb-namespace}o-flag--gutter-#{$key}.#{$nb-namespace}o-flag--reverse > .#{$nb-namespace}o-flag__component {
75+
padding-left: $nb-spacing-unit;
76+
}
77+
78+
.#{$nb-namespace}o-flag\@#{$bp-key}.#{$nb-namespace}o-flag--gutter-#{$key}:not(.#{$nb-namespace}o-flag--reverse) > .#{$nb-namespace}o-flag__component {
79+
padding-right: $nb-spacing-unit;
80+
}
81+
/* stylelint-enable */
82+
}
83+
}
84+
}

0 commit comments

Comments
 (0)