Skip to content

Commit 1497a48

Browse files
marijohannessenmarijohannessen
authored
Merge branch 'v10' into gatsby-catch-links
2 parents 32c686f + ebaf893 commit 1497a48

File tree

6 files changed

+128
-99
lines changed

6 files changed

+128
-99
lines changed

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"packages": [
33
"packages/*"
44
],
5-
"version": "0.0.1-alpha.10",
5+
"version": "0.0.1-alpha.13",
66
"npmClient": "yarn",
77
"useWorkspaces": true
88
}

‎packages/addons-website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@carbon/addons-website",
3-
"version": "0.0.1-alpha.10",
3+
"version": "0.0.1-alpha.13",
44
"license": "Apache-2.0",
55
"main": "lib/index.js",
66
"module": "es/index.js",

‎packages/addons-website/scss/components/_website-header-nav.scss‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
//----------------------------
2+
// Header Navigation
3+
//----------------------------
4+
5+
.#{$prefix}--header__nav {
6+
margin-left: auto;
7+
display: none;
8+
9+
@include breakpoint('lg') {
10+
display: block;
11+
position: absolute;
12+
left: 25%; //to align 4 columns over
13+
top: 0;
14+
}
15+
}
16+
17+
//----------------------------
18+
// Top level nav
19+
//----------------------------
20+
a.#{$prefix}--header__menu-item[role='menuitem'] {
21+
@include type-style('body-short-02');
22+
position: relative;
23+
color: $ibm-colors__gray-10;
24+
border-width: 2px;
25+
}
26+
27+
// Hover
28+
a.#{$prefix}--header__menu-item[role='menuitem']:hover {
29+
background-color: #2c2c2c;
30+
color: $ibm-colors__gray-10;
31+
}
32+
33+
// Item with dropdown
34+
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] {
35+
background: $ibm-colors__gray-90;
36+
}
37+
38+
// Selected
39+
a.#{$prefix}--header__menu-item[role='menuitem'][aria-current='page'],
40+
.#{$prefix}--header .submenu--active > a.#{$prefix}--header__menu-item {
41+
background: transparent;
42+
}
43+
44+
a.#{$prefix}--header__menu-item[role='menuitem'][aria-current='page']:after,
45+
.#{$prefix}--header .submenu--active > a.#{$prefix}--header__menu-item:after {
46+
content: '';
47+
width: calc(100% + 4px);
48+
position: absolute;
49+
left: -2px;
50+
bottom: -2px;
51+
border-top: 4px solid $ibm-colors__blue-60;
52+
}
53+
54+
//Active
55+
a.#{$prefix}--header__menu-item[role='menuitem']:active {
56+
background: $ibm-colors__gray-80;
57+
}
58+
59+
//----------------------------
60+
// Drop down nav
61+
//----------------------------
62+
.#{$prefix}--header__menu .#{$prefix}--header__menu-item[role='menuitem']:after,
63+
.#{$prefix}--header__menu
64+
.#{$prefix}--header__menu-item[role='menuitem'][aria-current='page']:after {
65+
content: '';
66+
width: calc(100% - 16px);
67+
position: absolute;
68+
left: 8px;
69+
bottom: -3px;
70+
border-top: none;
71+
border-bottom: 1px solid $ibm-colors__gray-70;
72+
}
73+
74+
.#{$prefix}--header__menu
75+
.#{$prefix}--header__menu-item[role='menuitem']:hover:after,
76+
.#{$prefix}--header__menu
77+
li:last-child
78+
.#{$prefix}--header__menu-item[role='menuitem']:after {
79+
display: none;
80+
}
81+
82+
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
83+
+ .#{$prefix}--header__menu {
84+
background: $ibm-colors__gray-90;
85+
}
86+
87+
.#{$prefix}--header__menu .#{$prefix}--header__menu-item[role='menuitem'] {
88+
@include type-style('body-short-01');
89+
color: $ibm-colors__gray-30;
90+
}
91+
92+
// Hover
93+
.#{$prefix}--header__menu
94+
.#{$prefix}--header__menu-item[role='menuitem']:hover {
95+
color: $ibm-colors__gray-10;
96+
background: #353535; //$hover-ui gray 90 theme
97+
}
98+
99+
// Selected
100+
.#{$prefix}--header__menu
101+
.#{$prefix}--header__menu-item[role='menuitem'][aria-current='page'] {
102+
color: $ibm-colors__gray-10;
103+
font-weight: 600;
104+
background: $ibm-colors__gray-80;
105+
}
106+
107+
.#{$prefix}--header__menu
108+
.#{$prefix}--header__menu-item[role='menuitem'][aria-current='page']:after {
109+
display: none;
110+
}
111+
112+
// Focus/Active
113+
.#{$prefix}--header__menu
114+
.#{$prefix}--header__menu-item[role='menuitem']:active {
115+
color: $ibm-colors__gray-10;
116+
background: $ibm-colors__gray-70;
117+
}

