empower-container 0.1.26 → 0.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -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",