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.scss114
1 files changed, 57 insertions, 57 deletions
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index f210b64df6..595b0cde4d 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,71 +1,71 @@
.grid-section {
- $gridItemSpace: 15%;
+ $gridItemSpace: 15%;
- @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: ' ';
- }
+ @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: ' ';
+ }
+ }
}
- }
- @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
- .#{grid-col- + $numOfCols} {
- @extend %grid-col-base;
- &:not(.last-col-in-row) {
- flex-basis: $flexBasis;
- margin-right: 5%;
- }
- &.last-col-in-row {
- flex-basis: $flexBasisLast;
- }
+ @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
+ .#{grid-col- + $numOfCols} {
+ @extend %grid-col-base;
+ &:not(.last-col-in-row) {
+ flex-basis: $flexBasis;
+ margin-right: 5%;
+ }
+ &.last-col-in-row {
+ flex-basis: $flexBasisLast;
+ }
+ }
}
- }
- &:not(:last-of-type) {
- padding-bottom: 30px;
- }
+ &:not(:last-of-type) {
+ padding-bottom: 30px;
+ }
- .grid-items {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- }
+ .grid-items {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
- %grid-col-base {
- flex-shrink: 0;
- display: flex;
- }
+ %grid-col-base {
+ flex-shrink: 0;
+ display: flex;
+ }
- .grid-item {
- flex: 1;
- display: flex;
- flex-direction: column;
- }
+ .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-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%);
- }
+ &.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%);
- }
+ &:not(.has-last-col-set) {
+ @include gridCol(1, 25%);
+ @include gridCol(2, 50%);
+ @include gridCol(3, 75%);
+ @include gridCol(4, 100%);
+ }
}