zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-05-30 18:10:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move menu styles to base-menu

Browse Source
This commit is contained in:
John Furrow
2016-03-19 12:25:48 +01:00
parent 34a047ec8d
commit df601a579f
4 changed files with 84 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/source/sass/components/_base-menu.scss
+72
View File
@@ -0,0 +1,72 @@
$menu--background: rgba(#fff, 0.98);
$menu--container--border: rgba($background, 0.1);
$menu--container--shadow: rgba($background, 0.3);
$menu--label: #abbac7;
$menu--value: #8899a8;
$menu--value--active: #4e6a7c;
$menu--header--border: rgba($background, 0.05);
$menu--item--background--hover: rgba($main-content--background, 0.4);
$menu--item--foreground: #95a2ad;
$menu--item--foreground--hover: darken($menu--item--foreground, 10%);
$menu--item--secondary--foreground: lighten($menu--item--foreground, 20%);
$menu--item--foreground--active: $blue;
.menu {
background: $menu--background;
border-radius: 3px;
box-shadow:
0 0 0 1px $menu--container--border,
0 0 35px $menu--container--shadow;
color: $menu--item--foreground;
text-align: left;
&__item {
padding: 5px 15px;
&__label {
&--primary {
&.has-action {
display: flex;
.menu {
&__item {
&__label {
flex: 1 1 auto;
&__action {
flex: 0 0 auto;
}
}
}
}
}
}
&--secondary {
color: $menu--item--secondary--foreground;
display: block;
font-size: 0.85em;
}
}
&.is-selectable {
cursor: pointer;
display: block;
font-size: 0.9em;
transition: background 0.25s, color 0.25s;
&:hover {
background: $menu--item--background--hover;
color: $menu--item--foreground--hover;
}
&.is-selected {
color: $menu--item--foreground--active;
}
}
}
}
client/source/sass/components/_dropdown.scss
+11 -11
View File
@@ -1,14 +1,14 @@
$dropdown--background: rgba(#fff, 0.98);
$dropdown--foreground: #95a2ad;
$dropdown--container--border: rgba($background, 0.1);
$dropdown--container--shadow: rgba($background, 0.3);
$dropdown--label: #abbac7;
$dropdown--value: #8899a8;
$dropdown--value--active: #4e6a7c;
$dropdown--header--border: rgba($background, 0.05);
$dropdown--item--background--hover: rgba($main-content--background, 0.4);
$dropdown--item--foreground--hover: darken($dropdown--foreground, 10%);
$dropdown--item--foreground--active: $blue;
$dropdown--background: $menu--background;
$dropdown--container--border: $menu--container--border;
$dropdown--container--shadow: $menu--container--shadow;
$dropdown--label: $menu--label;
$dropdown--value: $menu--value;
$dropdown--value--active: $menu--value--active;
$dropdown--header--border: $menu--header--border;
$dropdown--item--foreground: $menu--item--foreground;
$dropdown--item--background--hover: $menu--item--background--hover;
$dropdown--item--foreground--hover: $menu--item--foreground--hover;
$dropdown--item--foreground--active: $menu--item--foreground--active;
.dropdown {
display: inline-block;
client/source/sass/components/_menu.scss
-29
View File
@@ -1,29 +0,0 @@
.menu {
background: $dropdown--background;
border-radius: 3px;
box-shadow:
0 0 0 1px $dropdown--container--border,
0 0 35px $dropdown--container--shadow;
color: $dropdown--foreground;
text-align: left;
&__item {
padding: 5px 15px;
&.is-selectable {
cursor: pointer;
display: block;
font-size: 0.9em;
transition: background 0.25s, color 0.25s;
&:hover {
background: $dropdown--item--background--hover;
color: $dropdown--item--foreground--hover;
}
&.is-selected {
color: $dropdown--item--foreground--active;
}
}
}
}