@ilo-org/styles 1.0.4 → 1.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -39,7 +39,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@ilo-org/fonts": "0.2.2",
-    "@ilo-org/icons": "0.3.1",
+    "@ilo-org/icons": "0.4.0",
     "@ilo-org/themes": "0.9.0"
   },
   "devDependencies": {

package/scss/_functions.scss

@@ -64,22 +64,6 @@
   @return px-to-rem($scaled);
 }
 
-// =========================================
-// Encode color strings
-//
-// Useful for using color variables with inline CSS SVGs
-// =========================================
-@function encodecolor($string) {
-  @if type-of($string) == "color" and str-index(#{$string}, "#") == 1 {
-    $hex: str-slice(ie-hex-str($string), 4);
-    $string: unquote("#{$hex}");
-
-    @return "%23" + $string;
-  }
-
-  @return $string;
-}
-
 // =========================================
 // Encode color strings
 //

package/scss/_mixins.scss

@@ -16,33 +16,6 @@
   line-height: map-get($type, $stylename, "line-height");
 }
 
-// ======================================
-// Vertical Align
-// ======================================
-
-@mixin vertical-align {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-// ======================================
-// Horizontal Align
-// ======================================
-
-@mixin horizontal-align {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-@mixin vertical-horizontal-align {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 // ======================================
 // Visually Hidden
 //
@@ -62,16 +35,6 @@
   overflow: hidden;
 }
 
-// ======================================
-// Ellipsis
-// ======================================
-
-@mixin ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 // ======================================
 // Breakpoint
 // ======================================
@@ -131,19 +94,6 @@
   }
 }
 
-// ======================================
-// Spacing Values
-// ======================================
-
-@mixin spacingvalues($type, $mappath, $location, $state: "default") {
-  #{$type}: px-to-rem(
-      map-get($spacing, $location, $mappath, $state, $type, "top")
-    )
-    px-to-rem(map-get($spacing, $location, $mappath, $state, $type, "right"))
-    px-to-rem(map-get($spacing, $location, $mappath, $state, $type, "bottom"))
-    px-to-rem(map-get($spacing, $location, $mappath, $state, $type, "left"));
-}
-
 // ======================================
 // Border Values
 // ======================================
@@ -197,17 +147,6 @@
   background-image: url("#{colortodataurlicon($name, $color)}");
 }
 
-// ======================================
-// Icon Button
-// ======================================
-
-@mixin iconbutton($name, $height, $width, $color: $color-base-neutrals-black) {
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: $width $height;
-  @include dataurlicon($name, $color);
-}
-
 // ======================================
 // Video Button
 // ======================================

package/scss/components/_accordion.scss

@@ -91,6 +91,7 @@
     #{$accordion}--innerpanel {
       padding-bottom: spacing(9);
       padding-top: spacing(2);
+      padding-inline-end: spacing(8);
     }
 
     &__open {
@@ -100,7 +101,6 @@
       &#{$panel}__scroll {
         max-height: $scroll-max-height;
         overflow-y: auto;
-        padding-right: spacing(8);
       }
     }
   }

package/scss/components/_socialmedia.scss

@@ -67,6 +67,12 @@
         width: px-to-rem($icon-size + 8px);
         transition: all 0.1s ease-in-out;
 
+        &__large {
+          background-size: auto px-to-rem(24px);
+          height: px-to-rem(36px);
+          width: px-to-rem(36px);
+        }
+
         &:hover {
           background-color: map-get(
             $color,
@@ -95,11 +101,11 @@
           }
         }
 
-        &__twitter {
-          @include get-icon("twitter");
+        &__x {
+          @include get-icon("x");
 
           #{$c}__theme__dark & {
-            @include get-icon("twitter", "dark");
+            @include get-icon("x", "dark");
           }
         }