@innovaccer/design-system 2.16.0 → 2.16.1-0
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/css/dist/index.css +91 -5
- package/css/dist/index.css.map +1 -1
- package/css/src/components/actionButton.css +23 -0
- package/css/src/components/stepper.css +62 -5
- package/css/src/components/textarea.css +2 -0
- package/dist/.lib/tsconfig.type.tsbuildinfo +38 -8
- package/dist/core/components/atoms/dropdown/utility.d.ts +1 -0
- package/dist/core/components/atoms/input/Input.d.ts +11 -1
- package/dist/core/components/atoms/input/actionButton/ActionButton.d.ts +21 -0
- package/dist/core/components/atoms/input/actionButton/index.d.ts +2 -0
- package/dist/core/components/atoms/metricInput/MetricInput.d.ts +1 -0
- package/dist/index.esm.js +84 -13
- package/dist/index.js +84 -13
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.br +0 -0
- package/dist/index.umd.js.gz +0 -0
- package/package.json +1 -1
package/css/dist/index.css
CHANGED
|
@@ -833,6 +833,33 @@ body {
|
|
|
833
833
|
height: var(--spacing);
|
|
834
834
|
}
|
|
835
835
|
|
|
836
|
+
.ActionButton {
|
|
837
|
+
display: flex;
|
|
838
|
+
flex-shrink: 0;
|
|
839
|
+
overflow: hidden;
|
|
840
|
+
-webkit-user-select: none;
|
|
841
|
+
-moz-user-select: none;
|
|
842
|
+
-ms-user-select: none;
|
|
843
|
+
user-select: none;
|
|
844
|
+
cursor: pointer;
|
|
845
|
+
color: var(--inverse-lighter);
|
|
846
|
+
border-radius: 50%;
|
|
847
|
+
padding: var(--spacing-s);
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
.ActionButton:focus-visible,
|
|
851
|
+
.ActionButton:focus {
|
|
852
|
+
outline: var(--spacing-s) solid var(--secondary-shadow);
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
.ActionButton:hover {
|
|
856
|
+
background-color: var(--secondary);
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
.ActionButton:active {
|
|
860
|
+
background-color: var(--secondary-dark);
|
|
861
|
+
}
|
|
862
|
+
|
|
836
863
|
/* badge */
|
|
837
864
|
|
|
838
865
|
.Avatar {
|
|
@@ -5900,19 +5927,76 @@ body {
|
|
|
5900
5927
|
cursor: pointer;
|
|
5901
5928
|
}
|
|
5902
5929
|
|
|
5903
|
-
.Step
|
|
5904
|
-
background-color: var(--
|
|
5905
|
-
pointer-events: none;
|
|
5930
|
+
.Step:hover {
|
|
5931
|
+
background-color: var(--secondary);
|
|
5906
5932
|
}
|
|
5907
5933
|
|
|
5908
|
-
.Step
|
|
5909
|
-
|
|
5934
|
+
.Step:active {
|
|
5935
|
+
background-color: var(--secondary-dark);
|
|
5936
|
+
}
|
|
5937
|
+
|
|
5938
|
+
.Step:focus,
|
|
5939
|
+
.Step:focus-visible {
|
|
5940
|
+
box-shadow: var(--shadow-spread) var(--secondary-shadow);
|
|
5941
|
+
outline: none;
|
|
5942
|
+
}
|
|
5943
|
+
|
|
5944
|
+
/* Completed State */
|
|
5945
|
+
|
|
5946
|
+
.Step--completed {
|
|
5947
|
+
color: var(--primary-dark);
|
|
5910
5948
|
}
|
|
5911
5949
|
|
|
5950
|
+
.Step--completed:hover {
|
|
5951
|
+
background-color: var(--secondary);
|
|
5952
|
+
}
|
|
5953
|
+
|
|
5954
|
+
.Step--completed:active {
|
|
5955
|
+
background-color: var(--secondary-dark);
|
|
5956
|
+
}
|
|
5957
|
+
|
|
5958
|
+
.Step--completed:focus,
|
|
5959
|
+
.Step--completed:focus-visible {
|
|
5960
|
+
box-shadow: var(--shadow-spread) var(--secondary-shadow);
|
|
5961
|
+
outline: none;
|
|
5962
|
+
}
|
|
5963
|
+
|
|
5964
|
+
/* Active State */
|
|
5965
|
+
|
|
5912
5966
|
.Step--active {
|
|
5967
|
+
background-color: var(--primary-lightest);
|
|
5968
|
+
color: var(--primary-dark);
|
|
5913
5969
|
transition-delay: var(--duration--fast-02);
|
|
5914
5970
|
}
|
|
5915
5971
|
|
|
5972
|
+
.Step--active:hover {
|
|
5973
|
+
background-color: var(--primary-lighter);
|
|
5974
|
+
}
|
|
5975
|
+
|
|
5976
|
+
.Step--active:focus,
|
|
5977
|
+
.Step--active:focus-visible {
|
|
5978
|
+
background-color: var(--primary-lightest);
|
|
5979
|
+
box-shadow: var(--shadow-spread) var(--primary-shadow);
|
|
5980
|
+
outline: none;
|
|
5981
|
+
}
|
|
5982
|
+
|
|
5983
|
+
.Step--active:active {
|
|
5984
|
+
background-color: var(--primary-lighter);
|
|
5985
|
+
color: var(--primary-darker);
|
|
5986
|
+
}
|
|
5987
|
+
|
|
5988
|
+
.Step--active:active .Stepper-text {
|
|
5989
|
+
color: var(--primary-darker);
|
|
5990
|
+
}
|
|
5991
|
+
|
|
5992
|
+
/* Disabled State */
|
|
5993
|
+
|
|
5994
|
+
.Step--disabled {
|
|
5995
|
+
cursor: not-allowed;
|
|
5996
|
+
color: var(--inverse-lightest);
|
|
5997
|
+
pointer-events: none;
|
|
5998
|
+
}
|
|
5999
|
+
|
|
5916
6000
|
.Stepper-animate {
|
|
5917
6001
|
transition-delay: var(--duration--fast-02);
|
|
5918
6002
|
transition: var(--duration--fast-02) var(--standard-productive-curve);
|
|
@@ -6230,6 +6314,7 @@ body {
|
|
|
6230
6314
|
color: var(--inverse);
|
|
6231
6315
|
padding: var(--spacing) var(--spacing-l);
|
|
6232
6316
|
resize: none;
|
|
6317
|
+
cursor: auto; /* this ensures text cursor over text, and pointer cursor over scroll*/
|
|
6233
6318
|
}
|
|
6234
6319
|
|
|
6235
6320
|
.Textarea::-moz-placeholder {
|
|
@@ -6251,6 +6336,7 @@ body {
|
|
|
6251
6336
|
.Textarea:focus-within {
|
|
6252
6337
|
outline: none;
|
|
6253
6338
|
border: var(--spacing-xs) solid var(--primary);
|
|
6339
|
+
box-shadow: var(--shadow-spread) var(--primary-shadow);
|
|
6254
6340
|
}
|
|
6255
6341
|
|
|
6256
6342
|
.Textarea:disabled {
|