@miljodirektoratet/md-css 1.0.13 → 1.0.15

package/README.md

@@ -1,22 +1,20 @@
-## @miljodirektoratet/md-css
+# @miljodirektoratet/md-css
 
 To start using the stylesheets:
 
-```
+```bash
 npm install @miljodirektoratet/md-css
 ```
 
 Then import the CSS, for example from JavaScript:
 
-```
+```jsx
 import { MdButton } from '@miljodirektoratet/md-react';
 import '@miljodirektoratet/md-css';
 
 const MyComponent = () => {
-    return (
-        <MdButton>Example</MdButton>
-    )
-}
+  return <MdButton>Example</MdButton>;
+};
 ```
 
 **For more documentation, please refer to the [Storybook](https://miljodir.github.io/md-components/)**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

package/src/accordionitem/accordionitem.css

@@ -4,7 +4,7 @@
   color: var(--mdGreyColor);
   font-family: 'Open sans';
   margin-bottom: 1em;
-  transition: all .2s linear;
+  transition: all 0.2s linear;
 }
 
 .md-accordion-item:focus-within {
@@ -24,7 +24,7 @@
 .md-accordion-item.md-accordion-item--add {
   background-color: transparent;
   border: 1px dashed var(--mdGreyColor80);
-  transition: all .2s linear;
+  transition: all 0.2s linear;
 }
 .md-accordion-item--expanded.md-accordion-item--add {
   background-color: var(--mdPrimaryColor20);
@@ -32,17 +32,17 @@
 }
 
 .md-accordion-item:not(.md-accordion-item--expanded):hover {
-  transition: all .2s linear;
+  transition: all 0.2s linear;
   background-color: var(--mdPrimaryColor20);
 }
 
 .md-accordion-item.md-accordion-item--secondary:not(.md-accordion-item--expanded):hover {
-  transition: all .2s linear;
+  transition: all 0.2s linear;
   background-color: var(--mdSecondaryColor);
 }
 
 .md-accordion-item.md-accordion-item--add:not(.md-accordion-item--expanded):hover {
-  transition: all .2s linear;
+  transition: all 0.2s linear;
   background-color: transparent;
 }
 
@@ -78,10 +78,10 @@
 }
 .md-accordion-item__header .md-accordion-item__header-icon:before,
 .md-accordion-item__header .md-accordion-item__header-icon:after {
-    content: "";
-    position: absolute;
-    background-color: var(--mdGreyColor);
-    transition: transform 0.15s ease-out;
+  content: '';
+  position: absolute;
+  background-color: var(--mdGreyColor);
+  transition: transform 0.15s ease-out;
 }
 /* Vertical line */
 .md-accordion-item__header .md-accordion-item__header-icon:before {
@@ -92,7 +92,7 @@
   margin-left: -1px;
 }
 /* horizontal line */
-.md-accordion-item__header .md-accordion-item__header-icon:after{
+.md-accordion-item__header .md-accordion-item__header-icon:after {
   top: 50%;
   left: 0;
   width: 100%;
@@ -119,12 +119,12 @@
   padding: 0 1.8em;
   max-height: 0;
   overflow: hidden;
-  transition: all .15s linear;
+  transition: all 0.15s linear;
 }
 .md-accordion-item__content--expanded {
   max-height: 5000px;
   padding: 1em 1.8em 1.5em 1.8em;
-  transition: all .15s linear;
+  transition: all 0.15s linear;
 }
 
 .md-accordion-item__close-button {
@@ -133,7 +133,7 @@
   padding: 0;
   background: none;
   border: 0;
-  margin: 2em 0 0 -.2em;
+  margin: 2em 0 0 -0.2em;
   cursor: pointer;
   font-size: 16px;
 }

package/src/chips/chips.css

@@ -9,7 +9,7 @@
   font-family: 'Open sans';
   font-size: 1rem;
   line-height: 22px;
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   cursor: pointer;
   text-align: left;
 }
@@ -59,7 +59,7 @@
   display: flex;
   width: 16px;
   height: 16px;
