feat(KUI-1149): update style of semester selector ("tabs"/radio buttons)

KTH · Aug 15, 2024 · 93853eb · 93853eb
1 parent e626f62
commit 93853eb
Showing 1 changed file with 33 additions and 7 deletions.
diff --git a/public/css/kursinfo-web.scss b/public/css/kursinfo-web.scss
@@ -26,9 +26,10 @@
 .roundSelector {
   fieldset legend,
   label:has(+ .select-wrapper) {
-    margin-top: 1rem;
+    margin-top: 1.5rem;
     margin-bottom: 0.25rem;
     display: block;
+    padding: 0;
     @include typography.font-heading-xs;
   }
 
@@ -44,24 +45,49 @@
     }
 
     input[type='radio'] + label {
-      @extend .kth-button;
+      color: var(--color-primary);
+      cursor: pointer;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+    input[type='radio']:focus-visible + label,
+    input[type='radio']:hover + label {
+      &:hover {
+        color: var(--color-primary-hover);
+        text-decoration: underline;
+        text-decoration-thickness: 0.25rem;
+        text-underline-offset: 0.5rem;
+      }
     }
+
+    input[type='radio']:focus-visible + label {
+      outline: 5px auto Highlight;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: 3px;
+    }
+
     input[type='radio']:not(:checked) + label {
-      @extend .secondary;
+      @include typography.font-default;
     }
+
     input[type='radio']:checked + label {
-      @extend .primary;
+      @include typography.font-heading-xs;
+      text-decoration: underline;
+      text-decoration-thickness: 0.25rem;
+      text-underline-offset: 0.5rem;
     }
+
     div {
       display: flex;
       flex-wrap: wrap;
-      gap: 0.5rem;
+      gap: 1.5rem;
     }
   }
 
   .roundSelector__selectAndApplicationButton {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
     display: flex;
     justify-content: space-between;
     gap: 1rem;