Skip to content

Commit cbb1c28

Browse files
hnb-kuhnb-ku
authored
DEV: v2 (#8)
1 parent b57ecc4 commit cbb1c28

File tree

9 files changed

+256
-326
lines changed

9 files changed

+256
-326
lines changed

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2018 Joe
3+
Copyright (c) 2018
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,4 @@
22

33
A theme component that allows you to build a header menu - with submenus - using plain text!
44

5-
More information <a href="https://meta.discourse.org/t">https://meta.discourse.org/</a>
6-
7-
<a href="https://github.com/claviska/jquery-dropdown">jquery-dropdown</a> courtesy of Cory LaViska - MIT license
5+
More information <a href="https://meta.discourse.org/t/header-submenus/94584">https://meta.discourse.org/t/header-submenus/94584</a>

‎common/common.scss‎

Lines changed: 72 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,114 @@
1-
@import "common/foundation/variables";
2-
3-
$menu-background: null !default;
4-
$menu-item-color: null !default;
5-
$menu-item-active-background: null !default;
6-
$menu-item-active-color: null !default;
7-
$submenu-background: null !default;
8-
$submenu-item-color: null !default;
9-
$submenu-item-hover-background: null !default;
10-
$submenu-item-hover-color: null !default;
11-
$divider-color: null !default;
12-
13-
@if $Menu_background != "" {
14-
$menu-background: #{$Menu_background};
15-
} @else {
16-
$menu-background: $primary;
17-
}
18-
19-
@if $Menu_item_color != "" {
20-
$menu-item-color: #{$Menu_item_color};
21-
} @else {
22-
$menu-item-color: $secondary;
23-
}
24-
25-
@if $Menu_item-active_background != "" {
26-
$menu-item-active-background: #{$Menu_item_active_background};
27-
} @else {
28-
$menu-item-active-background: $primary-low;
29-
}
30-
31-
@if $Menu_item_active_color != "" {
32-
$menu-item-active-color: #{$Menu_item_active_color};
33-
} @else {
34-
$menu-item-active-color: $primary;
35-
}
36-
37-
@if $Submenu_background != "" {
38-
$submenu-background: #{$Submenu_background};
39-
} @else {
40-
$submenu-background: $secondary;
41-
}
42-
43-
@if $Submenu_item_color != "" {
44-
$submenu-item-color: #{$Submenu_item_color};
45-
} @else {
46-
$submenu-item-color: $primary;
47-
}
48-
49-
@if $Submenu_item_hover_background != "" {
50-
$submenu-item-hover-background: #{$Submenu_item_hover_background};
51-
} @else {
52-
$submenu-item-hover-background: $tertiary-low;
53-
}
54-
55-
@if $Submenu_item_hover_color != "" {
56-
$submenu-item-hover-color: #{$Submenu_item_hover_color};
57-
} @else {
58-
$submenu-item-hover-color: $primary;
1+
@function fallback($setting, $color) {
2+
@if not $setting or $setting == "" {
3+
@return $color;
4+
} @else {
5+
@return $setting;
6+
}
597
}
608

61-
@if $Divider_color != "" {
62-
$divider-color: #{$Divider_color};
63-
} @else {
64-
$divider-color: $primary-low;
65-
}
9+
$item-height: 40px;
10+
$icon-opacity: 0.7;
6611

6712
.top-menu {
68-
background: $menu-background;
13+
background: fallback($Menu_background, $primary);
14+
width: 100%;
6915

70-
.wrap {
16+
.menu-content {
7117
display: flex;
7218
align-items: center;
19+
justify-content: if($Invert_position == "true", flex-end, flex-start);
20+
}
7321

74-
@if $Invert_position == "true" {
75-
justify-content: flex-end;
76-
}
22+
.menu-items {
23+
display: flex;
24+
height: $item-height;
7725
}
7826

79-
.wrap > a {
80-
color: $menu-item-color;
27+
.menu-item {
28+
position: relative;
29+
color: fallback($Menu_item_color, $secondary);
8130
border: none;
82-
padding: 10px 12px;
31+
padding: 0 0.5em;
8332
font-size: $font-up-1;
84-
line-height: $line-height-medium;
8533
transition: all 0.15s;
8634
display: flex;
8735
align-items: center;
88-
white-space: nowrap;
8936

90-
&:first-of-type {
91-
margin-left: -12px;
92-
}
93-
94-
.rtl & {
95-
&:first-of-type {
96-
margin-right: -12px;
37+
&:hover,
38+
&:active,
39+
&:focus {
40+
background: fallback($Menu_item-active_background, $primary-low);
41+
color: fallback($Menu-item-active-background, $primary);
42+
cursor: default;
43+
.d-icon-caret-right {
44+
transform: rotate(90deg);
45+
}
46+
.d-header-dropdown {
47+
display: block;
48+
top: $item-height;
49+
left: 0;
50+
z-index: z("header") + 1;
51+
52+
.rtl & {
53+
left: unset;
54+
right: 0;
55+
}
9756
}
9857
}
9958

100-
&.d-dropdown-open {
101-
background: $menu-item-active-background;
102-
color: $menu-item-active-color;
103-
z-index: z("header") + 2;
104-
}
105-
}
106-
107-
.d-icon {
108-
margin-right: 5px;
109-
opacity: 0.7;
110-
min-width: 16px;
111-
text-align: center;
112-
113-
&.fa-none {
114-
min-width: unset;
115-
}
116-
117-
.rtl & {
118-
margin-right: 0;
119-
margin-left: 5px;
120-
}
121-
}
122-
123-
.d-icon-caret-down {
124-
transform: rotate(-90deg);
125-
transition: transform ease 0.15s;
59+
.d-icon-caret-right {
60+
margin-left: 0.25em;
61+
transition: transform 0.15s ease-in-out;
12662

127-
.rtl & {
128-
transform: rotate(90deg);
63+
.rtl & {
64+
margin-left: 0em;
65+
margin-right: 0.25em;
66+
}
12967
}
13068
}
13169

132-
.d-dropdown-open .d-icon-caret-down {
133-
transform: rotate(0);
70+
.d-header-dropdown {
71+
position: absolute;
72+
display: none;
13473
}
135-
}
136-
137-
.d-dropdown {
138-
position: absolute;
139-
z-index: z("header") + 1;
140-
display: none;
14174

14275
.d-dropdown-menu {
14376
min-width: 160px;
144-
max-width: 360px;
145-
list-style: none;
146-
background: $submenu-background;
77+
background: fallback($Submenu_background, $secondary);
14778
box-shadow: shadow("menu-panel");
148-
overflow: visible;
149-
padding: 4px 0;
15079
margin: 0;
151-
}
152-
153-
.d-dropdown-menu li {
15480
list-style: none;
155-
padding: 0 0;
156-
margin: 0;
157-
line-height: 18px;
15881
}
15982

160-
.d-dropdown-menu li > a {
83+
.submenu-link {
16184
display: flex;
16285
align-items: center;
163-
color: $submenu-item-color;
164-
text-decoration: none;
165-
line-height: 18px;
166-
padding: 3px 15px;
167-
margin: 0;
86+
color: fallback($Submenu_item_color, $primary);
87+
padding: 0.5em;
88+
font-size: $font-down-1;
16889
white-space: nowrap;
16990

17091
&:hover {
171-
background-color: $submenu-item-hover-background;
172-
color: inherit;
173-
cursor: pointer;
92+
color: fallback($Submenu_item_hover_color, $primary);
93+
background-color: fallback($Submenu_item_hover_background, $tertiary-low);
17494
}
17595
}
17696

177-
.d-dropdown-menu .divider {
178-
font-size: 1px;
179-
border-top: solid 1px $divider-color;
180-
padding: 0;
181-
margin: 5px 0;
97+
.divider {
98+
border-top: solid 1px fallback($Divider_color, $primary-low);
99+
margin: 0.25em auto;
100+
}
101+
102+
.d-icon {
103+
opacity: $icon-opacity;
104+
min-width: 1em;
105+
&:not(.d-icon-caret-right) {
106+
margin-right: 0.5em;
107+
108+
.rtl & {
109+
margin-right: 0;
110+
margin-left: 0.5em;
111+
}
112+
}
182113
}
183114
}

‎common/header.html‎

Lines changed: 0 additions & 126 deletions
This file was deleted.

0 commit comments

Comments
 (0)