modified css selectors to work with first-of-type

workleap · Oct 3, 2022 · 674dee6 · 674dee6
1 parent b31eb44
commit 674dee6
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 18 deletions.
diff --git a/packages/components/src/accordion/src/Accordion.css b/packages/components/src/accordion/src/Accordion.css
@@ -24,10 +24,6 @@
     padding-bottom: var(--o-ui-sp-2);
 }
 
-.o-ui-accordion-header:first-of-type {
-    margin-top: 0;
-}
-
 /* TRIGGER */
 .o-ui-accordion-trigger {
     outline: transparent;
@@ -151,22 +147,22 @@
 }
 
 /* BORDERED | FIRST ITEM | BORDER RADIUS */
-.o-ui-accordion-bordered .o-ui-accordion-header:first-of-type,
-.o-ui-accordion-bordered .o-ui-accordion-header:first-of-type .o-ui-accordion-trigger {
+.o-ui-accordion-bordered h3:first-of-type,
+.o-ui-accordion-bordered h3:first-of-type .o-ui-accordion-trigger {
     border-top-left-radius: var(--o-ui-sp-2);
     border-top-right-radius: var(--o-ui-sp-2);
 }
 
 /* BORDERED | LAST ITEM | BORDER RADIUS */
-.o-ui-accordion-bordered .o-ui-accordion-header:last-of-type,
-.o-ui-accordion-bordered .o-ui-accordion-header:last-of-type .o-ui-accordion-trigger {
+.o-ui-accordion-bordered h3:last-of-type,
+.o-ui-accordion-bordered h3:last-of-type .o-ui-accordion-trigger {
     border-bottom-left-radius: var(--o-ui-sp-2);
     border-bottom-right-radius: var(--o-ui-sp-2);
 }
 
 /* BORDERED | LAST PANEL | BORDER RADIUS */
-.o-ui-accordion-bordered .o-ui-accordion-panel:last-of-type,
-.o-ui-accordion-bordered .o-ui-accordion-panel:last-of-type .o-ui-accordion-trigger {
+.o-ui-accordion-bordered div:last-of-type,
+.o-ui-accordion-bordered div:last-of-type .o-ui-accordion-trigger {
     border-bottom-left-radius: var(--o-ui-sp-2);
     border-bottom-right-radius: var(--o-ui-sp-2);
 }
diff --git a/packages/components/src/input-group/src/InputGroup.css b/packages/components/src/input-group/src/InputGroup.css
@@ -36,7 +36,8 @@
 }
 
 /* ADDON */
-.o-ui-input-group > :first-of-type:not(.o-ui-input-group-input) {
+/* if first item is an addon */
+.o-ui-input-group > div:first-of-type:not(.o-ui-input-group-input) {
     margin-right: -1px;
 }
 
@@ -45,13 +46,13 @@
 }
 
 /* ADDON | START */
-.o-ui-input-group-input:not(:first-of-type),
-.o-ui-input-group-input:not(:first-of-type) input {
+.o-ui-input-group-addon  + .o-ui-input-group-input,
+.o-ui-input-group-addon + .o-ui-input-group-input input {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
 
-.o-ui-input-group-addon:first-of-type {
+.o-ui-input-group div:first-of-type:not(.o-ui-input-group-input) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     flex-shrink: 0;

diff --git a/packages/icons/docs/icon-gallery/details/Variants.css b/packages/icons/docs/icon-gallery/details/Variants.css
@@ -10,7 +10,7 @@
     margin-top: var(--o-ui-sp-4);
 }
 
-.o-ui-sb-gallery-item-variant-section-toggle:first-of-type {
+.o-ui-sb-gallery-item-variant-section button:first-of-type {
     margin-top: 0;
 }
 
@@ -24,6 +24,6 @@
     margin-bottom: 0 !important;
 }
 
-.o-ui-sb-gallery-item-variant-section-content .sbdocs-h4:first-of-type {
+.o-ui-sb-gallery-item-variant-section-content h4:first-of-type {
     margin-top: 0;
 }
diff --git a/packages/icons/docs/icon-gallery/details/Variants.jsx b/packages/icons/docs/icon-gallery/details/Variants.jsx
@@ -90,7 +90,7 @@ export function Variants({ iconDisplayName, variants }) {
     return (
         <>
             <H2>Variants</H2>
-            <Tabs aria-label="Icon variants">
+            <Tabs aria-label="Icon variants" className="o-ui-sb-gallery-item-variant-section">
                 {variants.map(x => (
                     <Item key={x.name}>
                         <Header>{x.name}</Header>

diff --git a/storybook/styles/docs.css b/storybook/styles/docs.css
@@ -171,7 +171,7 @@
 }
 
 .sbdocs.sbdocs-h2,
-.sbdocs.sbdocs-h2:first-of-type {
+.sbdocs > h2:first-of-type {
     margin: 1.5rem 0;
     font-size: var(--o-ui-fs-7);
 }