@ilo-org/styles 0.0.1 → 0.0.2

package/scss/components/_accordion.scss

@@ -48,8 +48,8 @@
 
     @include breakpoint("large") {
       @include font-styles("label-large");
-      padding: px-to-rem(calc($spacing-ui-padding-xl - 11px)) px-to-rem(36px)
-        px-to-rem(calc($spacing-ui-padding-xl - 11px)) 0;
+      padding: px-to-rem(calc($spacing-ui-padding-xl - 16px)) px-to-rem(36px)
+        px-to-rem(calc($spacing-ui-padding-xl - 16px)) 0;
     }
 
     &[aria-expanded="true"] {

package/scss/components/_button.scss

@@ -50,14 +50,6 @@
     }
 
     &--only {
-      height: px-to-rem($spacing-padding-3);
-      width: px-to-rem($spacing-padding-3);
-
-      .ilo--icon {
-        left: 0;
-        top: 0;
-      }
-
       .button__label {
         @include isVisuallyHidden();
       }
@@ -70,6 +62,16 @@
       @include boxpadding("button", "large");
       @include font-styles("button-large");
     }
+
+    &.icon--only {
+      height: px-to-rem(45px);
+      width: px-to-rem(45px);
+
+      .ilo--icon {
+        left: px-to-rem(4.5px);
+        top: px-to-rem(4.5px);
+      }
+    }
   }
 
   &--medium {
@@ -110,6 +112,16 @@
         }
       }
     }
+
+    &.icon--only {
+      height: px-to-rem(36px);
+      width: px-to-rem(36px);
+
+      .ilo--icon {
+        left: px-to-rem(2px);
+        top: px-to-rem(2px);
+      }
+    }
   }
 
   &--small {
@@ -150,6 +162,16 @@
         }
       }
     }
+
+    &.icon--only {
+      height: px-to-rem(26px);
+      width: px-to-rem(26px);
+
+      .ilo--icon {
+        left: px-to-rem(0.5px);
+        top: px-to-rem(0.5px);
+      }
+    }
   }
 
   &--primary {
@@ -270,3 +292,22 @@
     }
   }
 }
+
+[id*="story--components-button"] div {
+  .ilo--button {
+    margin-right: 10px;
+    margin-bottom: 10px;
+
+    &--large.icon--only {
+      transform: translateY(-6px);
+    }
+
+    &--medium.icon--only {
+      transform: translateY(-5px);
+    }
+
+    &--small.icon--only {
+      transform: translateY(-5px);
+    }
+  }
+}

package/scss/components/_callout.scss

@@ -8,7 +8,7 @@
   $self: &;
 
   &--collapse:not(.ilo--callout--open) {
-    max-height: 68px;
+    max-height: 78px;
     overflow: hidden;
   }
 
@@ -73,7 +73,7 @@
       display: inline-block;
       height: 24px;
       position: absolute;
-      right: 0;
+      right: -3px;
       top: 50%;
       transform: translateY(-50%) rotate(0);
       transition: transform 0.2s ease-in-out;

package/scss/components/_list.scss

@@ -68,7 +68,7 @@
       0
     );
     margin-left: px-to-rem(map-get($spacing, "ui-padding-lg"));
-    padding-left: px-to-rem(map-get($spacing, "base") - 2px);
+    padding-left: px-to-rem(map-get($spacing, "base") - 5px);
 
     b,
     strong {

package/scss/monorepo.scss

@@ -0,0 +1,13 @@
+// Outputs CSS to be used within the monorepo, with fonts drawn from the @ilo-fonts package via pnpm
+
+// Set prefix on default styles
+@use "config";
+
+// Load the css resets
+@use "reset";
+
+//Import type styles
+@use "typographymonorepo";
+
+// Import our custom components css
+@use "components";