Skip to content

Commit 1018d14

Browse files
adamlakiadamlaki
committed
Release v0.8.0
1 parent e90b1d6 commit 1018d14

File tree

6 files changed

+107
-91
lines changed

6 files changed

+107
-91
lines changed

‎CHANGELOG.md

+15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
# Spruce CSS Changelog
22

3+
## v0.8.0 (2022-06-08)
4+
5+
### New features
6+
- Add `spacer-clamp` function which help to generate `clamp()` functions from the `$spacers` map.
7+
8+
### Improvements
9+
- Add `html-smooth-scrolling` to `$settings`.
10+
- Add `$form-check-font-weight` variable.
11+
- Add `$form-check-line-height` variable.
12+
- Add `$table-line-height` variable.
13+
- Modify `$font-size-ratio`’s default value to `1.25`.
14+
15+
### Bugfix
16+
- Fix `generate-form-label` order under `generate-form` mixin.
17+
318
## v0.7.1 (2022-04-21)
419

520
### Bugfix

‎css/spruce.css

+86-86
Original file line numberDiff line numberDiff line change
@@ -615,22 +615,22 @@ h6 {
615615

616616
h1,
617617
.h1 {
618-
font-size: clamp(2.6837343406rem, 2vw + 1rem, 3.1573345183rem);
618+
font-size: clamp(2.0751953125rem, 2vw + 1rem, 2.44140625rem);
619619
}
620620

621621
h2,
622622
.h2 {
623-
font-size: clamp(2.0133040815rem, 2vw + 1rem, 2.368593037rem);
623+
font-size: clamp(1.66015625rem, 2vw + 1rem, 1.953125rem);
624624
}
625625

626626
h3,
627627
.h3 {
628-
font-size: clamp(1.51035565rem, 2vw + 1rem, 1.776889rem);
628+
font-size: clamp(1.328125rem, 2vw + 1rem, 1.5625rem);
629629
}
630630

631631
h4,
632632
.h4 {
633-
font-size: clamp(1.13305rem, 2vw + 1rem, 1.333rem);
633+
font-size: clamp(1.0625rem, 2vw + 1rem, 1.25rem);
634634
}
635635

636636
h5,
@@ -726,7 +726,7 @@ samp {
726726
}
727727

728728
.lead {
729-
font-size: 1.333rem;
729+
font-size: 1.25rem;
730730
}
731731

732732
.btn {
@@ -815,79 +815,17 @@ samp {
815815
outline: 2px solid transparent;
816816
}
817817

818-
.form-check {
819-
align-items: center;
820-
display: inline-flex;
818+
.form-label {
819+
color: var(--spruce-form-color-label);
820+
line-height: 1.5;
821821
}
822-
823-
.form-check--sm .form-check__control {
822+
.form-label--sm {
824823
font-size: 0.9rem;
825824
}
826-
827-
.form-check--lg .form-check__control {
825+
.form-label--lg {
828826
font-size: 1.1rem;
829827
}
830828

831-
.form-check__control {
832-
-webkit-appearance: none;
833-
-moz-appearance: none;
834-
appearance: none;
835-
background-color: var(--spruce-form-color-background);
836-
background-position: center;
837-
background-repeat: no-repeat;
838-
background-size: contain;
839-
border: 1px solid var(--spruce-form-color-border);
840-
flex-shrink: 0;
841-
font-size: 1rem;
842-
height: 1em;
843-
line-height: 1;
844-
margin-bottom: -0.1em;
845-
-webkit-margin-end: 0.5rem;
846-
margin-inline-end: 0.5rem;
847-
transition-duration: var(--spruce-transition-duration);
848-
transition-property: border, box-shadow;
849-
transition-timing-function: var(--spruce-transition-timing-function);
850-
width: 1em;
851-
}
852-
.form-check__control[type=radio] {
853-
border-radius: 50%;
854-
}
855-
.form-check__control[type=checkbox] {
856-
border-radius: 0.25rem;
857-
}
858-
.form-check__control:focus {
859-
border-color: var(--spruce-form-color-border-focus);
860-
box-shadow: 0 0 0 0.25rem var(--spruce-form-color-shadow-focus);
861-
outline: 2px solid transparent;
862-
}
863-
.form-check__control:checked {
864-
background-color: var(--spruce-form-color-check-background);
865-
border-color: var(--spruce-form-color-check-background);
866-
}
867-
.form-check__control:checked[type=radio] {
868-
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="6" style="fill:hsl%280deg, 0%, 100%%29;"/%3e%3c/svg%3e');
869-
}
870-
.form-check__control:checked[type=checkbox] {
871-
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M9.525,13.777l-2.411,-2.412c-0.234,-0.233 -0.613,-0.233 -0.846,0l-1.27,1.27c-0.233,0.233 -0.233,0.612 0,0.846l4.104,4.103c0.116,0.117 0.269,0.175 0.422,0.175l0.003,0c0.152,0 0.305,-0.058 0.421,-0.175l9.054,-9.053c0.233,-0.234 0.233,-0.613 -0,-0.846l-1.27,-1.269c-0.233,-0.234 -0.612,-0.234 -0.846,-0l-7.361,7.361Z" style="fill:hsl%280deg, 0%, 100%%29;"/%3e%3c/svg%3e');
872-
}
873-
.form-check__control:indeterminate[type=checkbox] {
874-
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M19.5,11.1c-0,-0.331 -0.269,-0.6 -0.6,-0.6l-13.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,1.8c0,0.331 0.269,0.6 0.6,0.6l13.8,0c0.331,0 0.6,-0.269 0.6,-0.6l-0,-1.8Z" style="fill:hsl%280deg, 0%, 100%%29;"/%3e%3c/svg%3e');
875-
background-color: var(--spruce-form-color-check-background);
876-
border-color: var(--spruce-form-color-check-background);
877-
}
878-
.form-check__control:disabled {
879-
background-color: var(--spruce-form-color-background-disabled);
880-
border-color: var(--spruce-form-color-border-disabled);
881-
cursor: not-allowed;
882-
}
883-
.form-check__control:disabled + .form-check__label {
884-
opacity: 0.5;
885-
}
886-
887-
.form-check__label {
888-
line-height: calc(2px + 2ex + 2px);
889-
}
890-
891829
.form-control {
892830
-webkit-appearance: none;
893831
-moz-appearance: none;
@@ -974,6 +912,79 @@ html[dir=rtl] select.form-control:not([multiple]):not([size]) {
974912
background-position: center left 0.5em;
975913
}
976914

915+
.form-check {
916+
align-items: center;
917+
display: inline-flex;
918+
}
919+
920+
.form-check--sm .form-check__control {
921+
font-size: 0.9rem;
922+
}
923+
924+
.form-check--lg .form-check__control {
925+
font-size: 1.1rem;
926+
}
927+
928+
.form-check__control {
929+
-webkit-appearance: none;
930+
-moz-appearance: none;
931+
appearance: none;
932+
background-color: var(--spruce-form-color-background);
933+
background-position: center;
934+
background-repeat: no-repeat;
935+
background-size: contain;
936+
border: 1px solid var(--spruce-form-color-border);
937+
flex-shrink: 0;
938+
font-size: 1rem;
939+
height: 1em;
940+
line-height: 1;
941+
margin-bottom: -0.1em;
942+
-webkit-margin-end: 0.5rem;
943+
margin-inline-end: 0.5rem;
944+
transition-duration: var(--spruce-transition-duration);
945+
transition-property: border, box-shadow;
946+
transition-timing-function: var(--spruce-transition-timing-function);
947+
width: 1em;
948+
}
949+
.form-check__control[type=radio] {
950+
border-radius: 50%;
951+
}
952+
.form-check__control[type=checkbox] {
953+
border-radius: 0.25rem;
954+
}
955+
.form-check__control:focus {
956+
border-color: var(--spruce-form-color-border-focus);
957+
box-shadow: 0 0 0 0.25rem var(--spruce-form-color-shadow-focus);
958+
outline: 2px solid transparent;
959+
}
960+
.form-check__control:checked {
961+
background-color: var(--spruce-form-color-check-background);
962+
border-color: var(--spruce-form-color-check-background);
963+
}
964+
.form-check__control:checked[type=radio] {
965+
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="6" style="fill:hsl%280deg, 0%, 100%%29;"/%3e%3c/svg%3e');
966+
}
967+
.form-check__control:checked[type=checkbox] {
968+
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M9.525,13.777l-2.411,-2.412c-0.234,-0.233 -0.613,-0.233 -0.846,0l-1.27,1.27c-0.233,0.233 -0.233,0.612 0,0.846l4.104,4.103c0.116,0.117 0.269,0.175 0.422,0.175l0.003,0c0.152,0 0.305,-0.058 0.421,-0.175l9.054,-9.053c0.233,-0.234 0.233,-0.613 -0,-0.846l-1.27,-1.269c-0.233,-0.234 -0.612,-0.234 -0.846,-0l-7.361,7.361Z" style="fill:hsl%280deg, 0%, 100%%29;"/%3e%3c/svg%3e');
969+
}
970+
.form-check__control:indeterminate[type=checkbox] {
971+
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M19.5,11.1c-0,-0.331 -0.269,-0.6 -0.6,-0.6l-13.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,1.8c0,0.331 0.269,0.6 0.6,0.6l13.8,0c0.331,0 0.6,-0.269 0.6,-0.6l-0,-1.8Z" style="fill:hsl%280deg, 0%, 100%%29;"/%3e%3c/svg%3e');
972+
background-color: var(--spruce-form-color-check-background);
973+
border-color: var(--spruce-form-color-check-background);
974+
}
975+
.form-check__control:disabled {
976+
background-color: var(--spruce-form-color-background-disabled);
977+
border-color: var(--spruce-form-color-border-disabled);
978+
cursor: not-allowed;
979+
}
980+
.form-check__control:disabled + .form-check__label {
981+
opacity: 0.5;
982+
}
983+
984+
.form-check__label {
985+
line-height: calc(2px + 2ex + 2px);
986+
}
987+
977988
.form-description {
978989
color: var(--spruce-form-color-text);
979990
display: block;
@@ -1002,7 +1013,7 @@ fieldset + fieldset {
10021013

10031014
legend {
10041015
color: var(--spruce-form-color-legend);
1005-
font-size: clamp(1rem, 5vw, 1.333rem);
1016+
font-size: clamp(1rem, 5vw, 1.25rem);
10061017
font-weight: 700;
10071018
}
10081019

@@ -1028,8 +1039,8 @@ legend {
10281039
margin-block-start: 0;
10291040
}
10301041
.form-group--vertical-check > * + * {
1031-
-webkit-margin-before: 0.5rem;
1032-
margin-block-start: 0.5rem;
1042+
-webkit-margin-before: 1rem;
1043+
margin-block-start: 1rem;
10331044
}
10341045
.form-group--grid {
10351046
align-items: flex-start;
@@ -1038,17 +1049,6 @@ legend {
10381049
gap: 0.5rem;
10391050
}
10401051

1041-
.form-label {
1042-
color: var(--spruce-form-color-label);
1043-
line-height: 1.5;
1044-
}
1045-
.form-label--sm {
1046-
font-size: 0.9rem;
1047-
}
1048-
.form-label--lg {
1049-
font-size: 1.1rem;
1050-
}
1051-
10521052
.form-row--mixed {
10531053
--col-width: 20ch;
10541054
display: flex;

0 commit comments

Comments
 (0)