uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor app.scss to make use of nesting. This is part of #5.

Browse Source
This commit is contained in:
Arpad Csanyi
2016-03-15 10:25:51 +01:00
parent 7f22eb610d
commit 8a1323d5bb
2 changed files with 178 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
css/app.css
View File

@@ -1,3 +1,6 @@
#main-content {
margin-left: 250px; }
#sidebar-menu { #sidebar-menu {
background-color: #f5f5f5; background-color: #f5f5f5;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
@@ -5,110 +8,86 @@
overflow-y: auto; overflow-y: auto;
width: 250px; width: 250px;
height: 100%; } height: 100%; }
#sidebar-menu ul {
ul { padding: 0;
padding: 0; margin: 0; }
margin: 0; } #sidebar-menu ul li {
list-style: none;
li { padding: 0; }
list-style: none;
padding: 0; }
.sidebar__level-1 { .sidebar__level-1 {
padding: .5rem 1rem; } padding: .5rem 1rem;
font-size: 2rem;
line-height: 3rem; }
.sidebar__level-1--item {
margin-top: 0; }
.sidebar__level-1--item:nth-child(1) {
margin: 0; }
.sidebar__level-1 .fa-chevron-up,
.sidebar__level-1 .fa-chevron-down {
margin-right: 1rem;
font-size: 1.5rem;
position: relative;
top: .5rem;
display: none; }
.sidebar__level-1:hover .fa-chevron-up,
.sidebar__level-1:hover .fa-chevron-down {
display: inline-block; }
.sidebar__level-1, .sidebar__level-2 { .sidebar__level-1, .sidebar__level-2 {
padding-left: 15px; } padding-left: 15px; }
.sidebar__level-2 { .sidebar__level-2 {
margin-left: 15px; } margin-left: 15px; }
.sidebar__level-2--item {
padding: 0 20px 0 0; }
.sidebar__level-2--item.active {
background-color: #555;
color: #fff; }
.sidebar__level-2--item.active .fa-star,
.sidebar__level-2--item.active .fa-star-o {
display: none; }
.sidebar__level-2--item.active:hover {
background-color: #555; }
.sidebar__level-2--item.active:hover .fa-star,
.sidebar__level-2--item.active:hover .fa-star-o {
display: block;
color: #fff; }
.sidebar__level-2--item:hover .fa-star-o {
color: #000; }
.sidebar__level-2--item:hover .fa-star-o:hover {
color: #000; }
.sidebar__level-2--item .fa.pull-right {
position: relative;
top: 2px; }
.sidebar__level-2--item .fa-star-o {
color: #f5f5f5; }
.sidebar__level-2--item .fa-star {
color: #666; }
.sidebar__level-1:hover, .sidebar__level-1:hover, .sidebar__level-2--item:hover {
.sidebar__level-2--item:hover {
cursor: pointer; cursor: pointer;
background-color: rgba(0, 0, 0, 0.05); } background-color: rgba(0, 0, 0, 0.05); }
#sidebar-menu .sidebar__level-2--item {
padding: 0 20px 0 0; }
#sidebar-menu .sidebar__level-2--item .fa.pull-right {
position: relative;
top: 2px; }
#sidebar-menu .fa-star-o {
color: #f5f5f5; }
#sidebar-menu .sidebar__level-2--item:hover .fa-star-o {
color: #000; }
#sidebar-menu .sidebar__level-2--item .fa-star-o:hover {
color: #000; }
#sidebar-menu .fa-star {
color: #666; }
.sidebar__level-1 {
font-size: 2rem;
line-height: 3rem; }
.sidebar__level-1--item {
margin-top: 0; }
.sidebar__level-1--item:nth-child(1) {
margin: 0; }
#sidebar-menu .sidebar__actions--list {
margin-top: 1rem; }
.sidebar__action--item {
text-align: center; }
.sidebar__action {
width: 80%; }
.sidebar__level-2--item.active {
background-color: #555;
color: #fff; }
.sidebar__level-2--item.active i {
display: none; }
.menu--bottom { .menu--bottom {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; } width: 100%; }
.menu--bottom .sidebar__level-1 {
.menu--bottom .sidebar__level-1 { background-color: transparent;
background-color: transparent; padding: 1rem; }
padding: 1rem; }
#main-content {
margin-left: 250px; }
.pane-title { .pane-title {
margin-bottom: 1em; } margin-bottom: 1em; }
.pane-title__name, .pane-title__abbrev {
.macro__name.active, border: none;
.keymap__name.active, border-bottom: 2px dotted #999;
.keymap__abbrev.active { padding: 0 .5rem;
box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc; margin: 0 .25rem; }
border-color: transparent; } .pane-title__name.active, .pane-title__abbrev.active {
box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc;
.macro__name, border-color: transparent; }
.keymap__name,
.keymap__abbrev {
border: none;
border-bottom: 2px dotted #999; }
.macro__name,
.macro__name.active,
.keymap__name,
.keymap__name.active,
.keymap__abbrev,
.keymap__abbrev.active {
padding: 0 .5rem;
margin: 0 .25rem; }
.keymap__is-default.fa-star { .keymap__is-default.fa-star {
color: #333; } color: #333; }
@@ -131,15 +110,3 @@ li {
display: block; display: block;
width: 100%; width: 100%;
height: auto; } height: auto; }
.sidebar__level-1 .fa.fa-chevron-down,
.sidebar__level-1 .fa.fa-chevron-up {
margin-right: 1rem;
font-size: 1.5rem;
position: relative;
top: .5rem;
display: none; }
.sidebar__level-1:hover .fa.fa-chevron-down,
.sidebar__level-1:hover .fa.fa-chevron-up {
display: inline-block; }

203
sass/app.scss
View File

@@ -1,3 +1,7 @@
#main-content {
margin-left: 250px;
}
#sidebar-menu { #sidebar-menu {
background-color: #f5f5f5; background-color: #f5f5f5;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
@@ -5,81 +9,116 @@
overflow-y: auto; overflow-y: auto;
width: 250px; width: 250px;
height: 100%; height: 100%;
// General list styles for the sidebar-menu.
ul {
padding: 0;
margin: 0;
li {
list-style: none;
padding: 0;
}
}
} }
ul { .sidebar {
padding: 0; &__level-1 {
margin: 0; padding: .5rem 1rem;
} font-size: 2rem;
line-height: 3rem;
li { &--item {
list-style: none; margin-top: 0;
padding: 0;
}
.sidebar__level-1 { &:nth-child(1) {
padding: .5rem 1rem; margin: 0;
} }
}
.sidebar__level-1, .sidebar__level-2 { .fa-chevron-up,
padding-left: 15px; .fa-chevron-down {
} margin-right: 1rem;
font-size: 1.5rem;
position: relative;
top: .5rem;
display: none;
}
.sidebar__level-2 { &:hover {
margin-left: 15px; .fa-chevron-up,
} .fa-chevron-down {
display: inline-block;
}
}
}
.sidebar__level-1:hover, // General spacing of level-1 and level-2 elements.
.sidebar__level-2--item:hover { &__level-1,
cursor: pointer; &__level-2 {
background-color: rgba(0, 0, 0, 0.05); padding-left: 15px;
} }
#sidebar-menu .sidebar__level-2--item { &__level-2 {
padding: 0 20px 0 0; margin-left: 15px;
}
#sidebar-menu .sidebar__level-2--item .fa.pull-right { &--item {
position: relative; padding: 0 20px 0 0;
top: 2px;
}
#sidebar-menu .fa-star-o { &.active {
color: #f5f5f5; background-color: #555;
} color: #fff;
#sidebar-menu .sidebar__level-2--item:hover .fa-star-o { .fa-star,
color: #000; .fa-star-o {
} display: none;
}
#sidebar-menu .sidebar__level-2--item .fa-star-o:hover { &:hover {
color: #000; background-color: #555;
}
#sidebar-menu .fa-star { .fa-star,
color: #666; .fa-star-o {
} display: block;
color: #fff;
}
}
}
.sidebar__level-1 { &:hover {
font-size: 2rem; .fa-star-o {
line-height: 3rem; color: #000;
}
.sidebar__level-1--item { &:hover {
margin-top: 0; color: #000;
} }
}
}
.sidebar__level-1--item:nth-child(1) { // General "right side" icon theming.
margin: 0; .fa.pull-right {
} position: relative;
top: 2px;
}
.sidebar__level-2--item.active { .fa-star-o {
background-color: #555; color: #f5f5f5;
color: #fff; }
}
.sidebar__level-2--item.active i { .fa-star {
display: none; color: #666;
}
}
}
// General hover over menu items.
&__level-1,
&__level-2--item {
&:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.05);
}
}
} }
.menu--bottom { .menu--bottom {
@@ -87,15 +126,13 @@ li {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
}
.menu--bottom .sidebar__level-1 { .sidebar {
background-color: transparent; &__level-1 {
padding: 1rem; background-color: transparent;
} padding: 1rem;
}
#main-content { }
margin-left: 250px;
} }
.pane-title { .pane-title {
@@ -115,23 +152,26 @@ li {
} }
} }
.keymap__is-default.fa-star { .keymap__is-default {
color: #333; &.fa-star {
} color: #333;
}
.keymap__is-default.fa-star-o { &.fa-star-o {
color: #333; color: #333;
} }
.keymap__is-default:hover { &:hover {
color: #555; color: #555;
cursor: pointer; cursor: pointer;
}
} }
.uhk { .uhk {
max-width: 100%; max-width: 100%;
} }
// BOF: These styles will be deleted when removing OWL carousel.
.owl-carousel { .owl-carousel {
max-width: 991px; max-width: 991px;
margin: auto; margin: auto;
@@ -142,17 +182,4 @@ li {
width: 100%; width: 100%;
height: auto; height: auto;
} }
// EOF: These styles will be deleted when removing OWL carousel.
.sidebar__level-1 .fa.fa-chevron-down,
.sidebar__level-1 .fa.fa-chevron-up {
margin-right: 1rem;
font-size: 1.5rem;
position: relative;
top: .5rem;
display: none;
}
.sidebar__level-1:hover .fa.fa-chevron-down,
.sidebar__level-1:hover .fa.fa-chevron-up {
display: inline-block;
}