radio button css import

hackforla · Nov 14, 2023 · b315f51 · b315f51
1 parent a018f78
commit b315f51
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 53 deletions.
diff --git a/docs/components/sass/abstracts/_variables.scss b/docs/components/sass/abstracts/_variables.scss
@@ -30,6 +30,8 @@ $button-hovercolor: $color-darkgreen;
 
 $radio-color: $color-green;
 $radio-hovercolor: $color-darkgreen;
+$radio-disabled: #c6c6c6;
+$radio-button-width: 26px;
 
 $dropdown-hover-color: #CFE1E4;
 $dropdown-select-color: #A0C4C9;
@@ -43,6 +45,8 @@ $tab-hover-color: $color-darkgreen;
 
 
 
+
+
 /// Breakpoints map
 /// @prop {String} keys - Keys are identifiers mapped to a given length
 /// @prop {Map} values - Values are actual breakpoints expressed in pixels

diff --git a/docs/components/sass/components/_radio.scss b/docs/components/sass/components/_radio.scss
@@ -1,24 +1,27 @@
+// --8<-- [start:unchecked]
 input[type="radio"]{
     border:.5px solid $radio-color;
     border-radius: 50%;
-    width: 26px;
+    width: $radio-button-width;
     margin-right: 5px;
-    accent-color: red;
     appearance: none;
     -webkit-appearance: none;
 
 
     &:disabled {
-        background: #c6c6c6;
+        background-color: $radio-disabled;
     }
-    &.hover{
+    &.hover,
+    :hover{
         opacity: .3;
     }
 
 }
+// --8<-- [end:unchecked]
 
+// --8<-- [start:checked]
 input[type="radio"]:checked {
-    width: 26px;
+
     margin-right: 5px;
     accent-color: $radio-color;
     background-color: $radio-color;
@@ -28,14 +31,14 @@ input[type="radio"]:checked {
 
     &.disabled,
     :disabled{
-        accent-color: #6f6f6f;
+        background-color: $radio-disabled;
     }
     &.hover,
     :hover{
         opacity: .3;
     }
 
 }
-
+// --8<-- [end:checked]
 
 
diff --git a/docs/components/sass/main.css b/docs/components/sass/main.css
@@ -159,20 +159,19 @@ input[type=radio] {
   border-radius: 50%;
   width: 26px;
   margin-right: 5px;
-  accent-color: red;
   -moz-appearance: none;
        appearance: none;
   -webkit-appearance: none;
 }
 input[type=radio]:disabled {
-  background: #c6c6c6;
+  background-color: #c6c6c6;
 }
-input[type=radio].hover {
+input[type=radio].hover,
+input[type=radio] :hover {
   opacity: 0.3;
 }
 
 input[type=radio]:checked {
-  width: 26px;
   margin-right: 5px;
   accent-color: #247984;
   background-color: #247984;
@@ -181,7 +180,7 @@ input[type=radio]:checked {
 }
 input[type=radio]:checked.disabled,
 input[type=radio]:checked :disabled {
-  accent-color: #6f6f6f;
+  background-color: #c6c6c6;
 }
 input[type=radio]:checked.hover,
 input[type=radio]:checked :hover {

diff --git a/docs/components/sass/main.css.map b/docs/components/sass/main.css.map
diff --git a/docs/radio.md b/docs/radio.md
@@ -52,27 +52,8 @@ hide:
     === "CSS"
 
         ``` css
-
-        .btn-sm{
-            background-color: #247984;
-            height: 40px;
-            border-radius: 20px;
-            padding: 0px 32px;
-            color: white;
-            line-height: 40px;
-            width: fit-content;
-        }
-
-        .btn .hover{
-            background: #0D5761;
-        }
-        .btn .focused{
-            border-color: #0D5761;
-            outline-color: #0D5761;
-        }
-        .btn .disabled{
-            background: #c6c6c6;
-        }
+            --8<-- "_radio.scss:unchecked"
+        
         
         ```
 === "Button Selected"
@@ -124,24 +105,6 @@ hide:
 
         ``` css
 
-        .btn-md{
-            background-color: #247984;
-            height: 60px;
-            border-radius: 60px;
-            padding: 0px 50px;
-            line-height: 60px;
-            width: fit-content;
-        }
-
-        .btn .hover{
-            background: #0D5761;
-        }
-        .btn .focus{
-            border-color: #0D5761;
-            outline-color: #0D5761;
-        }
-        .btn .disabled{
-            background: #c6c6c6;
-        }
+        --8<-- "_radio.scss:checked"
         
         ```