chore(components/indicators): chevron split scss stylesheets (#2520)

blackbaud · Jul 18, 2024 · 9c78db4 · 9c78db4
1 parent 39a8bca
commit 9c78db4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/libs/components/indicators/src/lib/modules/chevron/chevron.component.ts b/libs/components/indicators/src/lib/modules/chevron/chevron.component.ts
@@ -1,13 +1,18 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { SkyThemeComponentClassDirective } from '@skyux/theme';
 
 /**
  * Creates an accessible button that wraps the chevron icon.
  * @internal
  */
 @Component({
   selector: 'sky-chevron',
-  styleUrls: ['./chevron.component.scss'],
+  styleUrls: [
+    './chevron.default.component.scss',
+    './chevron.modern.component.scss',
+  ],
   templateUrl: './chevron.component.html',
+  hostDirectives: [SkyThemeComponentClassDirective],
 })
 export class SkyChevronComponent {
   /**

diff --git a/libs/components/indicators/src/lib/modules/chevron/chevron.default.component.scss b/libs/components/indicators/src/lib/modules/chevron/chevron.default.component.scss
@@ -0,0 +1,20 @@
+@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
+@use 'libs/components/theme/src/lib/styles/variables' as *;
+
+@include mixins.sky-component('default', '.sky-chevron') {
+  border: none;
+  background-color: transparent;
+  flex-shrink: 0;
+  height: $sky-context-menu-size;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: $sky-context-menu-size;
+  cursor: pointer;
+  position: relative;
+  vertical-align: top;
+
+  &:hover .sky-chevron-part {
+    border-color: darken($sky-text-color-icon-borderless, 20%);
+  }
+}
diff --git a/...ib/modules/chevron/chevron.component.scss → ...les/chevron/chevron.modern.component.scss b/...ib/modules/chevron/chevron.component.scss → ...les/chevron/chevron.modern.component.scss
@@ -1,10 +1,7 @@
+@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
 
-button {
-  background: lightblue;
-}
-
-.sky-chevron {
+@include mixins.sky-component('modern', '.sky-chevron') {
   border: none;
   background-color: transparent;
   flex-shrink: 0;