Merge pull request #355 from Tangerine-Community/354_radio-blocks-css

[#354] CSS changes for generalization
Tangerine-Community · Jul 26, 2022 · 2413ad6 · 2413ad6
2 parents f372d7c + 76c5a64
commit 2413ad6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/input/tangy-radio-block.js b/input/tangy-radio-block.js
@@ -115,7 +115,8 @@ export class TangyRadioBlock extends TangyInputBase {
           pointer-events: none;
         }
         .toggle:active + label, .toggle:checked + label {
-          border-color: #ff620c;
+          /* Old selected orange color: #ff620c */
+          border-color: var(--button-selected-border-color, green);
         }
         .btn-lg {
           width: var(--width, 6.5rem);
@@ -137,15 +138,13 @@ export class TangyRadioBlock extends TangyInputBase {
           line-height: 1.5;
           border-radius: 0.5rem;
           color: #2a3f55;
-          border: 1px solid #ffbf09;
+          border-width: 7px solid #ffbf09;
           text-decoration: none;
           box-shadow: 0px 1px 6px 3px #ffaa004d;
           background-color: #ffbf09;
           transition-duration: 0.4s;
           position: relative;
           box-sizing: border-box;
-          letter-spacing: .4rem;
-          border-width: 4px;
       }
       </style>
       <input 

diff --git a/input/tangy-radio-blocks.js b/input/tangy-radio-blocks.js
@@ -68,8 +68,6 @@ class TangyRadioBlocks extends TangyInputBase {
           text-align: center;
           flex-grow: 1;
           align-items: center;
-          text-transform: lowercase;
-          letter-spacing: .4rem;
           position: relative;
         }
       /*
@@ -86,10 +84,10 @@ class TangyRadioBlocks extends TangyInputBase {
           margin: 10px 0 15px;
         }
         :host([hide-buttons]) tangy-radio-block {
-          border: 5px solid white;
+          border: 7px solid transparent;
         }
         :host([hide-buttons]) tangy-radio-block[value="on"] {
-          border: 5px solid green;
+          border: 7px solid var(--button-selected-border-color, green);
         }
         :host([no-margin]) tangy-radio-block {
           padding: 0px;