@ardium-ui/ui 1.0.0 → 1.0.1

package/themes/default/segment.scss

@@ -3,337 +3,337 @@
 @import '../variables';
 
 .ard-segment-container {
-    @include coloringMixins.typeColors();
-    --ard-_segment-padding: 0.15rem;
-    padding: var(--ard-_segment-padding);
-    font-family: 'Roboto', sans-serif;
-    margin: 2px;
-    border: 1px solid transparent;
-    font-weight: 500;
-    width: max-content;
-    height: max-content;
+  @include coloringMixins.typeColors();
+  --ard-_segment-padding: 0.15rem;
+  padding: var(--ard-_segment-padding);
+  font-family: 'Roboto', sans-serif;
+  margin: 2px;
+  border: 1px solid transparent;
+  font-weight: 500;
+  width: max-content;
+  height: max-content;
+  gap: var(--ard-_segment-padding);
+  overflow: hidden; //hide click indicator overflowing rounded corners on touchscreens
+
+  @include defaultMixins.formAppearances();
+  @include defaultMixins.formVariants();
+
+  //! button focus inficator
+  .ard-focus-overlay {
+    @include defaultMixins.focus-overlay;
+    background-color: var(--ard-cmpcl--content);
+  }
+
+  //! row & option styling
+  .ard-segment-row {
     gap: var(--ard-_segment-padding);
-    overflow: hidden; //hide click indicator overflowing rounded corners on touchscreens
+    --ard-_font-size: 0.85em;
+    height: calc(2.42em + 1px);
+    font-size: var(--ard-_font-size);
 
-    @include defaultMixins.formAppearances();
-    @include defaultMixins.formVariants();
-
-    //! button focus inficator
-    .ard-focus-overlay {
-        @include defaultMixins.focus-overlay;
-        background-color: var(--ard-cmpcl--content);
-    }
-
-    //! row & option styling
-    .ard-segment-row {
-        gap: var(--ard-_segment-padding);
-        --ard-_font-size: 0.85em;
-        height: calc(2.42em + 1px);
-        font-size: var(--ard-_font-size);
-
-        .ard-segment-option {
-            margin: 0;
-            padding: 0 1em;
-            height: 100%;
-            font-size: 1em;
-            min-width: 2.42em;
-            border: 1px solid transparent;
-            background: transparent;
-            position: relative;
-            cursor: pointer;
-            transition:
-                color 0.1s $timing-fn,
-                border-color 0.1s $timing-fn,
-                background-color 0.1s $timing-fn;
-            outline: none;
-            display: flex;
-            align-items: center;
-
-            &.ard-option-selected {
-                position: relative;
-                z-index: 2;
-            }
+    .ard-segment-option {
+      margin: 0;
+      padding: 0 1em;
+      height: 100%;
+      font-size: 1em;
+      min-width: 2.42em;
+      border: 1px solid transparent;
+      background: transparent;
+      position: relative;
+      cursor: pointer;
+      transition:
+        color 0.1s $timing-fn,
+        border-color 0.1s $timing-fn,
+        background-color 0.1s $timing-fn;
+      outline: none;
+      display: flex;
+      align-items: center;
+
+      &.ard-option-selected {
+        position: relative;
+        z-index: 2;
+      }
 
-            &.ard-option-disabled {
-                opacity: 60%;
-                pointer-events: none;
-            }
+      &.ard-option-disabled {
+        opacity: 60%;
+        pointer-events: none;
+      }
 
-            .ard-button-content {
-                position: relative;
-                z-index: 1;
-                width: max-content;
+      .ard-button-content {
+        position: relative;
+        z-index: 1;
+        width: max-content;
 
-                .ard-option-label {
-                    display: flex;
-                    align-items: center;
-                }
-            }
+        .ard-option-label {
+          display: flex;
+          align-items: center;
         }
+      }
+    }
+  }
+  //! highlighted/selected styling
+  .ard-segment-option {
+    &.ard-option-highlighted {
+      .ard-focus-overlay {
+        opacity: 4%;
+      }
+    }
+    &:active {
+      .ard-focus-overlay {
+        opacity: 12%;
+      }
     }
-    //! highlighted/selected styling
+    &.ard-option-selected {
+      .ard-focus-overlay {
+        opacity: 16%;
+      }
+    }
+  }
+  &.ard-using-keyboard {
     .ard-segment-option {
-        &.ard-option-highlighted {
-            .ard-focus-overlay {
-                opacity: 4%;
-            }
+      &.ard-option-highlighted {
+        .ard-focus-overlay {
+          opacity: 28%;
         }
-        &:active {
-            .ard-focus-overlay {
-                opacity: 12%;
-            }
+      }
+      &:active {
+        .ard-focus-overlay {
+          opacity: 34%;
+        }
+      }
+    }
+  }
+
+  //! appearances
+  &.ard-appearance-transparent {
+    background: transparent;
+
+    .ard-segment-row {
+      .ard-segment-option {
+        .ard-focus-overlay {
+          background-color: var(--ard-cmpcl--content);
         }
+
         &.ard-option-selected {
-            .ard-focus-overlay {
-                opacity: 16%;
-            }
+          color: var(--ard-cmpcl--content);
         }
+      }
     }
-    &.ard-using-keyboard {
-        .ard-segment-option {
-            &.ard-option-highlighted {
-                .ard-focus-overlay {
-                    opacity: 28%;
-                }
-            }
-            &:active {
-                .ard-focus-overlay {
-                    opacity: 34%;
-                }
-            }
-        }
+  }
+  &.ard-appearance-outlined,
+  &.ard-appearance-outlined-strong {
+    background: $bg;
+    padding: 0;
+
+    .ard-segment-option {
+      border: 1px solid $border-light;
+
+      &.ard-option-selected {
+        border-color: var(--ard-cmpcl--border);
+        color: var(--ard-cmpcl--content);
+      }
     }
+    &.ard-variant-rounded-connected,
+    &.ard-variant-sharp-connected {
+      gap: 0;
 
-    //! appearances
-    &.ard-appearance-transparent {
-        background: transparent;
+      .ard-segment-row {
+        gap: 0;
 
-        .ard-segment-row {
-            .ard-segment-option {
-                .ard-focus-overlay {
-                    background-color: var(--ard-cmpcl--content);
-                }
+        &:not(:first-child) {
+          margin-top: -1px;
+        }
 
-                &.ard-option-selected {
-                    color: var(--ard-cmpcl--content);
-                }
-            }
+        .ard-segment-option:not(:first-child) {
+          margin-left: -1px;
         }
+      }
     }
-    &.ard-appearance-outlined,
-    &.ard-appearance-outlined-strong {
-        background: $bg;
-        padding: 0;
-
+    &.ard-variant-rounded-connected {
+      .ard-segment-row {
         .ard-segment-option {
-            border: 1px solid $border-light;
-
-            &.ard-option-selected {
-                border-color: var(--ard-cmpcl--border);
-                color: var(--ard-cmpcl--content);
+          border-radius: 0 !important;
+        }
+        &:first-child {
+          .ard-segment-option {
+            &:first-child {
+              border-top-left-radius: var(--ard-variant-border-radius) !important;
             }
+            &:last-child {
+              border-top-right-radius: var(--ard-variant-border-radius) !important;
+            }
+            &:first-child:last-child {
+              border-top-right-radius: var(--ard-variant-border-radius) !important;
+              border-top-left-radius: var(--ard-variant-border-radius) !important;
+            }
+          }
         }
-        &.ard-variant-rounded-connected,
-        &.ard-variant-sharp-connected {
-            gap: 0;
-
-            .ard-segment-row {
-                gap: 0;
-
-                &:not(:first-child) {
-                    margin-top: -1px;
-                }
-
-                .ard-segment-option:not(:first-child) {
-                    margin-left: -1px;
-                }
+        &:last-child {
+          .ard-segment-option {
+            &:first-child {
+              border-bottom-left-radius: var(--ard-variant-border-radius) !important;
+            }
+            &:last-child {
+              border-bottom-right-radius: var(--ard-variant-border-radius) !important;
             }
+            &:first-child:last-child {
+              border-bottom-right-radius: var(--ard-variant-border-radius) !important;
+              border-bottom-left-radius: var(--ard-variant-border-radius) !important;
+            }
+          }
         }
-        &.ard-variant-rounded-connected {
-            .ard-segment-row {
-                .ard-segment-option {
-                    border-radius: 0 !important;
-                }
-                &:first-child {
-                    .ard-segment-option {
-                        &:first-child {
-                            border-top-left-radius: var(--ard-variant-border-radius) !important;
-                        }
-                        &:last-child {
-                            border-top-right-radius: var(--ard-variant-border-radius) !important;
-                        }
-                        &:first-child:last-child {
-                            border-top-right-radius: var(--ard-variant-border-radius) !important;
-                            border-top-left-radius: var(--ard-variant-border-radius) !important;
-                        }
-                    }
-                }
-                &:last-child {
-                    .ard-segment-option {
-                        &:first-child {
-                            border-bottom-left-radius: var(--ard-variant-border-radius) !important;
-                        }
-                        &:last-child {
-                            border-bottom-right-radius: var(--ard-variant-border-radius) !important;
-                        }
-                        &:first-child:last-child {
-                            border-bottom-right-radius: var(--ard-variant-border-radius) !important;
-                            border-bottom-left-radius: var(--ard-variant-border-radius) !important;
-                        }
-                    }
-                }
-                &:first-child:last-child {
-                    .ard-segment-option {
-                        &:first-child {
-                            border-top-left-radius: var(--ard-variant-border-radius) !important;
-                            border-bottom-left-radius: var(--ard-variant-border-radius) !important;
-                        }
-                        &:last-child {
-                            border-top-right-radius: var(--ard-variant-border-radius) !important;
-                            border-bottom-right-radius: var(--ard-variant-border-radius) !important;
-                        }
-                        &:first-child:last-child {
-                            border-radius: var(--ard-variant-border-radius) !important;
-                        }
-                    }
-                }
+        &:first-child:last-child {
+          .ard-segment-option {
+            &:first-child {
+              border-top-left-radius: var(--ard-variant-border-radius) !important;
+              border-bottom-left-radius: var(--ard-variant-border-radius) !important;
+            }
+            &:last-child {
+              border-top-right-radius: var(--ard-variant-border-radius) !important;
+              border-bottom-right-radius: var(--ard-variant-border-radius) !important;
             }
+            &:first-child:last-child {
+              border-radius: var(--ard-variant-border-radius) !important;
+            }
+          }
         }
+      }
     }
-    &.ard-appearance-outlined-strong {
-        .ard-segment-option.ard-option-selected {
-            background-color: var(--ard-cmpcl--bg);
-            color: var(--ard-cmpcl--on-bg);
-        }
+  }
+  &.ard-appearance-outlined-strong {
+    .ard-segment-option.ard-option-selected {
+      background-color: var(--ard-cmpcl--bg);
+      color: var(--ard-cmpcl--on-bg);
+    }
+  }
+  &.ard-appearance-filled {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      border-radius: inherit;
+      background: var(--ard-cmpcl--bg);
+      opacity: 15%;
     }
-    &.ard-appearance-filled {
-        position: relative;
 
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            border-radius: inherit;
-            background: var(--ard-cmpcl--bg);
-            opacity: 15%;
+    .ard-segment-option {
+      &.ard-option-highlighted {
+        .ard-focus-overlay {
+          opacity: 8%;
         }
-
-        .ard-segment-option {
-            &.ard-option-highlighted {
-                .ard-focus-overlay {
-                    opacity: 8%;
-                }
-            }
-            &.ard-option-selected {
-                .ard-focus-overlay {
-                    opacity: 20%;
-                }
-            }
+      }
+      &.ard-option-selected {
+        .ard-focus-overlay {
+          opacity: 20%;
         }
+      }
     }
-    &.ard-appearance-filled-strong {
-        background: var(--ard-cmpcl--bg);
-        border-radius: var(--ard-variant-border-radius);
+  }
+  &.ard-appearance-filled-strong {
+    background: var(--ard-cmpcl--bg);
+    border-radius: var(--ard-variant-border-radius);
 
-        .ard-segment-row {
-            .ard-segment-option {
-                color: var(--ard-cmpcl--on-bg);
-
-                .ard-focus-overlay {
-                    background-color: var(--ard-cmpcl--on-bg);
-                }
-                &.ard-option-highlighted {
-                    .ard-focus-overlay {
-                        opacity: 16%;
-                    }
-                }
-                &.ard-option-selected {
-                    color: var(--ard-cmpcl--content);
-                    background: var(--ard-cmpcl--on-bg);
-
-                    .ard-focus-overlay {
-                        opacity: 0;
-                    }
-                }
-            }
-        }
-    }
+    .ard-segment-row {
+      .ard-segment-option {
+        color: var(--ard-cmpcl--on-bg);
 
-    //! variants
-    &.ard-variant-pill {
-        border-radius: 16px;
+        .ard-focus-overlay {
+          background-color: var(--ard-cmpcl--on-bg);
+        }
+        &.ard-option-highlighted {
+          .ard-focus-overlay {
+            opacity: 16%;
+          }
+        }
+        &.ard-option-selected {
+          color: var(--ard-cmpcl--content);
+          background: var(--ard-cmpcl--on-bg);
 
-        .ard-segment-row {
-            .ard-segment-option {
-                border-radius: var(--ard-variant-border-radius);
-            }
+          .ard-focus-overlay {
+            opacity: 0;
+          }
         }
+      }
     }
-    &.ard-variant-rounded,
-    &.ard-variant-rounded-connected {
-        --ard-variant-border-radius: 8px;
+  }
+
+  //! variants
+  &.ard-variant-pill {
+    border-radius: 16px;
+
+    .ard-segment-row {
+      .ard-segment-option {
         border-radius: var(--ard-variant-border-radius);
+      }
+    }
+  }
+  &.ard-variant-rounded,
+  &.ard-variant-rounded-connected {
+    --ard-variant-border-radius: 8px;
+    border-radius: var(--ard-variant-border-radius);
 
-        .ard-segment-row {
-            .ard-segment-option {
-                border-radius: max(1px, calc(var(--ard-variant-border-radius) - var(--ard-_segment-padding)));
-            }
-        }
+    .ard-segment-row {
+      .ard-segment-option {
+        border-radius: max(1px, calc(var(--ard-variant-border-radius) - var(--ard-_segment-padding)));
+      }
     }
-    &.ard-variant-sharp,
-    &.ard-variant-sharp-connected {
-        border-radius: var(--ard-variant-border-radius);
+  }
+  &.ard-variant-sharp,
+  &.ard-variant-sharp-connected {
+    border-radius: var(--ard-variant-border-radius);
 
-        .ard-segment-row {
-            .ard-segment-option {
-                border-radius: calc(var(--ard-variant-border-radius));
-            }
-        }
+    .ard-segment-row {
+      .ard-segment-option {
+        border-radius: calc(var(--ard-variant-border-radius));
+      }
     }
+  }
 
-    //! compact
-    &.ard-compact {
-        .ard-segment-row {
-            --ard-_font-size: 0.85em;
-            height: calc(1.85em + 1px);
+  //! compact
+  &.ard-compact {
+    .ard-segment-row {
+      --ard-_font-size: 0.85em;
+      height: calc(1.85em + 1px);
 
-            .ard-segment-option {
-                padding: 0 0.5em;
-                min-width: 1.85em;
-            }
-        }
+      .ard-segment-option {
+        padding: 0 0.5em;
+        min-width: 1.85em;
+      }
     }
-
-    &.ard-icon-based {
-        .ard-segment-row .ard-segment-option {
-            padding: 0;
-            min-width: unset;
-            aspect-ratio: 1;
-            justify-content: center;
-        }
+  }
+
+  &.ard-icon-based {
+    .ard-segment-row .ard-segment-option {
+      padding: 0;
+      min-width: unset;
+      aspect-ratio: 1;
+      justify-content: center;
     }
+  }
 
-    //! disabled styling
-    &.ard-disabled {
-        pointer-events: none;
-        opacity: 50%;
+  //! disabled styling
+  &.ard-disabled {
+    pointer-events: none;
+    opacity: 50%;
 
-        .ard-focus-overlay {
-            opacity: 10%;
-        }
+    .ard-focus-overlay {
+      opacity: 10%;
+    }
 
-        //edge case for no coloring
-        &.ard-color-none {
-            .ard-button-icon,
-            .ard-button-content {
-                opacity: 60%;
-            }
-            .ard-focus-overlay {
-                background: var(--ard-cmpcl--overlay);
-            }
-        }
+    //edge case for no coloring
+    &.ard-color-none {
+      .ard-button-icon,
+      .ard-button-content {
+        opacity: 60%;
+      }
+      .ard-focus-overlay {
+        background: var(--ard-cmpcl--overlay);
+      }
     }
+  }
 }