diff --git a/packages/css/package.json b/packages/css/package.json index efd0cdf2..10cbdd49 100644 --- 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 index 838a9b27..fed92666 100644 --- 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,48 +36,50 @@ .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 { @@ -86,19 +87,15 @@ } .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 index f51ac92c..118050fe 100644 --- 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 index 3de9ae94..0bbb25da 100644 --- 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 index c6884a95..94aa8861 100644 --- 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 {