summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components/_grid.scss
blob: 9a76f97546af997d30d894f89fdf587881aa8f13 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
$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;
			}
		}

		.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: ' ';
      }
		}
}