-  margin-right: .66em;
+  margin-right: 0.66em;
 }
 
 .md-chip__label {
@@ -70,5 +70,5 @@
   display: flex;
   width: 16px;
   height: 16px;
-  margin-left: .8em;
+  margin-left: 0.8em;
 }

package/src/colors.css

@@ -1,30 +1,30 @@
 :root {
   --mdPrimaryColor: #005e5d;
   --mdPrimaryColor120: #005251;
-  --mdPrimaryColor80: #337E7D;
-  --mdPrimaryColor20: #CCDFDE;
-  --mdPrimaryColor10: #E5EEEE;
+  --mdPrimaryColor80: #337e7d;
+  --mdPrimaryColor20: #ccdfde;
+  --mdPrimaryColor10: #e5eeee;
 
   --mdLightPrimaryColor: #40c1ac;
   --mdDarkPrimaryColor: #005251;
 
-  --mdSecondaryColor: #ECE7D2;
-  --mdSecondaryColor80: #EFEBDB;
-  --mdSecondaryColor60: #F3F0E4;
-  --mdSecondaryColor40: #F7F5ED;
-  --mdSecondaryColor20: #FBFAF6;
+  --mdSecondaryColor: #ece7d2;
+  --mdSecondaryColor80: #efebdb;
+  --mdSecondaryColor60: #f3f0e4;
+  --mdSecondaryColor40: #f7f5ed;
+  --mdSecondaryColor20: #fbfaf6;
 
   --mdTextColor: #222222;
 
-  --mdWarningBackgoundColor: #FCE4CA;
+  --mdWarningBackgoundColor: #fce4ca;
 
   --mdErrorColor: #ca0000;
-  --mdErrorColor120: #B7090D;
+  --mdErrorColor120: #b7090d;
 
   --mdGreyColor: #222222;
-  --mdGreyColor10: #E8E8E8;
-  --mdGreyColor20: #D2D2D2;
-  --mdGreyColor40: #A6A6A6;
+  --mdGreyColor10: #e8e8e8;
+  --mdGreyColor20: #d2d2d2;
+  --mdGreyColor40: #a6a6a6;
   --mdGreyColor60: #808080;
-  --mdGreyColor80: #4E4E4E;
+  --mdGreyColor80: #4e4e4e;
 }

package/src/filelist/filelist.css

