[#392] Fixed inline css dependency issues. (#431)

civictheme · Dec 2, 2024 · f64bac1 · f64bac1 · github-actions · Dec 2, 2024
1 parent 111194f
commit f64bac1
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 21 deletions.
diff --git a/components/00-base/mixins/_content-link.scss b/components/00-base/mixins/_content-link.scss
@@ -14,35 +14,34 @@
     padding: ct-spacing(0.375) 0 ct-spacing(0.5);
   }
 
-  &,
-  &.ct-theme-light {
-    color: $ct-content-link-light-color;
+  &:visited {
+    @include ct-content-link-visited();
+  }
+}
 
-    &:focus-visible {
-      @include ct-outline();
-    }
+@mixin ct-content-link-light() {
+  color: $ct-content-link-light-color;
 
-    &:hover {
-      background-color: $ct-content-link-light-hover-background-color;
-      color: $ct-content-link-light-hover-color;
-    }
+  &:focus-visible {
+    @include ct-outline();
   }
 
-  &.ct-theme-dark {
-    color: $ct-content-link-dark-color;
+  &:hover {
+    background-color: $ct-content-link-light-hover-background-color;
+    color: $ct-content-link-light-hover-color;
+  }
+}
 
-    &:focus-visible {
-      @include ct-outline(true);
-    }
+@mixin ct-content-link-dark() {
+  color: $ct-content-link-dark-color;
 
-    &:hover {
-      background-color: $ct-content-link-dark-hover-background-color;
-      color: $ct-content-link-dark-hover-color;
-    }
+  &:focus-visible {
+    @include ct-outline(true);
   }
 
-  &:visited {
-    @include ct-content-link-visited();
+  &:hover {
+    background-color: $ct-content-link-dark-hover-background-color;
+    color: $ct-content-link-dark-hover-color;
   }
 }
 

diff --git a/components/00-base/mixins/_content.scss b/components/00-base/mixins/_content.scss
@@ -248,6 +248,10 @@
     color: $ct-basic-content-light-heading-6-color;
   }
 
+  a:not(.ct-button) {
+    @include ct-content-link-light();
+  }
+
   blockquote {
     color: $ct-basic-content-light-blockquote-color;
     background-color: $ct-basic-content-light-blockquote-background-color;
@@ -313,6 +317,10 @@
     color: $ct-basic-content-dark-heading-6-color;
   }
 
+  a:not(.ct-button) {
+    @include ct-content-link-dark();
+  }
+
   blockquote {
     color: $ct-basic-content-dark-blockquote-color;
     background-color: $ct-basic-content-dark-blockquote-background-color;

diff --git a/components/00-base/mixins/_image.scss b/components/00-base/mixins/_image.scss
@@ -62,6 +62,7 @@
   position: relative;
   width: 100%;
   padding-top: 100%;
+  box-sizing: border-box;
 
   img {
     position: absolute;

diff --git a/components/01-atoms/content-link/content-link.scss b/components/01-atoms/content-link/content-link.scss
@@ -4,4 +4,13 @@
 
 .ct-content-link {
   @include ct-content-link-base();
+
+  &,
+  &.ct-theme-light {
+    @include ct-content-link-light();
+  }
+
+  &.ct-theme-dark {
+    @include ct-content-link-dark();
+  }
 }
diff --git a/components/01-atoms/iframe/iframe.scss b/components/01-atoms/iframe/iframe.scss
@@ -6,6 +6,7 @@
   $root: &;
 
   border: 0;
+  box-sizing: border-box;
 
   &#{$root}--with-background {
     padding-left: $ct-iframe-space-horizontal;

diff --git a/components/01-atoms/input/input.scss b/components/01-atoms/input/input.scss
@@ -23,6 +23,7 @@
     border-style: solid;
     border-width: $_border-width;
     padding: $_vertical_spacing $_horizontal_spacing;
+    box-sizing: border-box;
     width: 100%;
   }
 

diff --git a/components/02-molecules/navigation-card/navigation-card.scss b/components/02-molecules/navigation-card/navigation-card.scss
@@ -45,6 +45,7 @@
   #{$root}__content {
     width: 100%;
     padding: ct-spacing(3);
+    box-sizing: border-box;
   }
 
   #{$root}__icon {

diff --git a/components/02-molecules/subject-card/subject-card.scss b/components/02-molecules/subject-card/subject-card.scss
@@ -24,6 +24,7 @@
       min-height: $ct-subject-card-image-height-mobile;
       min-width: $ct-subject-card-image-width-mobile;
       padding: ct-spacing(2);
+      box-sizing: border-box;
     }
 
     @include ct-breakpoint(m) {