Merge pull request #72 from miljodir/MALIN-634-designsystem-fikse-kna…

…pper Styling fixes
miljodir · Jan 15, 2024 · 7281c3f · 7281c3f
2 parents 13c6ad9 + e448932
commit 7281c3f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 27 deletions.
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

diff --git a/packages/css/src/button/button.css b/packages/css/src/button/button.css
@@ -1,15 +1,14 @@
 .md-button {
   align-items: center;
   background-color: var(--mdPrimaryColor);
-  border: 2px solid var(--mdPrimaryColor);
   color: #ffffff;
   display: flex;
   font-weight: 400;
   font-family: 'Open sans';
   font-size: 1rem;
-  outline: 2px solid var(--mdPrimaryColor);
-  padding: 0.65rem 1.5rem;
+  padding: 0.75rem 1.5rem;
   width: fit-content;
+  border: none;
 }
 
 .md-button--small {
@@ -37,68 +36,66 @@
 
 .md-button:focus {
   background-color: var(--mdPrimaryColor80);
-  border-color: var(--mdPrimaryColor80);
-  outline: 2px solid var(--mdPrimaryColor80);
-  outline-offset: 2px;
+  outline: 2px white solid;
+  outline-offset: -4px;
 }
 
 .md-button:hover {
   cursor: pointer;
   background-color: var(--mdPrimaryColor120);
   border-color: var(--mdPrimaryColor120);
-  outline: 2px solid var(--mdPrimaryColor120);
 }
 
 .md-button[disabled],
 .md-button:disabled {
   background-color: var(--mdGreyColor20);
-  border: 2px solid var(--mdGreyColor20);
   color: var(--mdGreyColor60);
   cursor: not-allowed;
-  outline: 2px solid var(--mdGreyColor20);
 }
 
 .md-button--secondary {
   background-color: #ffffff;
-  border: 2px solid var(--mdPrimaryColor20);
+  border: 2px solid var(--mdPrimaryColor);
   color: var(--mdPrimaryColor);
+  padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
+}
+
+.md-button--small.md-button--secondary {
+  padding: calc(0.4rem - 2px) calc(0.8rem - 2px);
 }
 
 .md-button--secondary:hover:enabled {
-  background-color: #ccdfde;
+  background-color: var(--mdPrimaryColor20);
 }
 
 .md-button--secondary:focus:enabled {
-  /* background-color: #ccdfde; */
   background-color: #ffffff;
-  outline: 2px solid var(--mdPrimaryColor80);
   border-color: var(--mdPrimaryColor80);
+  color: var(--mdPrimaryColor80);
+  outline: 2px var(--mdPrimaryColor80) solid;
+  outline-offset: -6px;
 }
 
 .md-button--secondary:disabled {
   background-color: #fff;
-  border: 2px solid var(--mdGreyColor20);
   color: var(--mdGreyColor20);
+  border-color: var(--mdGreyColor20);
 }
 
 .md-button--secondary > .md-button__rightIcon {
   color: var(--mdPrimaryColor);
 }
 
 .md-button--danger {
-  border: 2px solid var(--mdErrorColor);
   background-color: var(--mdErrorColor);
-  outline: 2px solid var(--mdErrorColor);
 }
 
 .md-button--danger:focus:enabled {
   background-color: var(--mdErrorColor);
-  border-color: var(--mdErrorColor);
-  outline: 2px solid var(--mdErrorColor);
+  outline: 2px white solid;
+  outline-offset: -4px;
 }
 
 .md-button--danger:hover:enabled {
   background-color: var(--mdErrorColor120);
-  border-color: var(--mdErrorColor120);
-  outline: 2px solid var(--mdErrorColor120);
 }
diff --git a/packages/css/src/chips/chips.css b/packages/css/src/chips/chips.css
@@ -2,7 +2,9 @@
   display: flex;
   align-items: center;
   background-color: #fff;
-  border: 1px solid var(--mdPrimaryColor);
+  outline: 1px solid var(--mdPrimaryColor);
+  outline-offset: -1px;
+  border: none;
   border-radius: 10em;
   color: var(--mdPrimaryColor);
   font-weight: 400;
@@ -15,7 +17,7 @@
 }
 
 .md-chip.md-chip--solid:not(.md-chip--disabled) {
-  background-color: var(--mdPrimaryColor);
+  background-color: var(--mdPrimaryColor80);
   color: #fff;
 }
 .md-chip.md-chip--solid:not(.md-chip--disabled):hover {
@@ -38,7 +40,7 @@
 .md-chip--disabled {
   background-color: var(--mdGreyColor20);
   color: var(--mdGreyColor60);
-  border: 1px solid var(--mdGreyColor60);
+  outline: 1px solid var(--mdGreyColor60);
   cursor: default;
 }
 
@@ -47,12 +49,12 @@
 }
 
 .md-chip:not(.md-chip--disabled).md-chip--active {
-  background-color: var(--mdPrimaryColor);
+  background-color: var(--mdPrimaryColor80);
   color: #fff;
 }
 
 .md-chip:not(.md-chip--disabled).md-chip--active:focus {
-  outline-offset: 2px;
+  outline-offset: -2px;
 }
 
 .md-chip__left-icon {

diff --git a/packages/css/src/formElements/multiselect/multiselect.css b/packages/css/src/formElements/multiselect/multiselect.css
@@ -93,7 +93,7 @@
 
 .md-multiselect__dropdown-wrapper {
   position: relative;
-  margin: 0.7em 0 0.7em 0;
+  margin: 0.7em 0 0 0;
 }
 
 .md-multiselect__dropdown {
@@ -194,6 +194,8 @@
   border-top: 2px solid var(--mdPrimaryColor);
   border-right: 2px solid var(--mdPrimaryColor);
   border-left: 2px solid var(--mdPrimaryColor);
+  padding: calc(1em - 1px);
+  padding-bottom: 1em;
 }
 
 .md-multiselect__button:not(.md-multiselect__button--open):focus,

diff --git a/packages/css/src/formElements/select/select.css b/packages/css/src/formElements/select/select.css
@@ -71,6 +71,7 @@
   display: flex;
   flex-grow: 1;
   padding-right: 1em;
+  min-height: 1.375em;
 }
 
 .md-select__button-icon {
@@ -148,6 +149,7 @@
 
 .md-select__button--open {
   padding: calc(1em - 1px);
+  padding-bottom: 1em;
 }
 
 .md-select--open .md-select__dropdown {