aboutsummaryrefslogtreecommitdiffstats
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.scss121
1 files changed, 63 insertions, 58 deletions
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index 9a76f97546..f210b64df6 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,66 +1,71 @@
-$gridItemSpace: 15%;
-
.grid-section {
- &:not(:last-of-type) {
- 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;
- }
- }
+ $gridItemSpace: 15%;
- .grid-col-1 {
- @extend %grid-col-base;
- flex-basis: 25%;
- &:after {
- flex-basis: $gridItemSpace;
+ @mixin gridCol($numOfCols, $flexBasis) {
+ .#{grid-col- + $numOfCols} {
+ @extend %grid-col-base;
+ flex-basis: $flexBasis;
+ &:not(.last-col-in-row):after {
+ flex-basis: $gridItemSpace / $numOfCols;
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: ' ';
+ @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
+ .#{grid-col- + $numOfCols} {
+ @extend %grid-col-base;
+ &:not(.last-col-in-row) {
+ flex-basis: $flexBasis;
+ margin-right: 5%;
}
- }
- .grid-col-4 {
- @extend %grid-col-base;
- flex-basis: 100%;
- &:after {
- flex-basis: $gridItemSpace / 4;
- content: ' ';
+ &.last-col-in-row {
+ flex-basis: $flexBasisLast;
}
- }
+ }
+ }
+
+ &:not(:last-of-type) {
+ 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;
+ }
+ }
+
+ &.has-last-col-set {
+ @include gridColWithLastColumn(1, 21%, 22%);
+ @include gridColWithLastColumn(2, 47%, 48%);
+ @include gridColWithLastColumn(3, 73%, 74%);
+ @include gridColWithLastColumn(4, 100%, 100%);
+ }
+
+ &:not(.has-last-col-set) {
+ @include gridCol(1, 25%);
+ @include gridCol(2, 50%);
+ @include gridCol(3, 75%);
+ @include gridCol(4, 100%);
+ }
}