@elliemae/ds-basic 2.0.4 → 2.0.8

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.
Files changed (2) hide show
  1. package/package.json +44 -44
  2. package/styles/components/packages/ds-app-picker/DSAppPicker.scss +166 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-basic",
3
- "version": "2.0.4",
3
+ "version": "2.0.8",
4
4
  "license": "MIT",
5
5
  "description": "EllieMae UI Design System Library",
6
6
  "module": "./esm/index.js",
@@ -296,49 +296,49 @@
296
296
  "dev": "node ../../scripts/build/build.js -w"
297
297
  },
298
298
  "dependencies": {
299
- "@elliemae/ds-accordion": "2.0.4",
300
- "@elliemae/ds-app-picker": "2.0.4",
301
- "@elliemae/ds-backdrop": "2.0.4",
302
- "@elliemae/ds-breadcrumb": "2.0.4",
303
- "@elliemae/ds-button": "2.0.4",
304
- "@elliemae/ds-button-group": "2.0.4",
305
- "@elliemae/ds-card": "2.0.4",
306
- "@elliemae/ds-circular-progress-indicator": "2.0.4",
307
- "@elliemae/ds-form": "2.0.4",
308
- "@elliemae/ds-grid": "2.0.4",
309
- "@elliemae/ds-group-box": "2.0.4",
310
- "@elliemae/ds-header": "2.0.4",
311
- "@elliemae/ds-hidden": "2.0.4",
312
- "@elliemae/ds-icon": "2.0.4",
313
- "@elliemae/ds-indeterminate-progress-indicator": "2.0.4",
314
- "@elliemae/ds-label-value": "2.0.4",
315
- "@elliemae/ds-list-section-header": "2.0.4",
316
- "@elliemae/ds-loading-indicator": "2.0.4",
317
- "@elliemae/ds-menu": "2.0.4",
318
- "@elliemae/ds-overlay": "2.0.4",
319
- "@elliemae/ds-page-header": "2.0.4",
320
- "@elliemae/ds-page-number": "2.0.4",
321
- "@elliemae/ds-pills": "2.0.4",
322
- "@elliemae/ds-popover": "2.0.4",
323
- "@elliemae/ds-popper": "2.0.4",
324
- "@elliemae/ds-portal": "2.0.4",
325
- "@elliemae/ds-progress-indicator": "2.0.4",
326
- "@elliemae/ds-read-more": "2.0.4",
327
- "@elliemae/ds-resizeable-container": "2.0.4",
328
- "@elliemae/ds-separator": "2.0.4",
329
- "@elliemae/ds-side-panel": "2.0.4",
330
- "@elliemae/ds-slider": "2.0.4",
331
- "@elliemae/ds-spinner": "2.0.4",
332
- "@elliemae/ds-tabs": "2.0.4",
333
- "@elliemae/ds-text-wrapper": "2.0.4",
334
- "@elliemae/ds-time-picker": "2.0.4",
335
- "@elliemae/ds-toast": "2.0.4",
336
- "@elliemae/ds-toolbar": "2.0.4",
337
- "@elliemae/ds-tooltip": "2.0.4",
338
- "@elliemae/ds-truncated-expandable-text": "2.0.4",
339
- "@elliemae/ds-truncated-tooltip-text": "2.0.4",
340
- "@elliemae/ds-zipcode-search": "2.0.4",
341
- "@elliemae/ds-zoom": "2.0.4"
299
+ "@elliemae/ds-accordion": "2.0.8",
300
+ "@elliemae/ds-app-picker": "2.0.8",
301
+ "@elliemae/ds-backdrop": "2.0.8",
302
+ "@elliemae/ds-breadcrumb": "2.0.8",
303
+ "@elliemae/ds-button": "2.0.8",
304
+ "@elliemae/ds-button-group": "2.0.8",
305
+ "@elliemae/ds-card": "2.0.8",
306
+ "@elliemae/ds-circular-progress-indicator": "2.0.8",
307
+ "@elliemae/ds-form": "2.0.8",
308
+ "@elliemae/ds-grid": "2.0.8",
309
+ "@elliemae/ds-group-box": "2.0.8",
310
+ "@elliemae/ds-header": "2.0.8",
311
+ "@elliemae/ds-hidden": "2.0.8",
312
+ "@elliemae/ds-icon": "2.0.8",
313
+ "@elliemae/ds-indeterminate-progress-indicator": "2.0.8",
314
+ "@elliemae/ds-label-value": "2.0.8",
315
+ "@elliemae/ds-list-section-header": "2.0.8",
316
+ "@elliemae/ds-loading-indicator": "2.0.8",
317
+ "@elliemae/ds-menu": "2.0.8",
318
+ "@elliemae/ds-overlay": "2.0.8",
319
+ "@elliemae/ds-page-header": "2.0.8",
320
+ "@elliemae/ds-page-number": "2.0.8",
321
+ "@elliemae/ds-pills": "2.0.8",
322
+ "@elliemae/ds-popover": "2.0.8",
323
+ "@elliemae/ds-popper": "2.0.8",
324
+ "@elliemae/ds-portal": "2.0.8",
325
+ "@elliemae/ds-progress-indicator": "2.0.8",
326
+ "@elliemae/ds-read-more": "2.0.8",
327
+ "@elliemae/ds-resizeable-container": "2.0.8",
328
+ "@elliemae/ds-separator": "2.0.8",
329
+ "@elliemae/ds-side-panel": "2.0.8",
330
+ "@elliemae/ds-slider": "2.0.8",
331
+ "@elliemae/ds-spinner": "2.0.8",
332
+ "@elliemae/ds-tabs": "2.0.8",
333
+ "@elliemae/ds-text-wrapper": "2.0.8",
334
+ "@elliemae/ds-time-picker": "2.0.8",
335
+ "@elliemae/ds-toast": "2.0.8",
336
+ "@elliemae/ds-toolbar": "2.0.8",
337
+ "@elliemae/ds-tooltip": "2.0.8",
338
+ "@elliemae/ds-truncated-expandable-text": "2.0.8",
339
+ "@elliemae/ds-truncated-tooltip-text": "2.0.8",
340
+ "@elliemae/ds-zipcode-search": "2.0.8",
341
+ "@elliemae/ds-zoom": "2.0.8"
342
342
  },