‎packages/addons-website/scss/components/_website-header.scss‎

Lines changed: 6 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
.#{$prefix}--header--website {
44
z-index: 9999;
55
background-color: $ui-05;
6-
border-bottom: 1px solid $ibm-colors__gray-80;
6+
border-bottom: 1px solid $inverse-02;
77
}
88

99
.#{$prefix}--header__action--active {
@@ -22,6 +22,11 @@
2222
a.#{$prefix}--header__name {
2323
@include type-style('body-short-02');
2424
font-weight: 600;
25+
padding-left: 0;
26+
27+
@include breakpoint('lg') {
28+
padding-left: 1rem;
29+
}
2530
}
2631

2732
.#{$prefix}--header__name--prefix {
@@ -41,98 +46,3 @@ a.#{$prefix}--header__name {
4146
a.#{$prefix}--header__name:focus {
4247
box-shadow: inset 0 0 0 2px $focus;
4348
}
44-
45-
//----------------------------
46-
// Header Navigation
47-
//----------------------------
48-
49-
.#{$prefix}--header__nav {
50-
margin-left: auto;
51-
display: none;
52-
53-
@include breakpoint('lg') {
54-
display: block;
55-
}
56-
}
57-
58-
a.#{$prefix}--header__menu-item[role='menuitem'],
59-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
60-
+ .#{$prefix}--header__menu {
61-
width: rem(160px);
62-
}
63-
64-
a.#{$prefix}--header__menu-item[role='menuitem'] {
65-
position: relative;
66-
color: $ibm-colors__gray-30;
67-
border-width: 2px;
68-
}
69-
70-
// Hover
71-
a.#{$prefix}--header__menu-item[role='menuitem']:hover {
72-
background-color: #353535;
73-
color: $ibm-colors__gray-10;
74-
}
75-
76-
// Hover with expanded
77-
a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-title[role='menuitem']:hover,
78-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] {
79-
background: $ibm-colors__gray-70;
80-
color: $ibm-colors__gray-10;
81-
}
82-
83-
// Current page
84-
a.#{$prefix}--header__menu-item[role='menuitem'][aria-current='page'] {
85-
background: $ibm-colors__gray-80;
86-
color: $ibm-colors__gray-10;
87-
}
88-
89-
a.#{$prefix}--header__menu-item[role='menuitem'][aria-current='page']:after {
90-
content: '';
91-
width: calc(100% + 4px);
92-
position: absolute;
93-
left: -2px;
94-
bottom: -2px;
95-
border-top: 4px solid $ibm-colors__blue-60;
96-
}
97-
98-
// Expanded drop down menn
99-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
100-
+ .#{$prefix}--header__menu {
101-
background: $ibm-colors__gray-90;
102-
color: $ibm-colors__gray-10;
103-
}
104-
105-
.#{$prefix}--header__menu .#{$prefix}--header__menu-item[role='menuitem'] {
106-
color: $ibm-colors__gray-30;
107-
}
108-
109-
.#{$prefix}--header__menu
110-
.#{$prefix}--header__menu-item[role='menuitem'][aria-current='page'] {
111-
background: transparent;
112-
}
113-
114-
.#{$prefix}--header__menu .#{$prefix}--header__menu-item[role='menuitem']:after,
115-
.#{$prefix}--header__menu
116-
.#{$prefix}--header__menu-item[role='menuitem'][aria-current='page']:after {
117-
content: '';
118-
width: calc(100% - 16px);
119-
position: absolute;
120-
left: 8px;
121-
bottom: -3px;
122-
border-top: none;
123-
border-bottom: 1px solid $ibm-colors__gray-70;
124-
}
125-
126-
.#{$prefix}--header__menu
127-
.#{$prefix}--header__menu-item[role='menuitem']:hover:after,
128-
.#{$prefix}--header__menu
129-
li:last-child
130-
.#{$prefix}--header__menu-item[role='menuitem']:after {
131-
display: none;
132-
}
133-
134-
.#{$prefix}--header__menu
135-
.#{$prefix}--header__menu-item[role='menuitem']:hover {
136-
color: $ibm-colors__gray-10;
137-
background: #353535;
138-
}

‎packages/addons-website/scss/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
@import 'components/website-footer';
33
@import 'components/website-switcher';
44
@import 'components/website-header';
5+
@import 'components/website-header-nav';
56
@import 'components/website-side-nav';

‎packages/addons-website/src/components/WebsiteFooter/WebsiteFooter-story.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ storiesOf('Website Footer', module).add(
1919
{ href: 'https://twitter.com/_carbondesign', linkText: 'Twitter' },
2020
]}>
2121
<p>
22-
Have questions? Email us or open an issue in<br />{' '}
22+
Have questions? Email us or open
23+
<br /> an issue in
2324
<a href="#">GitHub.</a>
2425
</p>
2526
<p>

0 commit comments

Comments
 (0)