feat: css improvements (#1018)

* fix: size of buttons

* fix: set valid ascpect ratio

* fix: increase size of pagination buttons

* fix: increase size of siteselector

* fix: set valid default value of animationDirection.

* fix: remove empty line value.

* fix: vertically align as baseline in icon only buttons.

* fix: do not create invalid padding utils.

* fix: resolve invalid text transform default value

* fix: do not create auto padding value.

* fix: set font weight without ''

* fix: set outline-offset to a valid value

* fix: all spacing utils

* fix: add support for psuedo in build-util mixin

* fix: resolve psuedo elements in responsive styles.

* fix: broken font declaration

* fix: remove invalid left/right values

* fix: remove invalid values from align-items modifier.

* fix: set value display attr.

* fix: size of buttons

* fix: set valid ascpect ratio

* fix: increase size of pagination buttons

* fix: increase size of siteselector

* fix: set valid default value of animationDirection.

* fix: remove empty line value.

* fix: vertically align as baseline in icon only buttons.

* fix: do not create invalid padding utils.

* fix: resolve invalid text transform default value

* fix: do not create auto padding value.

* fix: set font weight without ''

* fix: set outline-offset to a valid value

* fix: all spacing utils

* fix: add support for psuedo in build-util mixin

* fix: resolve psuedo elements in responsive styles.

* fix: broken font declaration

* fix: remove invalid left/right values

* fix: remove invalid values from align-items modifier.

* fix: set value display attr.

* fix: negative margin in signature.

* fix: faulty colors & negative margins.

* fix: resolves issues with alignment of icons.

* fix: resolve baseline in icon only buttons

* fix: remove invalid css for font display

* fix: remove old ie support from leaflet lvml

* fix: remove deprecated clip

* fix: remove deprecated word-wrap

* fix: clip path value

* fix: remove old css

* fix: remove autprefixer

* fix: remove autoprefixer

* fix: set visibility hidden instead of display none

---------

Co-authored-by: Sebastian Thulin <sebastian.thulin@helsingborg.se>

Author: sebastianthulin

package-lock.json

@@ -38,11 +38,6 @@
     "bugs": {
         "url": "https://github.com/helsingborg-stad/styleguide/issues"
     },
-    "browserslist": [
-        "last 3 version",
-        "> 1%",
-        "not dead"
-    ],
     "homepage": "https://github.com/helsingborg-stad/styleguide#readme",
     "devDependencies": {
         "@babel/cli": "^7.17.0",
@@ -57,7 +52,6 @@
         "@testing-library/user-event": "^14.4.3",
         "@types/jest": "^29.5.0",
         "@types/leaflet": "^1.9.3",
-        "autoprefixer": "^10.4.2",
         "babel-loader": "^8.2.3",
         "babel-upgrade": "^1.0.1",
         "body-parser": "^1.19.1",

package.json

@@ -1,8 +1,5 @@
 module.exports = {
     plugins: [
-        require('autoprefixer')({
-            overrideBrowserslist: ['> 1%', 'last 4 versions']
-        }),
         require('cssnano')
     ]
 };

postcss.config.js

@@ -9,7 +9,6 @@
 
     &__list {
         @include unlist();
-
         display: flex;
         flex-wrap: wrap;
         align-items: center;
@@ -20,15 +19,13 @@
         padding: 0 map-get($spacers, "1") 0 0;
         margin: 0;
         color: $color-breadcrumb-active;
-        display: none;
-
-        /* Mobile adaption */
-        &:nth-last-child(2) {
-            display: block;
-        }
+        display: flex;
+        gap: map-get($spacers, "05");
 
-        @include mq(map_get($breakpoints-map, "sm")) {
-            display: block;
+        @include mq(map_get($breakpoints-map, "xs"), map_get($breakpoints-map, "sm")) {
+            &:not(:last-child) {
+               display: none;
+            }
         }
     }
 
@@ -41,8 +38,7 @@
 
     .c-icon {
         color: $color-breadcrumb-icon;
-        vertical-align: -15%; /* TODO: Fix */
-
+        align-self: center;
         @include mq(map_get($breakpoints-map, "xs"), map_get($breakpoints-map, "sm")) {
             transform: scaleX(-1);
         }

source/sass/component/_breadcrumb.scss

@@ -173,7 +173,7 @@ $c-button-border-width: var(--c-button-border-width, $border-width-button) !defa
     }
 
     &.c-button--md {
-        height: calc(#{$base} * 6); 
+        height: calc(#{$base} * 6.5); 
         min-width: calc(#{$base} * 9);
         padding: 0 calc(#{$base} * 4); 
         font-size: $font-size-btn-md; 
@@ -184,7 +184,7 @@ $c-button-border-width: var(--c-button-border-width, $border-width-button) !defa
         }
 
         &.c-button--icon-only {
-            width: calc(#{$base} * 6); 
+            width: calc(#{$base} * 6.5); 
             min-width: initial;
         }
 
@@ -200,7 +200,7 @@ $c-button-border-width: var(--c-button-border-width, $border-width-button) !defa
 
     &.c-button--sm {
         letter-spacing: 0.1rem;
-        height: calc(#{$base} * 4.5);
+        height: calc(#{$base} * 5.5);
         min-width: calc(#{$base} * 6.75); 
         padding: 0 calc(#{$base} * 2); 
         font-size: $font-size-btn-sm; 
@@ -214,7 +214,7 @@ $c-button-border-width: var(--c-button-border-width, $border-width-button) !defa
         }
 
         &.c-button--icon-only {
-            width: calc(#{$base}* 4.5); 
+            width: calc(#{$base}* 5.5); 
             min-width: initial;
         }
 
@@ -243,6 +243,10 @@ $c-button-border-width: var(--c-button-border-width, $border-width-button) !defa
             margin-right: 0;
             margin-left: 0;
         }
+
+        .c-icon::after {
+            vertical-align: baseline;
+        }
     }
 }