diff options
Diffstat (limited to 'openecomp-ui/resources/scss/components/_grid.scss')
-rw-r--r-- | openecomp-ui/resources/scss/components/_grid.scss | 114 |
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%); + } } |