Skip to content

Commit

Permalink
feat: introduce Margins and Paddings (#2131)
Browse files Browse the repository at this point in the history 
* feat: introduce Margins and Paddings

* add RTL support for margins [ci visual]

* fix Show Code html format visibility [ci visual]

- also add a11y to example with panel header

* workaround for rtl issue

* add note on dir=rtl [ci visual]

* address review comments [ci visual]
  • Loading branch information
@kavya-b
kavya-b committed Feb 19, 2021
1 parent 0e51b35 commit d02b12a
Show file tree
Hide file tree
Showing 8 changed files with 1,816 additions and 0 deletions.
70 changes: 70 additions & 0 deletions .storybook/custom/custom.scss
View file
Expand Up @@ -379,6 +379,10 @@ code.docs-code-grey {
height: 100%;
}

&--border {
border: 2px solid #000000;
}

&--color-1 {
background-color: #30c5d2;
color: white;
Expand Down Expand Up @@ -610,3 +614,69 @@ body.sb-show-main {
height: 20rem;
}
}

.docs-column-flex {
display: flex;
flex-direction: column;

&--align-start {
align-items: flex-start;
}
}

.docs-layout-margins-paddings {
background-color: #3d6299;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
min-height: 4rem;
text-align: center;

&--color-13 {
background-color: #3d6299;
color: white;
border: 2px solid red;
}

&--color-14 {
background-color: #30c5d2;
color: white;
border: 2px solid black;
}

&--secondary-bg {
background-color: #dbdbdb;
display: inline-block;
}

&--padded {
padding: 1.5rem;
}

&--margin {
margin: 1.5rem;
}

// padding+width = actual width, so specifying different widths to show the backgrounds correctly
&--width {
width: 19rem; // for tiny 0.5rem each(horizontal padding)+19rem = 20rem total

&-sm {
width: 18rem; // for tiny 1rem each(horizontal padding)+18rem = 20rem total
}

&-md {
width: 16rem; // for tiny 2rem each(horizontal padding)+16rem = 20rem total
}

&-lg {
width: 14rem; // for tiny 3rem each(horizontal padding)+14rem = 20rem total
}
}
}

.fddocs-margin-end-none,
[dir="rtl"] .fddocs-margin-end-none {
margin: 1.5rem;
}
2 changes: 2 additions & 0 deletions src/fundamental-styles.scss
View file
Expand Up @@ -31,6 +31,7 @@
@import "./link";
@import "./list-grid";
@import "./list";
@import "./margins";
@import "./menu";
@import "./message-box";
@import "./message-page";
Expand All @@ -40,6 +41,7 @@
@import "./numeric-content";
@import "./object-marker";
@import "./object-status";
@import "./paddings";
@import "./page";
@import "./pagination";
@import "./panel";
Expand Down
264 changes: 264 additions & 0 deletions src/margins.scss
View file
@@ -0,0 +1,264 @@
@import "./new-settings";
@import "./mixins";

$block: #{$fd-namespace}-margin;

.#{$block} {
$fd-margin-tiny: 0.5rem;
$fd-margin-small: 1rem;
$fd-margin-medium: 2rem;
$fd-margin-large: 3rem;
$fd-margin-negative-tiny: -0.5rem;
$fd-margin-negative-small: -1rem;
$fd-margin-negative-medium: -2rem;
$fd-margin-negative-large: -3rem;
$fd-margin-responsive-vertical: 1rem;
$fd-margin-responsive-medium: 1rem;
$fd-margin-responsive-large: 2rem;
$fd-margin-responsive-extra-large: 3rem;

// margin
&--tiny {
margin: $fd-margin-tiny !important;
}

&--sm {
margin: $fd-margin-small !important;
}

&--md {
margin: $fd-margin-medium !important;
}

&--lg {
margin: $fd-margin-large !important;
}

&--none {
margin: 0 !important;
}

// margin top
&-top {
&--tiny {
margin-top: $fd-margin-tiny !important;
}

&--sm {
margin-top: $fd-margin-small !important;
}

&--md {
margin-top: $fd-margin-medium !important;
}

&--lg {
margin-top: $fd-margin-large !important;
}

&--none {
margin-top: 0 !important;
}
}

// margin end
&-end {
&--tiny {
margin-right: $fd-margin-tiny !important;

@include fd-rtl() {
margin-left: $fd-margin-tiny !important;
margin-right: 0 !important;
}
}

&--sm {
margin-right: $fd-margin-small !important;

@include fd-rtl() {
margin-left: $fd-margin-small !important;
margin-right: 0 !important;
}
}

&--md {
margin-right: $fd-margin-medium !important;

@include fd-rtl() {
margin-left: $fd-margin-medium !important;
margin-right: 0 !important;
}
}

&--lg {
margin-right: $fd-margin-large !important;

@include fd-rtl() {
margin-left: $fd-margin-large !important;
margin-right: 0 !important;
}
}

&--none {
margin-right: 0;

@include fd-rtl() {
margin-left: 0 !important;
}
}
}

// margin bottom
&-bottom {
&--tiny {
margin-bottom: $fd-margin-tiny !important;
}

&--sm {
margin-bottom: $fd-margin-small !important;
}

&--md {
margin-bottom: $fd-margin-medium !important;
}

&--lg {
margin-bottom: $fd-margin-large !important;
}

&--none {
margin-bottom: 0 !important;
}
}

// margin begin
&-begin {
&--tiny {
margin-left: $fd-margin-tiny !important;

@include fd-rtl() {
margin-right: $fd-margin-tiny !important;
margin-left: 0 !important;
}
}

&--sm {
margin-left: $fd-margin-small !important;

@include fd-rtl() {
margin-right: $fd-margin-small !important;
margin-left: 0 !important;
}
}

&--md {
margin-left: $fd-margin-medium !important;

@include fd-rtl() {
margin-right: $fd-margin-medium !important;
margin-left: 0 !important;
}
}

&--lg {
margin-left: $fd-margin-large !important;

@include fd-rtl() {
margin-right: $fd-margin-large !important;
margin-left: 0 !important;
}
}

&--none {
margin-left: 0;

@include fd-rtl() {
margin-right: 0 !important;
}
}
}

// double-sided top bottom margin
&-top-bottom {
&--tiny {
margin-top: $fd-margin-tiny !important;
margin-bottom: $fd-margin-tiny !important;
}

&--sm {
margin-top: $fd-margin-small !important;
margin-bottom: $fd-margin-small !important;
}

&--md {
margin-top: $fd-margin-medium !important;
margin-bottom: $fd-margin-medium !important;
}

&--lg {
margin-top: $fd-margin-large !important;
margin-bottom: $fd-margin-large !important;
}
}

// double-sided begin end margin
&-begin-end {
&--tiny {
margin-left: $fd-margin-tiny !important;
margin-right: $fd-margin-tiny !important;
}

&--sm {
margin-left: $fd-margin-small !important;
margin-right: $fd-margin-small !important;
}

&--md {
margin-left: $fd-margin-medium !important;
margin-right: $fd-margin-medium !important;
}

&--lg {
margin-left: $fd-margin-large !important;
margin-right: $fd-margin-large !important;
}
}

// responsive margin
&-responsive {
&--sm {
margin: 0 0 $fd-margin-responsive-vertical 0 !important;
}

&--md {
margin: $fd-margin-responsive-medium !important;
}

&--lg {
margin: $fd-margin-responsive-vertical $fd-margin-responsive-large !important;
}

&--xl {
margin: $fd-margin-responsive-vertical $fd-margin-responsive-extra-large !important;
}
}

// negative margins
&-negative-begin-end {
&--tiny {
margin: 0 $fd-margin-negative-tiny !important;
}

&--sm {
margin: 0 $fd-margin-negative-small !important;
}

&--md {
margin: 0 $fd-margin-negative-medium !important;
}

&--lg {
margin: 0 $fd-margin-negative-large !important;
}
}
}

0 comments on commit d02b12a

Please sign in to comment.