feat(ibmdotcom styles): remove react classes from footer

sangeethababu9223 · Dec 15, 2023 · a4fab12 · a4fab12
1 parent 6eda49b
commit a4fab12
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 183 deletions.
diff --git a/packages/styles/scss/components/footer/_footer-logo.scss b/packages/styles/scss/components/footer/_footer-logo.scss
@@ -21,8 +21,7 @@
 /// @group footer
 
 @mixin footer-logo {
-  :host(#{$c4d-prefix}-footer-logo),
-  .#{$prefix}--footer-logo {
+  :host(#{$c4d-prefix}-footer-logo) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
     &:focus-visible {

diff --git a/packages/styles/scss/components/footer/_footer-nav-group.scss b/packages/styles/scss/components/footer/_footer-nav-group.scss
@@ -19,9 +19,7 @@
 /// @group footer
 
 @mixin footer-nav-group {
-  :host(#{$c4d-prefix}-footer-nav-group),
-  .#{$prefix}--footer-nav-group,
-  .#{$prefix}--footer-nav-group.#{$prefix}--accordion__item {
+  :host(#{$c4d-prefix}-footer-nav-group) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
     padding-left: 0;
@@ -47,25 +45,13 @@
       }
     }
 
-    .#{$prefix}--accordion__arrow {
-      margin: 2px $spacing-05 0 0;
-    }
-
     @include breakpoint(md) {
       @include make-col-ready;
 
       padding-left: 0;
       display: inline-block;
       margin-bottom: $spacing-09;
 
-      &.#{$prefix}--accordion__item {
-        border-top: 0 transparent;
-      }
-
-      .#{$prefix}--accordion__heading {
-        display: none;
-      }
-
       .#{$prefix}--accordion__content {
         display: block;
         height: auto;

diff --git a/packages/styles/scss/components/footer/_footer-nav.scss b/packages/styles/scss/components/footer/_footer-nav.scss
@@ -38,13 +38,6 @@
       @include make-col(12, 16);
     }
 
-    .#{$prefix}--accordion__heading {
-      display: flex;
-      align-items: center;
-      min-height: $spacing-09;
-      padding: 0;
-    }
-
     ::slotted([slot='locale-button']),
     ::slotted([slot='language-selector']) {
       display: inline-block;

diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss
@@ -38,15 +38,6 @@
     background-color: $background;
     padding-top: $spacing-09;
 
-    .#{$prefix}--modal-content {
-      .#{$prefix}--link {
-        &,
-        &:visited {
-          color: $icon-inverse;
-        }
-      }
-    }
-
     @include breakpoint-down(md) {
       ::slotted([slot='brand']) {
         margin-bottom: $spacing-09;
@@ -94,17 +85,6 @@
       }
     }
 
-    .#{$prefix}--language-selector__container {
-      padding: 0;
-    }
-
-    .#{$prefix}--locale-btn__container {
-      flex-basis: auto;
-      button {
-        border: none;
-      }
-    }
-
     .#{$prefix}--legal-nav {
       border-top: 0;
     }
@@ -143,18 +123,6 @@
 
   :host(#{$c4d-prefix}-legal-nav) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
-
-    .#{$prefix}--legal-nav__list {
-      .#{$prefix}--legal-nav__list-item {
-        .#{$prefix}--link {
-          color: $text-secondary;
-
-          &:hover {
-            color: $text-primary;
-          }
-        }
-      }
-    }
   }
 
   .#{$prefix}--footer__main {
@@ -167,8 +135,7 @@
 
     flex-direction: column;
 
-    :host(#{$c4d-prefix}-footer[size='short']) &,
-    .#{$prefix}--footer--short & {
+    :host(#{$c4d-prefix}-footer[size='short']) & {
       flex-direction: row;
     }
 
@@ -236,15 +203,6 @@
     padding-top: 0;
   }
 