@@ -1,22 +1,22 @@
 .md-filelist {
   display: flex;
   flex-direction: column;
-  gap: .5em;
+  gap: 0.5em;
 }
 
 .md-filelist__file {
   display: flex;
   justify-content: space-between;
   border: 1px solid var(--mdPrimaryColor);
-  padding: .8em 1.1em;
+  padding: 0.8em 1.1em;
   font-family: 'Open sans';
   background-color: #fff;
-  transition: background .2s linear;
+  transition: background 0.2s linear;
 }
 
 .md-filelist__file:hover {
   background-color: var(--mdPrimaryColor20);
-  transition: background .2s linear;
+  transition: background 0.2s linear;
 }
 
 .md-filelist__file-label {
@@ -31,7 +31,7 @@
 
 .md-filelist__file-size {
   font-size: 14px;
-  margin-top: .3em;
+  margin-top: 0.3em;
 }
 
 /* File actions */
@@ -50,14 +50,14 @@
   background-color: transparent;
   border-radius: 100px;
   border: 0;
-  padding: .2em;
+  padding: 0.2em;
   cursor: pointer;
-  transition: background .1s linear;
+  transition: background 0.1s linear;
 }
 
 .md-filelist__file-actions-button:hover {
   background-color: #fff;
-  transition: background .1s linear;
+  transition: background 0.1s linear;
 }
 
 .md-filelist__file-delete-icon {

package/src/formElements/autocomplete/README.md

@@ -0,0 +1,58 @@
+# Structure
+
+To use the `Autocomplete` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
+
+Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
+
+See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
+
+```html
+<div className="md-autocomplete [md-autocomplete--open, md-autocomplete--disabled, md-autocomplete--medium, md-autocomplete--small, md-autocomplete--error]">
+    <div className="md-autocomplete__label">
+        <div>{label}</div>
+        <div className="md-autocomplete__help-button">
+            {button to trigger help text}
+        </div>
+    </div>
+
+    <div className="md-autocomplete__help-text [md-autocomplete__help-text--open]">
+        {helpText}
+    </div>
+
+    <MdClickOutsideWrapper> <- optional wrapper to close autocomplete box when clicking outside
+        <!-- Optional prefix-icon -->
+        <div className="md-autocomplete__input__prefix [md-autocomplete__input__prefix--disabled]">
+            {prefixIcon}
+        </div>
+
+        <input
+            id=""
+            className="md-autocomplete__input [md-autocomplete__input--open, md-autocomplete__input--error, md-autocomplete__input--has-prefix]"
+            value={value}
+            ...
+        />
+
+        <div className="md-autocomplete__input-icon">
+            <MdChevronIcon />
+        </div>
+
+        <div className="md-autocomplete__dropdown">
+            <button
+                tabIndex={open ? 0: -1}
+                className="md-autocomplete__dropdown-item [md-autocomplete__dropdown-item--selected]"
+                onClick={function to handle select|deselect option}
+            >
+            <div className="md-autocomplete__dropdown-item-text">{option.text}</div>
+
+            {if seleceted option
+                <div className="md-autocomplete__dropdown-item-clear" title="Klikk for å fjerne valg">
+                    <MdXIcon />
+                </div>
+            }
+
+            </button>
+        </div>
+    </MdClickOutsideWrapper>
+    <div className="md-autocomplete__error">{errorText}</div>
+</div>
+```

package/src/formElements/autocomplete/autocomplete.css

@@ -0,0 +1,198 @@
+.md-autocomplete {
+  font-family: 'Open sans';
+  width: 634px;
+  max-width: 100%;
+}
+
+.md-autocomplete--medium {
+  width: 440px;
+}
+
+.md-autocomplete--small {
+  width: 260px;
+}
+
+.md-autocomplete__container {
+  position: relative;
+}
+
+.md-autocomplete__label {
+  display: flex;
+  align-items: flex-end;
+  font-weight: 600;
+}
+
+.md-autocomplete__label > * + * {
+  margin-left: 1em;
+}
+
+.md-autocomplete__input {
+  max-width: 100%;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 0;
+  color: var(--mdGreyColor);
+  box-sizing: border-box;
+  font-family: 'Open sans';
+  font-size: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1em;
+  border: 1px solid var(--mdGreyColor60);
+  margin: 0.8em 0 0 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.md-autocomplete__input.md-autocomplete__input--error {
+  border-color: var(--mdErrorColor);
+}
+
+.md-autocomplete--disabled .md-autocomplete__input {
+  background-color: var(--mdGreyColor20);
+  color: var(--mdGreyColor60);
+  cursor: not-allowed;
+}
+
+.md-autocomplete__input:focus,
+.md-autocomplete__input:focus-within {
+  outline: none;
+}
+
+.md-autocomplete__input-text {
+  display: flex;
+  flex-grow: 1;
+  padding-right: 1em;
+}
+
+.md-autocomplete__input-icon {
+  display: flex;
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+  rotate: 90deg;
+  color: var(--mdGreyColor);
+}
+
+.md-autocomplete__input.md-autocomplete__input--has-prefix {
+  padding-left: 2.5em;
+}
+
+.md-autocomplete__input--small.md-autocomplete__input--has-prefix {
+  padding-left: 1.8em;
+}
+
+.md-autocomplete__input__prefix {
+  position: absolute;
+  top: 1.3em;
+  left: 1em;
+  height: 16px;
+  width: 16px;
+  display: flex;
+  color: var(--mdPrimaryColor);
+}
+
+.md-autocomplete__input__prefix.md-autocomplete__input__prefix--disabled {
+  color: var(--mdGreyColor60);
+}
+
+.md-autocomplete__input-icon {
+  position: absolute;
+  top: 1.3em;
+  right: 0.9em;
+  display: flex;
+  width: 15px;
+  height: 15px;
+  rotate: 90deg;
+  color: var(--mdGreyColor);
+}
+
+.md-autocomplete__help-text {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.15s ease-out;
+}
+
+.md-autocomplete__help-text--open {
+  padding-top: 0.5em;
+  max-height: 2000px;
+  transition: max-height 0.5s ease-in;
+}
+
+.md-autocomplete__dropdown {
+  position: absolute;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height 0.5s ease-in-out;
+  width: calc(100% - 4px); /* Full width minus border-width */
+}
+
+.md-autocomplete__dropdown-item {
+  display: flex;
+  font-family: 'Open sans';
+  border: 0;
+  background-color: #fff;
+  width: 100%;
+  text-align: left;
+  padding: 0.9em;
+  transition: background-color 0.15s ease-in-out;
+  cursor: pointer;
+}
+
+.md-autocomplete__dropdown-item:hover,
+.md-autocomplete__dropdown-item:focus {
+  outline: none;
+  background-color: var(--mdPrimaryColor20);
+  transition: background-color 0.15s ease-in-out;
+}
+
+.md-autocomplete__dropdown-item--selected {
+  background-color: var(--mdPrimaryColor10);
+}
+
+.md-autocomplete__dropdown-item-text {
+  display: flex;
+  flex-grow: 1;
+}
+
+.md-autocomplete__dropdown-item-clear {
+  display: flex;
+  flex-shrink: 0;
+  height: 12px;
+  width: 12px;
+  color: var(--mdPrimaryColor);
+}
+
+/* Open state */
+.md-autocomplete--open .md-autocomplete__input {
+  border-left: 2px solid var(--mdPrimaryColor);
+  border-right: 2px solid var(--mdPrimaryColor);
+  border-top: 2px solid var(--mdPrimaryColor);
+}
+
+.md-autocomplete--open .md-autocomplete__dropdown {
+  max-height: 350px;
+  overflow-y: auto;
+  opacity: 1;
+  transition: max-height 0.5s ease-in-out;
+  border-right: 2px solid var(--mdPrimaryColor);
+  border-left: 2px solid var(--mdPrimaryColor);
+  border-bottom: 2px solid var(--mdPrimaryColor);
+  z-index: 2;
+}
+
+/* open + error */
+.md-autocomplete--open.md-autocomplete--error .md-autocomplete__input {
+  border-color: var(--mdErrorColor);
+}
+.md-autocomplete--open.md-autocomplete--error .md-autocomplete__dropdown {
+  border-color: var(--mdErrorColor);
+}
+
+/* Error text */
+.md-autocomplete__error {
+  color: var(--mdErrorColor);
+  font-size: 0.88em;
+}

package/src/formElements/checkboxgroup/checkboxgroup.css

@@ -20,7 +20,7 @@
 }
 
 .md-checkboxgroup .md-checkboxgroup__help-text--open {
-  padding-top: .5em;
+  padding-top: 0.5em;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
@@ -28,7 +28,7 @@
 .md-checkboxgroup .md-checkboxgroup__options {
   display: flex;
   flex-direction: row;
-  margin: .7em 0;
+  margin: 0.7em 0;
   gap: 1em;
 }
 
@@ -38,5 +38,5 @@
 
 .md-checkboxgroup__error {
   color: var(--mdErrorColor);
-  font-size: .88em;
+  font-size: 0.88em;
 }

package/src/formElements/fileupload/fileupload.css

@@ -10,12 +10,12 @@
   border: 1px dashed var(--mdGreyColor80);
   margin-bottom: 4em;
   background-color: #fff;
-  transition: background .2s linear;
+  transition: background 0.2s linear;
 }
 
 .md-fileupload__droparea.md-fileupload__droparea--active {
   background-color: var(--mdGreyColor20);
-  transition: background .2s linear;
+  transition: background 0.2s linear;
 }
 
 .md-fileupload__droparea.md-fileupload__droparea--not-allowed {
@@ -39,8 +39,8 @@
 }
 .md-fileupload__droparea-content--count {
   text-align: center;
-  margin: .5em 0;
-  font-size: .888em;
+  margin: 0.5em 0;
+  font-size: 0.888em;
   font-style: italic;
 }
 

package/src/formElements/input/input.css

@@ -17,7 +17,7 @@
 }
 
 .md-input--small {
-  padding: .5em 2em .5em 1em;
+  padding: 0.5em 2em 0.5em 1em;
 }
 
 .md-input:not(.md-input.md-input--readonly):not(.md-input.md-input--disabled):active,
