@miljodirektoratet/md-css 3.11.0 → 3.12.0

package/README.md

@@ -21,4 +21,18 @@ const MyComponent = () => {
 
 **For HTML structure for each component, see the README.md for each css-file, located in /src, or the `Docs`-section in the [Storybook](https://miljodir.github.io/md-components/) for each component. This must be followed if stylesheets are used as standalone, without React components.**
 
+## Fonts
+
+This package uses the fonts "Sofia Pro" and "Open Sans", and assumes that you use, or have access to, these fonts in your project. The font "Sofia Pro"can be downloaded from [here](https://github.com/miljodir/md-components/tree/main/assets/webfonts). "Open Sans" is accessible through [Google Fonts](https://fonts.google.com/specimen/Open+Sans).
+
+## DISCLAIMER
+
+> All fonts included in this repository are provided solely for use as part of the Norwegian Environment agencys projects and its associated systems.
+>
+> It is strictly prohibited to redistribute, or reuse these fonts outside the scope of the Norwegian Environment agencys projects without obtaining proper authorization or licenses from their respective owners.
+>
+> Our organization does not hold the rights to these fonts and cannot be held liable for any unauthorized use, distribution, or legal consequences arising from such actions.
+>
+> Please refer to the applicable font licenses for detailed terms of use.
+
 _For React components, see [@miljodirektoratet/md-react](https://www.npmjs.com/package/@miljodirektoratet/md-react)_

package/package.json

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

package/src/button/button.css

@@ -32,6 +32,10 @@
   width: 1rem;
   flex-shrink: 0;
 }
+.md-button__topIcon .md-loading-spinner {
+  width: 1rem;
+  height: 1rem;
+}
 
 .md-button__leftIcon {
   height: 1rem;
@@ -50,6 +54,10 @@
   flex-shrink: 0;
   margin-left: 1rem;
 }
+.md-button__rightIcon .md-loading-spinner {
+  width: 1rem;
+  height: 1rem;
+}
 
 .md-button--small > .md-button__rightIcon {
   margin-left: 0.5rem;
@@ -73,6 +81,10 @@
   color: var(--mdGreyColor60);
   cursor: not-allowed;
 }
+.md-button:not(.md-button--secondary, .md-button--tertiary)[disabled] .md-loading-spinner,
+.md-button:not(.md-button--secondary, .md-button--tertiary):disabled .md-loading-spinner {
+  filter: invert(0.3);
+}
 
 .md-button--secondary {
   background-color: #ffffff;

package/src/iconButton/iconButton.css

@@ -17,6 +17,12 @@
   height: 1.25rem;
   width: 1.25rem;
   flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+}
+.md-icon-button__icon .md-loading-spinner {
+  width: 1rem;
+  height: 1rem;
 }
 
 .md-icon-button:focus {
@@ -37,6 +43,10 @@
   color: var(--mdGreyColor60);
   cursor: not-allowed;
 }
+.md-icon-button:not(.md-icon-button--plain)[disabled] .md-loading-spinner,
+.md-icon-button:not(.md-icon-button--plain):disabled .md-loading-spinner {
+  filter: invert(0.3);
+}
 
 .md-icon-button--border {
   background-color: #ffffff;

package/src/tile/tile.css

@@ -79,6 +79,16 @@
   margin-right: 1rem;
   color: var(--mdPrimaryColor80);
 }
+.md-tile__content-icon .md-loading-spinner__container {
+  height: 100%;
+}
+.md-tile__content-icon .md-loading-spinner {
+  height: 2rem;
+  width: 2rem;
+}
+.md-tile--disabled .md-loading-spinner {
+  filter: invert(0.3);
+}
 
 .md-tile--disabled .md-tile__content-icon {
   color: var(--mdGreyColor60);
@@ -195,6 +205,17 @@
   color: var(--mdGreyColor60);
 }
 
+.md-tile-vertical__content-icon .md-loading-spinner__container {
+  height: 100%;
+}
+.md-tile-vertical__content-icon .md-loading-spinner {
+  height: 3rem;
+  width: 3rem;
+}
+.md-tile-vertical--disabled .md-loading-spinner {
+  filter: invert(0.3);
+}
+
 .md-tile-vertical__content-heading {
   font-size: 1.25rem;
 }