-  :host(#{$c4d-prefix}-footer-nav-group) {
-    .#{$prefix}--accordion__heading {
-      border-top: 1px solid $border-subtle-01;
-      padding: 0;
-      align-items: center;
-      min-height: $spacing-09;
-    }
-  }
-
   :host(#{$c4d-prefix}-footer-nav-group:last-of-type) {
     @include breakpoint-down(md) {
       border-bottom: 1px solid $border-subtle-01;

diff --git a/packages/styles/scss/components/footer/_legal-nav.scss b/packages/styles/scss/components/footer/_legal-nav.scss
@@ -96,110 +96,12 @@
         @include breakpoint(lg) {
           border-top: none;
         }
-
-        .#{$prefix}--legal-nav__list-item {
-          margin-right: 0;
-          padding-top: 0;
-          height: $spacing-09;
-          display: flex;
-          align-items: center;
-
-          @include breakpoint(md) {
-            margin-right: $spacing-07;
-          }
-
-          a {
-            display: flex;
-            align-items: center;
-            width: 100%;
-          }
-        }
-      }
-
-      .#{$prefix}--locale-btn__container,
-      .#{$prefix}--language-selector__container {
-        margin: 0;
-
-        @include breakpoint(md) {
-          align-self: flex-end;
-          width: 50%;
-          border-left: 1px solid $layer-accent-01;
-        }
-
-        @include breakpoint(lg) {
-          margin: 0;
-        }
-
-        .#{$prefix}--btn--secondary,
-        .#{$prefix}--list-box,
-        .#{$prefix}--select-input {
-          background-color: $background;
-          max-width: 100%;
-
-          &:hover {
-            background-color: $background-hover;
-          }
-
-          &:active {
-            background-color: $layer-active-01;
-          }
-        }
-
-        .#{$prefix}--select {
-          max-width: 100%;
-        }
-
-        .#{$prefix}--text-input,
-        .#{$prefix}--list-box,
-        .#{$prefix}--select-input {
-          border-bottom: none;
-        }
       }
     }
   }
 
-  .#{$prefix}--legal-nav__holder {
-    padding-top: 0;
-    margin-left: 0;
-
-    @include breakpoint(md) {
-      padding-top: $spacing-03;
-      column-count: 2;
-    }
-
-    @include breakpoint(lg) {
-      column-count: 3;
-    }
-  }
-
-  .#{$prefix}--adjunct-links__holder {
-    margin-left: 0;
-    margin-top: $spacing-09;
-    padding: 0 $spacing-09 0 $spacing-05;
-    width: 100%;
-
-    @include breakpoint(md) {
-      width: 50%;
-    }
-
-    @include breakpoint(lg) {
-      margin-left: 25%;
-      width: 25%;
-    }
-
-    .#{$prefix}--legal-nav__list-item {
-      padding-top: 0;
-      margin-right: 0;
-    }
-
-    .#{$prefix}--legal-nav__list-item:not(:first-of-type) {
-      padding-top: $spacing-03;
-    }
-  }
-
   :host(#{$c4d-prefix}-legal-nav-item),
-  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div,
-  .#{$prefix}--legal-nav__list-item {
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div {
     margin-right: $spacing-07;
     padding: $spacing-03 0 0 0;
     @include type-style('body-01');

diff --git a/packages/styles/scss/components/footer/_locale-button.scss b/packages/styles/scss/components/footer/_locale-button.scss
@@ -21,8 +21,7 @@
 /// @group footer
 
 @mixin locale-button {
-  :host(#{$c4d-prefix}-locale-button),
-  .#{$prefix}--locale-btn__container {
+  :host(#{$c4d-prefix}-locale-button) {
     @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
     @include button;
     @include make-col-ready;
@@ -65,8 +64,7 @@
   }
 
   :host(#{$c4d-prefix}-footer[size='short'])
-    ::slotted(#{$c4d-prefix}-locale-button),
-  .#{$prefix}--footer--short .#{$prefix}--locale-btn__container {
+    ::slotted(#{$c4d-prefix}-locale-button) {
     margin-top: $spacing-09;
 
     @include breakpoint(md) {
@@ -82,17 +80,4 @@
       @include make-col-offset(10, 16);
     }
   }
-
-  .#{$prefix}--footer--micro {
-    .#{$prefix}--locale-btn__container {
-      padding: 0;
-      .#{$prefix}--btn--tertiary {
-        &:hover,
-        &:focus {
-          background-color: $background-hover;
-          color: $text-primary;
-        }
-      }
-    }
-  }
 }