Skip to content

Commit

Permalink
(#193) Update custom switches for Font Awesome 6
Browse files Browse the repository at this point in the history 
The icons used in the switches have changed slightly, and they needed
to be adjusted so that they were centered when switches were checked
and unchecked. Now, they look great and are not off center.
  • Loading branch information
@st3phhays
st3phhays committed Jan 12, 2024
1 parent b070d3a commit a7e6b03
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 63 deletions.
80 changes: 38 additions & 42 deletions scss/_inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,117 +58,113 @@
box-shadow: none !important;
}

&::after,
&::before {
&::before,
&::after {
position: absolute;
top: 0;
top: 50%;
display: inline-block;
width: 25px;
height: 25px;
font: var(--fa-font-solid);
font-size: .875em;
font-style: normal;
font-variant: normal;
line-height: 1.9;
content: "\f054";
line-height: 1.7;
text-align: center;
content: "";
border-radius: 100%;
transform: translateY(-50%);
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}

&::before {
left: -5px;
width: 25px;
height: 25px;
content: "";
border-radius: 100%;
&:checked::before,
&:checked::after {
right: -1px;
}

&:checked::before {
left: 1.8rem;
&:not(:checked)::before,
&:not(:checked)::after {
left: -1px;
}
}
}

&.form-switch-active .form-check-input {
&::after {
left: .1rem;
color: $black;
content: "\f00c";
}

&:checked,
&::before {
background: var(--bs-success);
}

&::before {
border: 1px solid $green-300;
}

&:checked::after {
left: 2.2rem;
&:checked,
&::before {
background: var(--bs-success);
}
}

&.form-switch-expired .form-check-input {
&::after {
left: .35rem;
color: $black;
content: "\21";
}

&:checked,
&::before {
background: var(--bs-danger);
}

&::before {
border: 1px solid $red-300;
}

&:checked::after {
left: 2.45rem;
&:checked,
&::before {
background: var(--bs-danger);
}
}

&.form-switch-deactivated .form-check-input {
&::after {
top: -.03rem;
left: .04rem;
color: $white;
content: "\f05e";
}

&::before {
border: 1px solid $gray-300;
}

&:checked,
&::before {
background: $secondary;
}

&::before {
border: 1px solid $gray-300;
&:not(:checked)::after {
left: -.5px;
}

&:checked::after {
left: 2.15rem;
right: -1.5px;
}
}

&.form-switch-latest .form-check-input {
&::after {
top: -.03rem;
left: -.04rem;
color: var(--bs-warning);
content: "\f005";
}

&::before {
background: var(--choco-theme-elevation-2);
border: 1px solid var(--bs-warning);
}

&:checked {
background: var(--bs-warning);
}

&::before {
background: var(--choco-theme-elevation-2);
border: 1px solid var(--bs-warning);
&:not(:checked)::after {
left: -1.5px;
}

&:checked::after {
left: 2.09rem;
right: -.5px;
}
}
}
Expand Down
42 changes: 21 additions & 21 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1196,23 +1196,23 @@
integrity sha512-CNy5vSwN3fsUStPRLX7fUYojyuzoEMSXPl7zSLJ8TgtRfjv24LOnOWKT2zYwaHZCJGkdyRnTmstR0P+Ah503Gw==

"@humanwhocodes/config-array@^0.11.13":
version "0.11.13"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==
version "0.11.14"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
dependencies:
"@humanwhocodes/object-schema" "^2.0.1"
debug "^4.1.1"
"@humanwhocodes/object-schema" "^2.0.2"
debug "^4.3.1"
minimatch "^3.0.5"

"@humanwhocodes/module-importer@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==

"@humanwhocodes/object-schema@^2.0.1":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
"@humanwhocodes/object-schema@^2.0.2":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==

"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
version "0.3.3"
Expand Down Expand Up @@ -1247,9 +1247,9 @@
integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==

"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
version "0.3.20"
resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
version "0.3.21"
resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.21.tgz#5dc1df7b3dc4a6209e503a924e1ca56097a2bb15"
integrity sha512-SRfKmRe1KvYnxjEMtxEr+J4HIeMX5YBg/qhRHpxEIGjhX1rshcHlnFUE9K0GazhVKWM7B+nARSkV8LuvJdJ5/g==
dependencies:
"@jridgewell/resolve-uri" "^3.1.0"
"@jridgewell/sourcemap-codec" "^1.4.14"
Expand Down Expand Up @@ -1350,9 +1350,9 @@
integrity sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==

"@types/node@*":
version "20.10.8"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.10.8.tgz#f1e223cbde9e25696661d167a5b93a9b2a5d57c7"
integrity sha512-f8nQs3cLxbAFc00vEU59yf9UyGUftkPaLGfvbVOIDdx2i1b8epBqj2aNGyP19fiyXWvlmZ7qC1XLjAzw/OKIeA==
version "20.11.0"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.0.tgz#8e0b99e70c0c1ade1a86c4a282f7b7ef87c9552f"
integrity sha512-o9bjXmDNcF7GbM4CNQpmi+TutCgap/K3w1JyKgxAjqx41zp9qlIAVFi0IhCNsJcXolEqLWhbFbEeL0PvYm4pcQ==
dependencies:
undici-types "~5.26.4"

Expand Down Expand Up @@ -3016,9 +3016,9 @@ easymde@^2.16.1:
marked "^4.1.0"

electron-to-chromium@^1.4.601:
version "1.4.626"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.626.tgz#c20e1706354a31721b65e81496800534dd04b222"
integrity sha512-f7/be56VjRRQk+Ric6PmIrEtPcIqsn3tElyAu9Sh6egha2VLJ82qwkcOdcnT06W+Pb6RUulV1ckzrGbKzVcTHg==
version "1.4.629"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.629.tgz#9cbffe1b08a5627b6a25118360f7fd3965416caf"
integrity sha512-5UUkr3k3CZ/k+9Sw7vaaIMyOzMC0XbPyprKI3n0tbKDqkzTDOjK4izm7DxlkueRMim6ZZQ1ja9F7hoFVplHihA==

elliptic@^6.5.3, elliptic@^6.5.4:
version "6.5.4"
Expand Down Expand Up @@ -6200,9 +6200,9 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==

safe-regex-test@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.1.tgz#207369b445fd007e534864635b28b2ae7b105783"
integrity sha512-Y5NejJTTliTyY4H7sipGqY+RX5P87i3F7c4Rcepy72nq+mNLhIsD0W4c7kEmduMDQCSqtPsXPlSTsFhh2LQv+g==
version "1.0.2"
resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.2.tgz#3ba32bdb3ea35f940ee87e5087c60ee786c3f6c5"
integrity sha512-83S9w6eFq12BBIJYvjMux6/dkirb8+4zJRA9cxNBVb7Wq5fJBW+Xze48WqR8pxua7bDuAaaAxtVVd4Idjp1dBQ==
dependencies:
call-bind "^1.0.5"
get-intrinsic "^1.2.2"
Expand Down

0 comments on commit a7e6b03

Please sign in to comment.