@@ -65,7 +65,7 @@
 
 .md-input__wrapper {
   position: relative;
-  margin: .7em 0 .3em 0;
+  margin: 0.7em 0 0.3em 0;
 }
 
 .md-input__wrapper.md-input__wrapper--small {
@@ -89,7 +89,7 @@
 
 .md-input__error {
   color: var(--mdErrorColor);
-  font-size: .88em;
+  font-size: 0.88em;
 }
 
 .md-input__help-text {
@@ -99,7 +99,7 @@
 }
 
 .md-input__help-text--open {
-  padding-top: .5em;
+  padding-top: 0.5em;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
@@ -119,14 +119,14 @@
 }
 
 .md-input__wrapper.md-input__wrapper--small .md-input__prefix {
-  top: .65em;
-  left: .5em;
+  top: 0.65em;
+  left: 0.5em;
 }
 
 .md-input__suffix {
   position: absolute;
   top: 1.05em;
-  right: .9em;
+  right: 0.9em;
   display: flex;
 }
 
@@ -135,7 +135,7 @@
 }
 
 .md-input__suffix > * + * {
-  margin-left: .5em;
+  margin-left: 0.5em;
 }
 
 .md-input__error-icon {
@@ -145,34 +145,38 @@
 }
 
 .md-input__wrapper.md-input__wrapper--small .md-input__suffix {
-  top: .55em;
-  right: .7em;
+  top: 0.55em;
+  right: 0.7em;
 }
 
 .md-input__wrapper.md-input__wrapper--small .md-input__suffix > * + * {
-  margin-left: .3em;
+  margin-left: 0.3em;
 }
 
 /* Placeholder "hacks" */
