@egovernments/digit-ui-components-css 0.0.2-beta.13 → 0.0.2-beta.16
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.
- package/CHANGELOG.md +4 -0
- package/dist/index.css +157 -33
- package/dist/index.min.css +3 -3
- package/package.json +2 -2
- package/src/digitv2/components/actionbarV2.scss +19 -18
- package/src/digitv2/components/selectionCardV2.scss +73 -0
- package/src/digitv2/components/sidebarV2.scss +88 -36
- package/src/digitv2/components/stepperV2.scss +0 -3
- package/src/digitv2/components/timelineV2.scss +40 -4
- package/src/digitv2/index.scss +1 -0
package/CHANGELOG.md
CHANGED
package/dist/index.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @egovernments/digit-ui-components-css - 0.0.2-beta.
|
|
2
|
+
* @egovernments/digit-ui-components-css - 0.0.2-beta.16
|
|
3
3
|
*
|
|
4
|
-
* Copyright (c) 2024 Jagankumar <jagan.kumar@
|
|
4
|
+
* Copyright (c) 2024 Jagankumar <jagan.kumar@egovernments.org>
|
|
5
5
|
*
|
|
6
6
|
*/
|
|
7
7
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
@@ -5407,16 +5407,13 @@ ol, ul {
|
|
|
5407
5407
|
height: .125rem; }
|
|
5408
5408
|
@media (min-aspect-ratio: 9 / 16) and (max-aspect-ratio: 3 / 4) {
|
|
5409
5409
|
.digit-stepper-container .stepper-connect {
|
|
5410
|
-
min-width: 6.313rem;
|
|
5411
5410
|
max-width: 39.438rem; } }
|
|
5412
5411
|
@media (max-aspect-ratio: 9 / 16) {
|
|
5413
5412
|
.digit-stepper-container .stepper-connect {
|
|
5414
|
-
min-width: 4.313rem;
|
|
5415
5413
|
max-width: 16.875rem;
|
|
5416
5414
|
top: .875rem; } }
|
|
5417
5415
|
@media (min-aspect-ratio: 3 / 4) {
|
|
5418
5416
|
.digit-stepper-container .stepper-connect {
|
|
5419
|
-
min-width: 5.313rem;
|
|
5420
5417
|
max-width: 82.688rem; } }
|
|
5421
5418
|
.digit-stepper-container .stepper-connect.active {
|
|
5422
5419
|
background-color: #c84c0e;
|
|
@@ -5453,6 +5450,89 @@ ol, ul {
|
|
|
5453
5450
|
background-color: #d6d5d4;
|
|
5454
5451
|
border-radius: .563rem; }
|
|
5455
5452
|
|
|
5453
|
+
.selection-card-container {
|
|
5454
|
+
-webkit-box-orient: vertical;
|
|
5455
|
+
-webkit-box-direction: normal;
|
|
5456
|
+
-ms-flex-direction: column;
|
|
5457
|
+
flex-direction: column;
|
|
5458
|
+
-webkit-box-align: start;
|
|
5459
|
+
-ms-flex-align: start;
|
|
5460
|
+
align-items: flex-start; }
|
|
5461
|
+
|
|
5462
|
+
.selection-card, .selection-card-container {
|
|
5463
|
+
display: -webkit-box;
|
|
5464
|
+
display: -ms-flexbox;
|
|
5465
|
+
display: flex; }
|
|
5466
|
+
|
|
5467
|
+
.selection-card {
|
|
5468
|
+
-ms-flex-wrap: wrap;
|
|
5469
|
+
flex-wrap: wrap;
|
|
5470
|
+
grid-gap: 1.5rem;
|
|
5471
|
+
gap: 1.5rem;
|
|
5472
|
+
padding: 1.5rem;
|
|
5473
|
+
border: .063rem solid #d6d5d4;
|
|
5474
|
+
border-radius: .25rem;
|
|
5475
|
+
background-color: #fafafa;
|
|
5476
|
+
width: -webkit-fit-content;
|
|
5477
|
+
width: -moz-fit-content;
|
|
5478
|
+
width: fit-content; }
|
|
5479
|
+
|
|
5480
|
+
.selection-card.error {
|
|
5481
|
+
border-color: #b91900; }
|
|
5482
|
+
|
|
5483
|
+
.option {
|
|
5484
|
+
display: -webkit-box;
|
|
5485
|
+
display: -ms-flexbox;
|
|
5486
|
+
display: flex;
|
|
5487
|
+
-webkit-box-align: center;
|
|
5488
|
+
-ms-flex-align: center;
|
|
5489
|
+
align-items: center;
|
|
5490
|
+
padding: .5rem 1rem;
|
|
5491
|
+
border: .063rem solid #d6d5d4;
|
|
5492
|
+
border-radius: .25rem;
|
|
5493
|
+
background-color: #fff;
|
|
5494
|
+
cursor: pointer;
|
|
5495
|
+
height: 2.5rem;
|
|
5496
|
+
grid-gap: .5rem;
|
|
5497
|
+
gap: .5rem;
|
|
5498
|
+
color: #363636;
|
|
5499
|
+
font-family: Roboto;
|
|
5500
|
+
font-style: normal;
|
|
5501
|
+
font-weight: 400;
|
|
5502
|
+
line-height: 1.37rem; }
|
|
5503
|
+
@media (max-aspect-ratio: 9 / 16) {
|
|
5504
|
+
.option {
|
|
5505
|
+
font-size: 1rem; } }
|
|
5506
|
+
@media (min-aspect-ratio: 9 / 16) and (max-aspect-ratio: 3 / 4) {
|
|
5507
|
+
.option {
|
|
5508
|
+
font-size: 1.25rem; } }
|
|
5509
|
+
@media (min-aspect-ratio: 3 / 4) {
|
|
5510
|
+
.option {
|
|
5511
|
+
font-size: 1.25rem; } }
|
|
5512
|
+
|
|
5513
|
+
.option.selected {
|
|
5514
|
+
background-color: #c84c0e;
|
|
5515
|
+
color: #fff;
|
|
5516
|
+
font-weight: 700; }
|
|
5517
|
+
|
|
5518
|
+
.option .selectioncard-option-label {
|
|
5519
|
+
width: 100%; }
|
|
5520
|
+
|
|
5521
|
+
.option .selectioncard-option-label, .option .selectioncardicon {
|
|
5522
|
+
display: -webkit-box;
|
|
5523
|
+
display: -ms-flexbox;
|
|
5524
|
+
display: flex;
|
|
5525
|
+
-webkit-box-align: center;
|
|
5526
|
+
-ms-flex-align: center;
|
|
5527
|
+
align-items: center;
|
|
5528
|
+
-webkit-box-pack: center;
|
|
5529
|
+
-ms-flex-pack: center;
|
|
5530
|
+
justify-content: center; }
|
|
5531
|
+
|
|
5532
|
+
.option .selectioncardicon {
|
|
5533
|
+
-ms-flex-negative: 0;
|
|
5534
|
+
flex-shrink: 0; }
|
|
5535
|
+
|
|
5456
5536
|
.digit-card-textarea-field, .digit-employee-card-textarea-field {
|
|
5457
5537
|
display: block;
|
|
5458
5538
|
outline: 2px solid transparent;
|
|
@@ -6043,6 +6123,8 @@ textarea::-webkit-scrollbar-thumb {
|
|
|
6043
6123
|
@media (max-aspect-ratio: 9 / 16) {
|
|
6044
6124
|
.timeline-label {
|
|
6045
6125
|
padding-top: .164rem; } }
|
|
6126
|
+
.timeline-label.upcoming {
|
|
6127
|
+
color: #787878; }
|
|
6046
6128
|
|
|
6047
6129
|
.timeline-date {
|
|
6048
6130
|
text-align: left;
|
|
@@ -6095,7 +6177,7 @@ img {
|
|
|
6095
6177
|
background-color: initial;
|
|
6096
6178
|
border: .125rem solid #c84c0e; }
|
|
6097
6179
|
|
|
6098
|
-
.timeline-circle.inprogress:after {
|
|
6180
|
+
.timeline-circle.inprogress:not(.error):after {
|
|
6099
6181
|
position: absolute;
|
|
6100
6182
|
width: 1rem;
|
|
6101
6183
|
height: 1rem;
|
|
@@ -6107,24 +6189,25 @@ img {
|
|
|
6107
6189
|
border-radius: 50%;
|
|
6108
6190
|
background-color: #c84c0e; }
|
|
6109
6191
|
@media (max-aspect-ratio: 9 / 16) {
|
|
6110
|
-
.timeline-circle.inprogress:after {
|
|
6192
|
+
.timeline-circle.inprogress:not(.error):after {
|
|
6111
6193
|
width: .75rem;
|
|
6112
6194
|
height: .75rem; } }
|
|
6113
6195
|
|
|
6196
|
+
.timeline-circle .check-icon {
|
|
6197
|
+
width: 1.5rem;
|
|
6198
|
+
height: 1.5rem;
|
|
6199
|
+
position: absolute;
|
|
6200
|
+
top: 50%;
|
|
6201
|
+
left: 50%;
|
|
6202
|
+
-webkit-transform: translate(-50%, -50%);
|
|
6203
|
+
transform: translate(-50%, -50%); }
|
|
6204
|
+
@media (max-aspect-ratio: 9 / 16) {
|
|
6205
|
+
.timeline-circle .check-icon {
|
|
6206
|
+
width: 1.125rem;
|
|
6207
|
+
height: 1.125rem; } }
|
|
6208
|
+
|
|
6114
6209
|
.timeline-circle.completed {
|
|
6115
6210
|
background-color: #c84c0e; }
|
|
6116
|
-
.timeline-circle.completed .check-icon {
|
|
6117
|
-
width: 1.5rem;
|
|
6118
|
-
height: 1.5rem;
|
|
6119
|
-
position: absolute;
|
|
6120
|
-
top: 50%;
|
|
6121
|
-
left: 50%;
|
|
6122
|
-
-webkit-transform: translate(-50%, -50%);
|
|
6123
|
-
transform: translate(-50%, -50%); }
|
|
6124
|
-
@media (max-aspect-ratio: 9 / 16) {
|
|
6125
|
-
.timeline-circle.completed .check-icon {
|
|
6126
|
-
width: 1.125rem;
|
|
6127
|
-
height: 1.125rem; } }
|
|
6128
6211
|
|
|
6129
6212
|
.digit-timeline-molecule {
|
|
6130
6213
|
max-height: 100%; }
|
|
@@ -6144,6 +6227,21 @@ img {
|
|
|
6144
6227
|
.view-more-future-container {
|
|
6145
6228
|
margin-bottom: 1rem; }
|
|
6146
6229
|
|
|
6230
|
+
.digit-timeline-item.error .timeline-circle {
|
|
6231
|
+
background-color: #b91900; }
|
|
6232
|
+
|
|
6233
|
+
.digit-timeline-item.error .timeline-content {
|
|
6234
|
+
background-color: #fff5f4;
|
|
6235
|
+
border-radius: .25rem;
|
|
6236
|
+
padding: .5rem .75rem; }
|
|
6237
|
+
.digit-timeline-item.error .timeline-content .timeline-info .timeline-label {
|
|
6238
|
+
color: #b91900;
|
|
6239
|
+
padding-top: 0; }
|
|
6240
|
+
.digit-timeline-item.error .timeline-content .timeline-info .timeline-date {
|
|
6241
|
+
color: #b91900; }
|
|
6242
|
+
.digit-timeline-item.error .timeline-content .timeline-info .timeline-divider {
|
|
6243
|
+
border: .063rem solid #b91900; }
|
|
6244
|
+
|
|
6147
6245
|
.digit-toast-success {
|
|
6148
6246
|
position: fixed;
|
|
6149
6247
|
display: -webkit-box;
|
|
@@ -7029,6 +7127,18 @@ img {
|
|
|
7029
7127
|
justify-content: space-between;
|
|
7030
7128
|
-ms-flex-wrap: wrap;
|
|
7031
7129
|
flex-wrap: wrap; }
|
|
7130
|
+
.digit-action-bar-wrap .digit-action-bar-fields.toRight {
|
|
7131
|
+
margin-left: auto; }
|
|
7132
|
+
.digit-action-bar-wrap .digit-action-bar-fields.toLeft {
|
|
7133
|
+
-webkit-box-pack: unset;
|
|
7134
|
+
-ms-flex-pack: unset;
|
|
7135
|
+
justify-content: unset; }
|
|
7136
|
+
.digit-action-bar-wrap .digit-action-bar-fields .action-bar-individual-action-field button {
|
|
7137
|
+
-webkit-box-flex: 1;
|
|
7138
|
+
-ms-flex: 1;
|
|
7139
|
+
flex: 1; }
|
|
7140
|
+
.digit-action-bar-wrap .digit-action-bar-fields:not(.toRight) {
|
|
7141
|
+
width: 100%; }
|
|
7032
7142
|
@media (min-width: 48rem) {
|
|
7033
7143
|
.digit-action-bar-wrap .digit-action-bar-fields {
|
|
7034
7144
|
grid-gap: 1.5rem;
|
|
@@ -7044,22 +7154,11 @@ img {
|
|
|
7044
7154
|
-webkit-box-orient: vertical;
|
|
7045
7155
|
-webkit-box-direction: normal;
|
|
7046
7156
|
-ms-flex-direction: column;
|
|
7047
|
-
flex-direction: column;
|
|
7157
|
+
flex-direction: column;
|
|
7158
|
+
width: 100%; }
|
|
7048
7159
|
.digit-action-bar-wrap .digit-action-bar-fields .action-bar-individual-action-field button {
|
|
7049
7160
|
width: 100%;
|
|
7050
7161
|
max-width: 100%; } }
|
|
7051
|
-
.digit-action-bar-wrap .digit-action-bar-fields.toRight {
|
|
7052
|
-
margin-left: auto; }
|
|
7053
|
-
.digit-action-bar-wrap .digit-action-bar-fields.toLeft {
|
|
7054
|
-
-webkit-box-pack: unset;
|
|
7055
|
-
-ms-flex-pack: unset;
|
|
7056
|
-
justify-content: unset; }
|
|
7057
|
-
.digit-action-bar-wrap .digit-action-bar-fields .action-bar-individual-action-field button {
|
|
7058
|
-
-webkit-box-flex: 1;
|
|
7059
|
-
-ms-flex: 1;
|
|
7060
|
-
flex: 1; }
|
|
7061
|
-
.digit-action-bar-wrap .digit-action-bar-fields:not(.toRight) {
|
|
7062
|
-
width: 100%; }
|
|
7063
7162
|
.digit-action-bar-wrap .digit-dropdown-select-wrap, .digit-action-bar-wrap .digit-employee-dropdown-select-wrap {
|
|
7064
7163
|
margin-bottom: 0; }
|
|
7065
7164
|
.digit-action-bar-wrap .header-dropdown-container {
|
|
@@ -7860,7 +7959,6 @@ video::-webkit-media-controls-panel {
|
|
|
7860
7959
|
width: 100%; }
|
|
7861
7960
|
.sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.selected, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.selectedAsParent, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item:active {
|
|
7862
7961
|
background: #c84c0e;
|
|
7863
|
-
border-left: .25rem solid #fff;
|
|
7864
7962
|
display: -webkit-box;
|
|
7865
7963
|
display: -ms-flexbox;
|
|
7866
7964
|
display: flex;
|
|
@@ -7870,6 +7968,32 @@ video::-webkit-media-controls-panel {
|
|
|
7870
7968
|
-webkit-box-pack: center;
|
|
7871
7969
|
-ms-flex-pack: center;
|
|
7872
7970
|
justify-content: center; }
|
|
7971
|
+
.sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.selected:before, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.selected:hover:before, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.selectedAsParent:before, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item:active:before, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item:active:hover:before {
|
|
7972
|
+
content: "";
|
|
7973
|
+
position: absolute;
|
|
7974
|
+
top: .062rem;
|
|
7975
|
+
left: 0;
|
|
7976
|
+
bottom: .063rem;
|
|
7977
|
+
width: .25rem;
|
|
7978
|
+
background: #fff;
|
|
7979
|
+
border-top-right-radius: .25rem;
|
|
7980
|
+
border-bottom-right-radius: .25rem; }
|
|
7981
|
+
.sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.secondary.selected, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.secondary.selected:hover, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.secondary.selectedAsParent, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.secondary.selectedAsParent:hover, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.secondary:active, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.secondary:active:hover {
|
|
7982
|
+
background: rgba(255, 255, 255, 0.30196); }
|
|
7983
|
+
.sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selected, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selected:hover, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selectedAsParent, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selectedAsParent:hover, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary:active, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary:active:hover {
|
|
7984
|
+
background: rgba(200, 76, 14, 0.10196); }
|
|
7985
|
+
.sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selected .item-label, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selected:hover .item-label, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selectedAsParent .item-label, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selectedAsParent:hover .item-label, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary:active .item-label, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary:active:hover .item-label {
|
|
7986
|
+
color: #0b4b66; }
|
|
7987
|
+
.sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selected:before, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selected:hover:before, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selectedAsParent:before, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary.selectedAsParent:hover:before, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary:active:before, .sidebar.collapsed .sidebar-items-container .item-child-wrapper .sidebar-item.light.secondary:active:hover:before {
|
|
7988
|
+
content: "";
|
|
7989
|
+
position: absolute;
|
|
7990
|
+
top: .063rem;
|
|
7991
|
+
left: 0;
|
|
7992
|
+
bottom: .063rem;
|
|
7993
|
+
width: .25rem;
|
|
7994
|
+
background: #c84c0e;
|
|
7995
|
+
border-top-right-radius: .25rem;
|
|
7996
|
+
border-bottom-right-radius: .25rem; }
|
|
7873
7997
|
|
|
7874
7998
|
.digit-sidebar-footer-img {
|
|
7875
7999
|
width: 6.563rem;
|