|
1 | | -@import '../../public/styles/global'; |
| 1 | +@use '../../public/styles/global'; |
| 2 | +@use "../../public/styles/mixins/global" as global2; |
| 3 | +@use "../../public/styles/variables/base"; |
| 4 | +@use "../../public/styles/variables/breakpoints"; |
| 5 | +@use "../../public/styles/variables/colors"; |
2 | 6 |
|
3 | 7 | .table { |
4 | 8 | &--component { |
|
11 | 15 | display: grid; |
12 | 16 | grid-template-columns: 1fr; |
13 | 17 | grid-gap: 10px; |
14 | | - @media screen and (min-width: $breakpoint-sm-min) { |
| 18 | + @media screen and (min-width: breakpoints.$breakpoint-sm-min) { |
15 | 19 | grid-auto-rows: 1fr; |
16 | 20 | grid-gap: 30px; |
17 | 21 | grid-template-columns: 8fr 4fr; |
|
25 | 29 | grid-template-columns: 7fr 1fr; |
26 | 30 |
|
27 | 31 | &-input { |
28 | | - @include make-input(); |
| 32 | + @include global2.make-input(); |
29 | 33 | } |
30 | 34 |
|
31 | 35 | &-button { |
32 | | - @include make-button($btn-color: $brand-primary); |
| 36 | + @include global2.make-button($btn-color: colors.$brand-primary); |
33 | 37 |
|
34 | | - @media all and (max-width: $breakpoint-sm-max) { |
| 38 | + @media all and (max-width: breakpoints.$breakpoint-sm-max) { |
35 | 39 | padding-left: 20px; |
36 | 40 | padding-right: 20px; |
37 | 41 | } |
38 | 42 | } |
39 | 43 | } |
40 | 44 |
|
41 | 45 | &-dropdown { |
42 | | - font-family: $base-font-family; |
| 46 | + font-family: base.$base-font-family; |
43 | 47 | align-items: center; |
44 | 48 | display: grid; |
45 | 49 | grid-auto-rows: 1fr; |
|
52 | 56 | } |
53 | 57 |
|
54 | 58 | &-select { |
55 | | - background-color: $white; |
56 | | - color: $stone; |
| 59 | + background-color: colors.$white; |
| 60 | + color: colors.$stone; |
57 | 61 | height: 100%; |
58 | 62 | -webkit-appearance: none; |
59 | 63 | border-radius: 0; |
60 | 64 | padding: 5px 30px 5px 10px; |
61 | 65 |
|
62 | 66 | + i { |
63 | | - color: $stone; |
| 67 | + color: colors.$stone; |
64 | 68 | position: absolute; |
65 | 69 | top: calc(50% - .55em); |
66 | 70 | right: 10px; |
|
77 | 81 | width: 100%; |
78 | 82 | table-layout: fixed; |
79 | 83 |
|
80 | | - @media all and (max-width: $breakpoint-sm-max) { |
| 84 | + @media all and (max-width: breakpoints.$breakpoint-sm-max) { |
81 | 85 | table-layout: fixed; |
82 | 86 | } |
83 | 87 |
|
84 | 88 | thead { |
85 | | - @media screen and (max-width: $breakpoint-xs-max) { |
| 89 | + @media screen and (max-width: breakpoints.$breakpoint-xs-max) { |
86 | 90 | display: none; |
87 | 91 | } |
88 | 92 | } |
89 | 93 |
|
90 | 94 | thead tr { |
91 | | - background-color: $iron; |
| 95 | + background-color: colors.$iron; |
92 | 96 | } |
93 | 97 |
|
94 | 98 | th { |
|
105 | 109 | } |
106 | 110 |
|
107 | 111 | tbody tr:nth-child(even) { |
108 | | - background-color: $mercury; |
| 112 | + background-color: colors.$mercury; |
109 | 113 | } |
110 | 114 |
|
111 | 115 | tbody tr:nth-child(odd) { |
112 | | - background-color: $white; |
| 116 | + background-color: colors.$white; |
113 | 117 | } |
114 | 118 |
|
115 | 119 | td { |
116 | 120 | @extend %table-row; |
117 | 121 | padding: 10px; |
118 | 122 | overflow: hidden; |
119 | 123 | text-overflow: ellipsis; |
120 | | - @media screen and (max-width: $breakpoint-xs-max) { |
| 124 | + @media screen and (max-width: breakpoints.$breakpoint-xs-max) { |
121 | 125 | display: block; |
122 | 126 | } |
123 | 127 | &:first-child { |
124 | | - @media screen and (max-width: $breakpoint-xs-max) { |
| 128 | + @media screen and (max-width: breakpoints.$breakpoint-xs-max) { |
125 | 129 | font-weight: 600; |
126 | 130 | } |
127 | 131 | } |
|
0 commit comments