343
343
  "devDependencies": {
344
344
  "gulp": "~4.0.2",
package/styles/components/packages/ds-app-picker/DSAppPicker.scss ADDED
@@ -0,0 +1,166 @@
1
+ $app-picker: #{$prefix}-app-picker;
2
+ $wrapper: #{$app-picker}__wrapper;
3
+ $grid: #{$app-picker}__grid;
4
+ $row: #{$app-picker}__row;
5
+ $chip: #{$app-picker}__chip;
6
+ $chip-label: #{$app-picker}__chip-label;
7
+ $title: #{$app-picker}__section-title;
8
+ $separator: #{$app-picker}__separator;
9
+ $arrow: #{$app-picker}__arrow;
10
+
11
+ .#{$wrapper} {
12
+ display: flex;
13
+ flex-direction: column;
14
+ align-items: center;
15
+ min-width: 244px;
16
+ max-height: 449px;
17
+ overflow-y: auto;
18
+ padding: 4px 0;
19
+ margin: 0 auto;
20
+
21
+ &:focus {
22
+ outline: none;
23
+ }
24
+ }
25
+
26
+ .#{$arrow} {
27
+ position: relative;
28
+ top: -21px;
29
+ margin: 0;
30
+ fill: #fff;
31
+ }
32
+
33
+ .#{$grid} {
34
+ display: flex;
35
+ flex-direction: column;
36
+ justify-content: center;
37
+ align-items: center;
38
+ width: 100%;
39
+ padding: 0 8px;
40
+ }
41
+
42
+ .#{$row} {
43
+ display: flex;
44
+ width: 100%;
45
+ }
46
+
47
+ .#{$title} {
48
+ color: color('neutral', 700);
49
+ font-size: font-size(200);
50
+ font-weight: bold;
51
+ margin: 8px 0 4px 0;
52
+ line-height: 1;
53
+ text-transform: uppercase;
54
+ }
55
+
56
+ .#{$chip} {
57
+ display: flex;
58
+ flex-direction: column;
59
+ align-items: center;
60
+ border-radius: 2%;
61
+ padding: 8px 0 4px 0;
62
+ margin: 4px;
63
+ height: 68px;
64
+ width: 68px;
65
+ overflow: hidden;
66
+ line-height: 1px;
67
+ background-color: #fff;
68
+ color: color('brand-primary', 600);
69
+ cursor: pointer;
70
+ border: 2px solid transparent;
71
+
72
+ &:hover {
73
+ color: color('brand-primary', 800);
74
+ background-color: color('brand-primary', 200);
75
+ .app-picker__icon {
76
+ fill: color('brand-primary', 800);
77
+ }
78
+ }
79
+
80
+ &:focus {
81
+ outline: none;
82
+ border: 2px solid color('brand-primary', 800);
83
+ }
84
+
85
+ &--disabled {
86
+ color: color('neutral', 500);
87
+ cursor: not-allowed;
88
+
89
+ .app-picker__icon {
90
+ fill: color('neutral', 500);
91
+ }
92
+
93
+ &:focus,
94
+ &:hover {
95
+ background-color: #fff;
96
+ cursor: not-allowed;
97
+ border: 2px solid transparent;
98
+
99
+ .#{$chip-label} {
100
+ color: color('neutral', 500);
101
+ }
102
+ }
103
+
104
+ &:hover .app-picker__icon {
105
+ fill: color('neutral', 500);
106
+ }
107
+ }
108
+
109
+ &--selected {
110
+ color: color('brand-primary', 800);
111
+ background-color: color('brand-primary', 200);
112
+ position: relative;
113
+
114
+ .app-picker__icon {
115
+ fill: color('brand-primary', 800);
116
+ }
117
+
118
+ &:focus {
119
+ border: 2px solid transparent;
120
+ &::after {
121
+ border: 2px solid color('brand-primary', 800);
122
+ }
123
+ }
124
+
125
+ &::after {
126
+ position: absolute;
127
+ content: '';
128
+ top: -2px;
129
+ left: -2px;
130
+ width: calc(100% + 4px);
131
+ height: calc(100% + 4px);
132
+ border: 1px solid color('brand-primary', 600);
133
+ border-radius: 2px;
134
+ }
135
+ }
136
+ }
137
+
138
+ .app-picker__icon {
139
+ fill: color('brand-primary', 600);
140
+ }
141
+
142
+ #app-picker__button {
143
+ &:hover {
144
+ background-color: transparent;
145
+ }
146
+ }
147
+
148
+ .#{$chip-label} {
149
+ font-size: font-size(200);
150
+ font-weight: 600;
151
+ word-wrap: break-word;
152
+ text-overflow: ellipsis;
153
+ margin: 4px 0;
154
+ max-width: 68px;
155
+ display: -webkit-box;
156
+ -webkit-line-clamp: 2;
157
+ line-height: 13px;
158
+ -webkit-box-orient: vertical;
159
+ }
160
+
161
+ .#{$separator} {
162
+ border-top: 1px solid color('neutral', 100);
163
+ border-bottom: none;
164
+ width: 99%;
165
+ margin-bottom: 0;
166
+ }