summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components/_grid.scss
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/components/_grid.scss')
-rw-r--r--openecomp-ui/resources/scss/components/_grid.scss64
1 files changed, 64 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
new file mode 100644
index 0000000000..d4d1fa7ccd
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -0,0 +1,64 @@
+$gridItemSpace: 15%;
+
+.grid-section {
+ padding-bottom: 30px;
+ .grid-items {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+
+ %grid-col-base {
+ flex-shrink: 0;
+ display: flex;
+ }
+
+ .grid-item {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .grid-item-stretch {
+ @extend .grid-item;
+ & *:last-child {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ .grid-col-1 {
+ @extend %grid-col-base;
+ flex-basis: 25%;
+ &:after {
+ flex-basis: $gridItemSpace;
+ content: ' ';
+ }
+ }
+
+ .grid-col-2 {
+ @extend %grid-col-base;
+ flex-basis: 50%;
+ &:after {
+ flex-basis: $gridItemSpace / 2;
+ content: ' ';
+ }
+ }
+ .grid-col-3 {
+ @extend %grid-col-base;
+ flex-basis: 75%;
+ &:after {
+ flex-basis: $gridItemSpace / 3;
+ content: ' ';
+ }
+ }
+ .grid-col-4 {
+ @extend %grid-col-base;
+ flex-basis: 100%;
+ &:after {
+ flex-basis: $gridItemSpace / 4;
+ content: ' ';
+ }
+ }
+}