@miljodirektoratet/md-css 5.2.0 → 5.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/tabs/README.md +1 -1
- package/src/tabs/tabs.css +44 -0
package/package.json
CHANGED
package/src/tabs/README.md
CHANGED
|
@@ -7,7 +7,7 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
|
|
|
7
7
|
See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<div class="md-tabs-container">
|
|
10
|
+
<div class="md-tabs-container [md-tabs__compact]">
|
|
11
11
|
<ul>
|
|
12
12
|
<li>
|
|
13
13
|
<button class="md-tabs-button [md-tabs-button--selected, md-tabs-button--disabled]">Tab 1</button>
|
package/src/tabs/tabs.css
CHANGED
|
@@ -63,3 +63,47 @@
|
|
|
63
63
|
background-color: var(--mdPrimaryColor20);
|
|
64
64
|
cursor: pointer;
|
|
65
65
|
}
|
|
66
|
+
|
|
67
|
+
/* Compact tabs */
|
|
68
|
+
.md-tabs-container.md-tabs__compact ul {
|
|
69
|
+
gap: 0;
|
|
70
|
+
flex-wrap: nowrap;
|
|
71
|
+
border-radius: 0.25rem;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.md-tabs-container.md-tabs__compact ul li .md-tabs-button {
|
|
75
|
+
height: 1.875rem;
|
|
76
|
+
padding: 0.25rem 1rem;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
border: 0.0625rem solid var(--mdGreyColor40);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.md-tabs-container.md-tabs__compact ul li:first-child .md-tabs-button {
|
|
82
|
+
border-top-left-radius: 0.25rem;
|
|
83
|
+
border-bottom-left-radius: 0.25rem;
|
|
84
|
+
border-right: none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.md-tabs-container.md-tabs__compact ul li:last-child .md-tabs-button {
|
|
88
|
+
border-top-right-radius: 0.25rem;
|
|
89
|
+
border-bottom-right-radius: 0.25rem;
|
|
90
|
+
border-left: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.md-tabs-container.md-tabs__compact ul li .md-tabs-button.md-tabs-button--selected {
|
|
94
|
+
background-color: var(--mdPrimaryColor80);
|
|
95
|
+
color: white;
|
|
96
|
+
border-color: var(--mdPrimaryColor80);
|
|
97
|
+
font-weight: 400;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
.md-tabs-container.md-tabs__compact ul li .md-tabs-button--selected:hover:not(.md-tabs-button--disabled) {
|
|
102
|
+
background-color: var(--mdPrimaryColor);
|
|
103
|
+
color: white;
|
|
104
|
+
cursor: default;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.md-tabs-container.md-tabs__compact ul li .md-tabs-button::after {
|
|
108
|
+
display: none;
|
|
109
|
+
}
|