@triptease/stylesheet 1.2.3 → 1.3.1
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/dist/base.css +106 -1
- package/dist/blocks.css +1 -1
- package/dist/compositions.css +1 -1
- package/dist/exceptions.css +1 -1
- package/dist/triptease.css +106 -1
- package/dist/utilities.css +1 -1
- package/package.json +1 -1
package/dist/base.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @triptease/stylesheet v1.
|
|
2
|
+
* @triptease/stylesheet v1.3.1
|
|
3
3
|
*/
|
|
4
4
|
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
|
|
5
5
|
@import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
|
|
@@ -930,6 +930,111 @@ input[type='radio'] {
|
|
|
930
930
|
}
|
|
931
931
|
}
|
|
932
932
|
@layer base{
|
|
933
|
+
|
|
934
|
+
@property --select-border-color {
|
|
935
|
+
syntax: '<color>';
|
|
936
|
+
inherits: true;
|
|
937
|
+
initial-value: #C5C8CE;
|
|
938
|
+
}
|
|
939
|
+
|
|
940
|
+
@property --select-background-color {
|
|
941
|
+
syntax: '<color>';
|
|
942
|
+
inherits: true;
|
|
943
|
+
initial-value: #FFFFFF;
|
|
944
|
+
}
|
|
945
|
+
|
|
946
|
+
@property --select-hover-background-color {
|
|
947
|
+
syntax: '<color>';
|
|
948
|
+
inherits: true;
|
|
949
|
+
initial-value: #F1F2F4;
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
@property --select-min-width {
|
|
953
|
+
syntax: '<length>';
|
|
954
|
+
inherits: true;
|
|
955
|
+
initial-value: 250px;
|
|
956
|
+
}
|
|
957
|
+
|
|
958
|
+
@property --select-max-width {
|
|
959
|
+
syntax: '<length>';
|
|
960
|
+
inherits: true;
|
|
961
|
+
initial-value: 300px;
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
select {
|
|
965
|
+
align-items: center;
|
|
966
|
+
background-color: var(--select-background-color);
|
|
967
|
+
border-style: solid;
|
|
968
|
+
border-width: 1px;
|
|
969
|
+
border-radius: var(--border-radius);
|
|
970
|
+
border-color: var(--select-border-color);
|
|
971
|
+
color: var(--color-text-400);
|
|
972
|
+
display: flex;
|
|
973
|
+
font-family: var(--font-family-sans);
|
|
974
|
+
font-size: var(--font-size-200);
|
|
975
|
+
line-height: 1.3;
|
|
976
|
+
max-width: var(--select-max-width);
|
|
977
|
+
min-width: var(--select-min-width);
|
|
978
|
+
padding: 0.5rem;
|
|
979
|
+
|
|
980
|
+
&::picker-icon {
|
|
981
|
+
content: '';
|
|
982
|
+
height: 12px;
|
|
983
|
+
width: 12px;
|
|
984
|
+
|
|
985
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentcolor" width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" stroke="currentcolor"/></svg>');
|
|
986
|
+
background-size: cover;
|
|
987
|
+
transition: rotate 0.2s allow-discrete;
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
&:open::picker-icon {
|
|
991
|
+
rotate: -180deg;
|
|
992
|
+
}
|
|
993
|
+
|
|
994
|
+
&:hover {
|
|
995
|
+
background-color: var(--select-hover-background-color);
|
|
996
|
+
}
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
@supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)) {
|
|
1000
|
+
select,
|
|
1001
|
+
::picker(select) {
|
|
1002
|
+
-webkit-appearance: base-select;
|
|
1003
|
+
-moz-appearance: base-select;
|
|
1004
|
+
appearance: base-select;
|
|
1005
|
+
}
|
|
1006
|
+
|
|
1007
|
+
::picker(select) {
|
|
1008
|
+
border: 1px solid var(--select-border-color);
|
|
1009
|
+
border-radius: var(--border-radius);
|
|
1010
|
+
top: calc(anchor(bottom) + var(--space-scale-1));
|
|
1011
|
+
}
|
|
1012
|
+
|
|
1013
|
+
option {
|
|
1014
|
+
text-align: left;
|
|
1015
|
+
padding: var(--space-scale-1);
|
|
1016
|
+
font-size: var(--font-size-200);
|
|
1017
|
+
font-weight: var(--font-weight-normal);
|
|
1018
|
+
color: var(--color-text-400);
|
|
1019
|
+
line-height: 1.1;
|
|
1020
|
+
box-sizing: border-box;
|
|
1021
|
+
}
|
|
1022
|
+
|
|
1023
|
+
option:is(:hover, :focus) {
|
|
1024
|
+
background-color: var(--select-hover-background-color);
|
|
1025
|
+
outline: none;
|
|
1026
|
+
}
|
|
1027
|
+
option:checked {
|
|
1028
|
+
font-weight: var(--font-weight-medium);
|
|
1029
|
+
color: var(--color-primary-400);
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
option::checkmark {
|
|
1033
|
+
display: none;
|
|
1034
|
+
}
|
|
1035
|
+
}
|
|
1036
|
+
}
|
|
1037
|
+
@layer base{
|
|
933
1038
|
input:not([type='checkbox'], [type='radio']),
|
|
934
1039
|
textarea {
|
|
935
1040
|
-webkit-appearance: none;
|
package/dist/blocks.css
CHANGED
package/dist/compositions.css
CHANGED
package/dist/exceptions.css
CHANGED
package/dist/triptease.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @triptease/stylesheet v1.
|
|
2
|
+
* @triptease/stylesheet v1.3.1
|
|
3
3
|
*/
|
|
4
4
|
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
|
|
5
5
|
@import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
|
|
@@ -930,6 +930,111 @@ input[type='radio'] {
|
|
|
930
930
|
}
|
|
931
931
|
}
|
|
932
932
|
@layer base{
|
|
933
|
+
|
|
934
|
+
@property --select-border-color {
|
|
935
|
+
syntax: '<color>';
|
|
936
|
+
inherits: true;
|
|
937
|
+
initial-value: #C5C8CE;
|
|
938
|
+
}
|
|
939
|
+
|
|
940
|
+
@property --select-background-color {
|
|
941
|
+
syntax: '<color>';
|
|
942
|
+
inherits: true;
|
|
943
|
+
initial-value: #FFFFFF;
|
|
944
|
+
}
|
|
945
|
+
|
|
946
|
+
@property --select-hover-background-color {
|
|
947
|
+
syntax: '<color>';
|
|
948
|
+
inherits: true;
|
|
949
|
+
initial-value: #F1F2F4;
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
@property --select-min-width {
|
|
953
|
+
syntax: '<length>';
|
|
954
|
+
inherits: true;
|
|
955
|
+
initial-value: 250px;
|
|
956
|
+
}
|
|
957
|
+
|
|
958
|
+
@property --select-max-width {
|
|
959
|
+
syntax: '<length>';
|
|
960
|
+
inherits: true;
|
|
961
|
+
initial-value: 300px;
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
select {
|
|
965
|
+
align-items: center;
|
|
966
|
+
background-color: var(--select-background-color);
|
|
967
|
+
border-style: solid;
|
|
968
|
+
border-width: 1px;
|
|
969
|
+
border-radius: var(--border-radius);
|
|
970
|
+
border-color: var(--select-border-color);
|
|
971
|
+
color: var(--color-text-400);
|
|
972
|
+
display: flex;
|
|
973
|
+
font-family: var(--font-family-sans);
|
|
974
|
+
font-size: var(--font-size-200);
|
|
975
|
+
line-height: 1.3;
|
|
976
|
+
max-width: var(--select-max-width);
|
|
977
|
+
min-width: var(--select-min-width);
|
|
978
|
+
padding: 0.5rem;
|
|
979
|
+
|
|
980
|
+
&::picker-icon {
|
|
981
|
+
content: '';
|
|
982
|
+
height: 12px;
|
|
983
|
+
width: 12px;
|
|
984
|
+
|
|
985
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentcolor" width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" stroke="currentcolor"/></svg>');
|
|
986
|
+
background-size: cover;
|
|
987
|
+
transition: rotate 0.2s allow-discrete;
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
&:open::picker-icon {
|
|
991
|
+
rotate: -180deg;
|
|
992
|
+
}
|
|
993
|
+
|
|
994
|
+
&:hover {
|
|
995
|
+
background-color: var(--select-hover-background-color);
|
|
996
|
+
}
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
@supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)) {
|
|
1000
|
+
select,
|
|
1001
|
+
::picker(select) {
|
|
1002
|
+
-webkit-appearance: base-select;
|
|
1003
|
+
-moz-appearance: base-select;
|
|
1004
|
+
appearance: base-select;
|
|
1005
|
+
}
|
|
1006
|
+
|
|
1007
|
+
::picker(select) {
|
|
1008
|
+
border: 1px solid var(--select-border-color);
|
|
1009
|
+
border-radius: var(--border-radius);
|
|
1010
|
+
top: calc(anchor(bottom) + var(--space-scale-1));
|
|
1011
|
+
}
|
|
1012
|
+
|
|
1013
|
+
option {
|
|
1014
|
+
text-align: left;
|
|
1015
|
+
padding: var(--space-scale-1);
|
|
1016
|
+
font-size: var(--font-size-200);
|
|
1017
|
+
font-weight: var(--font-weight-normal);
|
|
1018
|
+
color: var(--color-text-400);
|
|
1019
|
+
line-height: 1.1;
|
|
1020
|
+
box-sizing: border-box;
|
|
1021
|
+
}
|
|
1022
|
+
|
|
1023
|
+
option:is(:hover, :focus) {
|
|
1024
|
+
background-color: var(--select-hover-background-color);
|
|
1025
|
+
outline: none;
|
|
1026
|
+
}
|
|
1027
|
+
option:checked {
|
|
1028
|
+
font-weight: var(--font-weight-medium);
|
|
1029
|
+
color: var(--color-primary-400);
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
option::checkmark {
|
|
1033
|
+
display: none;
|
|
1034
|
+
}
|
|
1035
|
+
}
|
|
1036
|
+
}
|
|
1037
|
+
@layer base{
|
|
933
1038
|
input:not([type='checkbox'], [type='radio']),
|
|
934
1039
|
textarea {
|
|
935
1040
|
-webkit-appearance: none;
|
package/dist/utilities.css
CHANGED