empower-container 0.1.26 → 0.1.27

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,4 +1,4 @@
1
- .em-button{
1
+ .em-button {
2
2
  display: inline-flex;
3
3
  align-items: center;
4
4
  justify-content: center;
@@ -104,6 +104,16 @@
104
104
  }
105
105
  }
106
106
  }
107
+
108
+ &.delete {
109
+ color: $red;
110
+ box-shadow: inset 0 0 0 1px $red;
111
+ padding: 15px;
112
+
113
+ &:hover {
114
+ background-color: $red;
115
+ }
116
+ }
107
117
  }
108
118
 
109
119
  .em-text-link {
@@ -1,4 +1,12 @@
1
1
  .em-popover {
2
+ position: absolute;
3
+ top: 50px;
4
+ margin-top: -2px;
5
+ font-size: 0.875rem;
6
+ color: $gray-dark;
7
+ z-index: 100;
8
+ display: flex;
9
+ width: auto;
2
10
  background-color: $white;
3
11
  border-top: 5px solid $blue-light4;
4
12
  border-bottom-left-radius: $border-radius-md;
@@ -8,12 +8,13 @@
8
8
  .em-dropdown {
9
9
  position: relative;
10
10
  min-width: 100px;
11
+ white-space: nowrap;
11
12
  }
12
13
 
13
14
  .em-belt-left {
14
15
  display: flex;
15
16
  align-items: center;
16
- flex-wrap: nowrap;
17
+ flex-wrap: wrap;
17
18
 
18
19
  .belt-info {
19
20
  margin-left: 10px;
@@ -78,10 +79,6 @@
78
79
  margin: 0;
79
80
  }
80
81
  }
81
-
82
- .em-dropdown .em-popover {
83
- width: auto;
84
- }
85
82
  }
86
83
 
87
84
  .em-beltleft-cta {
@@ -134,7 +131,7 @@
134
131
  display: flex;
135
132
  align-items: center;
136
133
  justify-content: flex-end;
137
- flex-wrap: wrap;
134
+ flex-wrap: nowrap;
138
135
 
139
136
  > a, > div {
140
137
  margin-left: 10px;
@@ -2,6 +2,19 @@
2
2
  position: relative;
3
3
  width: 100%;
4
4
 
5
+ option{
6
+ font-size: 0.875rem;
7
+ color: $gray-dark;
8
+ padding: 20px;
9
+ transition: $transition;
10
+ cursor: pointer;
11
+
12
+ &:hover{
13
+ background-color: $blue-light;
14
+ padding: 20px 18px 20px 22px;
15
+ }
16
+ }
17
+
5
18
  .em-input-field {
6
19
  width: 100%;
7
20
  }
@@ -57,177 +70,148 @@
57
70
  z-index: 99;
58
71
  }
59
72
 
60
- .em-popover{
61
- position: absolute;
62
- top: 50px;
63
- margin-top: -2px;
64
- background-color: $white;
65
- font-size: 0.875rem;
66
- color: $gray-dark;
67
- border-top: 5px solid $blue;
68
- box-shadow: 0 15px 30px 0 rgb(19 37 154 / 15%);
69
- z-index: 100;
70
-
71
- .em-select{
72
- width: 100%;
73
+ .em-popover-input{
74
+ display: flex;
75
+ padding: 20px;
76
+
77
+ .field {
78
+ margin: 0 15px 0 0;
79
+ width: 160px;
80
+
81
+ > label {
82
+ position: relative;
83
+ top: 0;
84
+ left: 0;
85
+ padding: 0;
86
+ margin-bottom: 5px;
87
+ display: inline-block;
88
+ font-size: .875rem;
89
+ font-weight: 700;
90
+ color: $gray-light3;
91
+ text-transform: uppercase;
92
+ }
93
+ }
73
94
 
74
- option{
75
- font-size: 0.875rem;
76
- color: $gray-dark;
77
- padding: 20px;
78
- transition: $transition;
79
- cursor: pointer;
95
+ button {
96
+ border: 0;
97
+ background: none;
98
+ height: 50px;
99
+ width: 50px;
100
+ display: inline-flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ cursor: pointer;
104
+ transition: $transition;
105
+ }
106
+ }
80
107
 
81
- &:hover{
82
- background-color: $blue-light;
83
- padding: 20px 18px 20px 22px;
84
- }
108
+ .em-popover-list {
109
+ display: block;
110
+ padding: 0;
111
+
112
+ a {
113
+ display: block;
114
+ font-weight: 700;
115
+ font-size: .875rem;
116
+ color: $gray-light4;
117
+ padding: 15px 20px;
118
+ min-height: 50px;
119
+ line-height: 20px;
120
+ text-decoration: none;
121
+ text-align: left;
122
+ border: none;
123
+ box-shadow: none;
124
+ transition: $transition;
125
+ margin-right: 0;
126
+ cursor: pointer;
127
+
128
+ &:hover {
129
+ background-color: $blue-light;
130
+ color: $gray-dark;
131
+ padding: 15px 18px 15px 22px;
132
+ box-shadow: none;
133
+ border: none;
85
134
  }
86
135
  }
136
+ }
87
137
 
88
- .em-popover-input{
89
- display: flex;
90
- padding: 20px;
138
+ .em-popover-months {
139
+ width: 300px;
140
+ padding: 0;
141
+ flex-direction: column;
91
142
 
92
- .field {
93
- margin: 0 15px 0 0;
94
- width: 160px;
95
-
96
- > label {
97
- position: relative;
98
- top: 0;
99
- left: 0;
100
- padding: 0;
101
- margin-bottom: 5px;
102
- display: inline-block;
103
- font-size: .875rem;
104
- font-weight: 700;
105
- color: $gray-light3;
106
- text-transform: uppercase;
107
- }
108
- }
143
+ .list-years {
144
+ background-color: $blue-dark;
145
+ display: flex;
146
+ justify-content: space-between;
147
+ margin-top: -1px;
148
+ width: 100%;
109
149
 
110
150
  button {
111
- border: 0;
112
- background: none;
113
- height: 50px;
114
- width: 50px;
115
- display: inline-flex;
116
- align-items: center;
117
- justify-content: center;
151
+ background-color: transparent;
152
+ border: none;
118
153
  cursor: pointer;
119
154
  transition: $transition;
155
+
156
+ svg path {
157
+ fill: $white;
158
+ }
159
+
160
+ img {
161
+ transition: $transition;
162
+
163
+ &:hover {
164
+ background-color: transparentize($blue-dark1, 0.5);
165
+ }
166
+
167
+ &:focus {
168
+ outline: none;
169
+ }
170
+ }
171
+ }
172
+
173
+ > div {
174
+ color: $white;
175
+ font-size: 1.5rem;
176
+ padding: 15px;
120
177
  }
121
178
  }
122
179
 
123
- .em-popover-list {
124
- display: block;
125
- padding: 0;
180
+ .list-months {
181
+ display: flex;
182
+ flex-wrap: wrap;
126
183
 
127
184
  a {
128
- display: block;
185
+ width: 33.33%;
186
+ box-shadow: inset 1px 0 0 0 $blue-light1, inset 0 1px 0 0 $blue-light1;
187
+ padding: 15px;
188
+ color: $gray-light4;
189
+ text-align: center;
129
190
  font-weight: 700;
130
191
  font-size: .875rem;
131
- color: $gray-light4;
132
- padding: 15px 20px;
133
- min-height: 50px;
134
- line-height: 20px;
135
192
  text-decoration: none;
136
- text-align: left;
137
- border: none;
138
- box-shadow: none;
139
- transition: $transition;
140
- margin-right: 0;
141
- cursor: pointer;
142
193
 
143
194
  &:hover {
144
- background-color: $blue-light;
195
+ background-color: $gray-light;
145
196
  color: $gray-dark;
146
- padding: 15px 18px 15px 22px;
147
- box-shadow: none;
148
- border: none;
149
197
  }
150
- }
151
- }
152
198
 
153
- .em-popover-months {
154
- width: 300px;
155
- padding: 0;
156
- flex-direction: column;
157
-
158
- .list-years {
159
- background-color: $blue-dark;
160
- display: flex;
161
- justify-content: space-between;
162
- margin-top: -1px;
163
- width: 100%;
164
-
165
- button {
166
- background-color: transparent;
167
- border: none;
168
- cursor: pointer;
169
- transition: $transition;
170
-
171
- svg path {
172
- fill: $white;
173
- }
174
-
175
- img {
176
- transition: $transition;
177
-
178
- &:hover {
179
- background-color: transparentize($blue-dark1, 0.5);
180
- }
181
-
182
- &:focus {
183
- outline: none;
184
- }
185
- }
186
- }
187
-
188
- > div {
189
- color: $white;
190
- font-size: 1.5rem;
191
- padding: 15px;
192
- }
193
- }
194
-
195
- .list-months {
196
- display: flex;
197
- flex-wrap: wrap;
198
-
199
- a {
200
- width: 33.33%;
201
- box-shadow: inset 1px 0 0 0 $blue-light1, inset 0 1px 0 0 $blue-light1;
202
- padding: 15px;
203
- color: $gray-light4;
204
- text-align: center;
205
- font-weight: 700;
206
- font-size: .875rem;
207
- text-decoration: none;
208
-
209
- &:hover {
210
- background-color: $gray-light;
211
- color: $gray-dark;
212
- }
213
-
214
- &.is-disabled{
199
+ &.is-disabled{
200
+ background-color: $gray-light;
201
+ color: $gray-light3;
202
+ cursor: initial;
203
+
204
+ &:hover{
215
205
  background-color: $gray-light;
216
206
  color: $gray-light3;
217
- cursor: initial;
218
-
219
- &:hover{
220
- background-color: $gray-light;
221
- color: $gray-light3;
222
- }
223
- }
224
-
225
- &.is-selected{
226
- background-color: $blue-dark1;
227
- color: $white;
228
- box-shadow: inset 1px 0 0 0 $blue-dark1, inset 0 1px 0 0 $blue-dark1;
229
207
  }
230
208
  }
209
+
210
+ &.is-selected{
211
+ background-color: $blue-dark1;
212
+ color: $white;
213
+ box-shadow: inset 1px 0 0 0 $blue-dark1, inset 0 1px 0 0 $blue-dark1;
214
+ }
231
215
  }
232
216
  }
233
217
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "empower-container",
3
- "version": "0.1.26",
3
+ "version": "0.1.27",
4
4
  "private": false,
5
5
  "homepage": "https://bitbucket.org/empowerteams/empower-container",
6
6
  "main": "./dist/cjs/ndex.js",