-.md-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+.md-input::-webkit-input-placeholder {
+  /* Chrome/Opera/Safari */
   color: var(--mdGreyColor40);
   font-family: 'Open sans';
 }
-.md-input::-moz-placeholder { /* Firefox 19+ */
+.md-input::-moz-placeholder {
+  /* Firefox 19+ */
   color: var(--mdGreyColor40);
   font-family: 'Open sans';
 }
-.md-input:-ms-input-placeholder { /* IE 10+ */
+.md-input:-ms-input-placeholder {
+  /* IE 10+ */
   color: var(--mdGreyColor40);
   font-family: 'Open sans';
 }
-.md-input:-moz-placeholder { /* Firefox 18- */
+.md-input:-moz-placeholder {
+  /* Firefox 18- */
   color: var(--mdGreyColor40);
   font-family: 'Open sans';
 }
 
 /* Hacks for hiding arrows if type=number */
-.md-input.md-input--hide-number-arrows[type=number],
+.md-input.md-input--hide-number-arrows[type='number'],
 .md-input.md-input--hide-number-arrows::-webkit-outer-spin-button,
 .md-input.md-input--hide-number-arrows::-webkit-inner-spin-button {
   appearance: none;

package/src/formElements/multiselect/multiselect.css

@@ -59,7 +59,7 @@
 }
 
 .md-multiselect__button-text {
-  padding-right: .5em;
+  padding-right: 0.5em;
   width: 90%;
   overflow: hidden;
   white-space: nowrap;
@@ -77,7 +77,7 @@
 
 .md-multiselect__button-hasmultiple {
   margin-right: 1em;
-  font-size: .8em;
+  font-size: 0.8em;
 }
 
 .md-multiselect__help-text {
@@ -87,14 +87,14 @@
 }
 
 .md-multiselect__help-text--open {
-  padding-top: .5em;
+  padding-top: 0.5em;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
 
 .md-multiselect__dropdown-wrapper {
   position: relative;
-  margin: .7em 0 .7em 0;
+  margin: 0.7em 0 0.7em 0;
 }
 
 .md-multiselect__dropdown {
@@ -104,7 +104,7 @@
   max-height: 0;
   overflow: hidden;
   opacity: 0;
-  transition: max-height .3s linear;
+  transition: max-height 0.3s linear;
 }
 
 .md-multiselect__dropdown-item {
@@ -114,7 +114,7 @@
   border: 0;
   background-color: #fff;
   text-align: left;
-  transition: background-color .15s ease-in-out;
+  transition: background-color 0.15s ease-in-out;
   cursor: pointer;
 }
 
@@ -128,7 +128,7 @@
   display: flex;
   flex-shrink: 0;
   flex-grow: 1;
-  padding: .9em;
+  padding: 0.9em;
 }
 
 .md-multiselect__dropdown-item .md-checkbox .md-checkbox__label .md-checkbox__labelText {
@@ -140,7 +140,7 @@
 .md-multiselect__dropdown-item:focus-within {
   outline: none;
   background-color: var(--mdPrimaryColor20);
-  transition: background-color .15s ease-in-out;
+  transition: background-color 0.15s ease-in-out;
 }
 
 .md-multiselect__dropdown-item:hover .md-checkbox__label,
@@ -180,14 +180,14 @@
 
 .md-multiselect__error {
   color: var(--mdErrorColor);
-  font-size: .88em;
+  font-size: 0.88em;
 }
 
 .md-multiselect__chips {
   display: flex;
-  margin-top: .7em;
+  margin-top: 0.7em;
   flex-wrap: wrap;
-  gap: .5em;
+  gap: 0.5em;
 }
 
 /* Open state */

package/src/formElements/radiogroup/radiogroup.css

@@ -20,7 +20,7 @@
 }
 
 .md-radiogroup .md-radiogroup__help-text--open {
-  padding-top: .5em;
+  padding-top: 0.5em;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
@@ -28,7 +28,7 @@
 .md-radiogroup .md-radiogroup__options {
   display: flex;
   flex-direction: row;
-  margin: .7em 0;
+  margin: 0.7em 0;
 }
 
 .md-radiogroup .md-radiogroup__options--vertical {
@@ -46,7 +46,7 @@
   margin-bottom: 1em;
 }
 .md-radiogroup .md-radiogroup__options--vertical .md-radiogroup-option:last-child {
-  margin-bottom: .2em;
+  margin-bottom: 0.2em;
 }
 
 .md-radiogroup .md-radiogroup-option:focus-within {
@@ -72,7 +72,7 @@
   background-color: #fff;
   border: 1px solid var(--mdPrimaryColor);
   border-radius: 50%;
-  margin: 0 .5rem 0 0;
+  margin: 0 0.5rem 0 0;
   box-sizing: border-box;
   position: relative;
 }
@@ -95,12 +95,12 @@
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
-	animation: fadeIn 0.3s ease-out 1 forwards;
+  animation: fadeIn 0.3s ease-out 1 forwards;
 }
 
 .md-radiogroup__error {
   color: var(--mdErrorColor);
-  font-size: .88em;
+  font-size: 0.88em;
 }
 
 /* Disabled */
@@ -122,10 +122,9 @@
     flex-wrap: wrap;
   }
   .md-radiogroup .md-radiogroup-option {
-    margin-bottom: .5em;
+    margin-bottom: 0.5em;
   }
   .md-radiogroup .md-radiogroup__help-text {
     width: 100%;
   }
 }
-

package/src/formElements/select/select.css

@@ -37,7 +37,7 @@
   padding: 1em;
   border: 1px solid var(--mdGreyColor60);
   color: var(--mdGreyColor);
-  margin: .8em 0 0 0;
+  margin: 0.8em 0 0 0;
   text-align: left;
   cursor: pointer;
 }
@@ -90,7 +90,7 @@
 }
 
 .md-select__help-text--open {
-  padding-top: .5em;
+  padding-top: 0.5em;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
@@ -100,7 +100,7 @@
   max-height: 0;
   overflow: hidden;
   opacity: 0;
-  transition: max-height .5s ease-in-out;
+  transition: max-height 0.5s ease-in-out;
   width: calc(100% - 4px); /* Full width minus border-width */
 }
 
@@ -111,8 +111,8 @@
   background-color: #fff;
   width: 100%;
   text-align: left;
-  padding: .9em;
-  transition: background-color .15s ease-in-out;
+  padding: 0.9em;
+  transition: background-color 0.15s ease-in-out;
   cursor: pointer;
 }
 
@@ -120,7 +120,7 @@
 .md-select__dropdown-item:focus {
   outline: none;
   background-color: var(--mdPrimaryColor20);
-  transition: background-color .15s ease-in-out;
+  transition: background-color 0.15s ease-in-out;
 }
 
 .md-select__dropdown-item--selected {
@@ -155,7 +155,7 @@
   max-height: 350px;
   overflow-y: auto;
   opacity: 1;
-  transition: max-height .5s ease-in-out;
+  transition: max-height 0.5s ease-in-out;
   border: 2px solid var(--mdPrimaryColor);
   border-top: 0;
   z-index: 2;
@@ -172,5 +172,5 @@
 /* Error text */
 .md-select__error {
   color: var(--mdErrorColor);
-  font-size: .88em;
+  font-size: 0.88em;
 }

package/src/formElements/textarea/textarea.css

@@ -44,7 +44,7 @@
 }
 
 .md-textarea__wrapper {
-  margin: .7em 0 .3em 0;
+  margin: 0.7em 0 0.3em 0;
 }
 
 .md-textarea__label {
@@ -64,7 +64,7 @@
 
 .md-textarea__error {
   color: var(--mdErrorColor);
-  font-size: .88em;
+  font-size: 0.88em;
 }
 
 .md-textarea__help-text {
@@ -74,25 +74,29 @@
 }
 
 .md-textarea__help-text--open {
-  padding-top: .5em;
+  padding-top: 0.5em;
   max-height: 2000px;
   transition: max-height 0.5s ease-in;
 }
 
 /* Placeholder "hacks" */
-.md-textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+.md-textarea::-webkit-input-placeholder {
+  /* Chrome/Opera/Safari */
   color: var(--mdGreyColor40);
   font-family: 'Open sans';
 }
-.md-textarea::-moz-placeholder { /* Firefox 19+ */
+.md-textarea::-moz-placeholder {
+  /* Firefox 19+ */
   color: var(--mdGreyColor40);
   font-family: 'Open sans';
 }
-.md-textarea:-ms-input-placeholder { /* IE 10+ */
+.md-textarea:-ms-input-placeholder {
+  /* IE 10+ */
   color: var(--mdGreyColor40);
   font-family: 'Open sans';
 }
-.md-textarea:-moz-placeholder { /* Firefox 18- */
+.md-textarea:-moz-placeholder {
+  /* Firefox 18- */
   color: var(--mdGreyColor40);
   font-family: 'Open sans';
 }

package/src/help/help.css

@@ -12,17 +12,17 @@
 }
 
 .md-helpbutton--expanded:not(.md-helpbutton--noarrow):after {
-    content:'';
-    position: absolute;
-    left: .3em;
-    /* right: 0; */
-    bottom: -.65em;
-    margin: 0 auto;
-    width: 0;
-    height: 0;
-    border-bottom: 6px solid var(--mdPrimaryColor);
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
+  content: '';
+  position: absolute;
+  left: 0.3em;
+  /* right: 0; */
+  bottom: -0.65em;
+  margin: 0 auto;
+  width: 0;
+  height: 0;
+  border-bottom: 6px solid var(--mdPrimaryColor);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
 }
 
 .md-helpbutton:focus {
@@ -47,11 +47,11 @@
 
 /* HELP TEXT */
 .md-helptext {
-  font-family: "Open sans";
-  font-size: .88em;
+  font-family: 'Open sans';
+  font-size: 0.88em;
   background-color: var(--mdPrimaryColor);
   color: #fff;
   padding: 1.7em;
-  border-radius: .57em;
+  border-radius: 0.57em;
   max-width: 100%;
 }

package/src/index.css

@@ -18,6 +18,7 @@
 @import './formElements/checkboxgroup/checkboxgroup.css';
 @import './formElements/textarea/textarea.css';
 @import './formElements/select/select.css';
+@import './formElements/autocomplete/autocomplete.css';
 @import './formElements/radiogroup/radiogroup.css';
 @import './formElements/multiselect/multiselect.css';
 @import './formElements/fileupload/fileupload.css';

package/src/link/link.css

@@ -6,7 +6,7 @@
 }
 
 .md-link:hover {
-  color: var(--mdPrimaryColor120)
+  color: var(--mdPrimaryColor120);
 }
 
 .md-link:focus {

package/src/modal/modal.css

@@ -19,7 +19,7 @@
   bottom: 0;
   left: 0;
   background-color: var(--mdGreyColor);
-  opacity: .4;
+  opacity: 0.4;
   overflow-y: auto;
   z-index: 800;
 }
@@ -37,7 +37,7 @@
   min-width: 325px;
   max-width: 80%;
   border: 1px solid var(--mdGreyColor20);
-  box-shadow: 8px 8px 16px var(--mdGreyColor60)
+  box-shadow: 8px 8px 16px var(--mdGreyColor60);
 }
 
 .md-modal--error .md-modal__inner-wrapper {
@@ -54,7 +54,7 @@
 .md-modal__header-content {
   display: flex;
   align-items: center;
-  gap: .5em;
+  gap: 0.5em;
 }
 
 .md-modal__close-button {

package/src/tabs/tabs.css

@@ -24,7 +24,7 @@
   border: 0;
   background-color: transparent;
   border-bottom: 1px solid var(--mdGreyColor80);
-  transition: border .1s linear, background .1s linear, margin .1s linear;
+  transition: border 0.1s linear, background 0.1s linear, margin 0.1s linear;
   margin-bottom: 3px;
 }
 

package/src/tile/tile.css

@@ -11,13 +11,13 @@
   font-family: 'Open sans';
   width: 440px;
   max-width: 100%;
-  transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
 }
 
 .md-tile:not(.md-tile--disabled):hover {
   border: 1px solid var(--mdPrimaryColor);
   background-color: var(--mdPrimaryColor20);
-  transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
 }
 
 .md-tile:not(.md-tile--disabled):focus {
@@ -78,7 +78,7 @@
   color: var(--mdGreyColor);
   text-decoration: none;
   font-family: 'Open sans';
-  transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
 }
 
 .md-tile-vertical--small {
@@ -100,7 +100,7 @@
 .md-tile-vertical:hover {
   border: 1px solid var(--mdPrimaryColor);
   background-color: var(--mdPrimaryColor20);
-  transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
 }
 
 .md-tile-vertical:focus {

package/src/toggle/toggle.css

@@ -53,7 +53,7 @@
   border: 1px solid var(--mdGreyColor60);
   border-radius: 100px;
   position: relative;
-  transition: background-color .2s;
+  transition: background-color 0.2s;
 }
 .md-toggle__label--error.md-toggle__label {
   border-color: var(--mdErrorColor);
@@ -69,7 +69,7 @@
 }
 
 .md-toggle__label-text {
-  margin-right: .5em;
+  margin-right: 0.5em;
 }
 
 .md-toggle__label .md-toggle__button {
@@ -98,5 +98,5 @@
 .md-toggle__error {
   color: var(--mdErrorColor);
   font-family: 'Open sans';
-  font-size: .88em;
+  font-size: 0.88em;
 }

package/src/utils.css

@@ -1,6 +1,10 @@
 @keyframes fadeIn {
-	from { opacity: 0; }
-	to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes spinAnimation {