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

135
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 {
li {
list-style: none; list-style: none;
padding: 0; } 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 {
.sidebar__level-1:hover,
.sidebar__level-2--item:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.05); }
#sidebar-menu .sidebar__level-2--item {
padding: 0 20px 0 0; } 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 { .sidebar__level-2--item.active {
background-color: #555; background-color: #555;
color: #fff; } color: #fff; }
.sidebar__level-2--item.active .fa-star,
.sidebar__level-2--item.active i { .sidebar__level-2--item.active .fa-star-o {
display: none; } 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-2--item:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.05); }
.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,
.keymap__name.active,
.keymap__abbrev.active {
box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc;
border-color: transparent; }
.macro__name,
.keymap__name,
.keymap__abbrev {
border: none; border: none;
border-bottom: 2px dotted #999; } border-bottom: 2px dotted #999;
.macro__name,
.macro__name.active,
.keymap__name,
.keymap__name.active,
.keymap__abbrev,
.keymap__abbrev.active {
padding: 0 .5rem; padding: 0 .5rem;
margin: 0 .25rem; } margin: 0 .25rem; }
.pane-title__name.active, .pane-title__abbrev.active {
box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc;
border-color: transparent; }
.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; }

157
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 { ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
}
li { li {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
}
.sidebar__level-1 {
padding: .5rem 1rem;
} }
.sidebar__level-1, .sidebar__level-2 { .sidebar {
&__level-1 {
padding: .5rem 1rem;
font-size: 2rem;
line-height: 3rem;
&--item {
margin-top: 0;
&:nth-child(1) {
margin: 0;
}
}
.fa-chevron-up,
.fa-chevron-down {
margin-right: 1rem;
font-size: 1.5rem;
position: relative;
top: .5rem;
display: none;
}
&:hover {
.fa-chevron-up,
.fa-chevron-down {
display: inline-block;
}
}
}
// General spacing of level-1 and level-2 elements.
&__level-1,
&__level-2 {
padding-left: 15px; padding-left: 15px;
} }
.sidebar__level-2 { &__level-2 {
margin-left: 15px; margin-left: 15px;
}
.sidebar__level-1:hover, &--item {
.sidebar__level-2--item:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.05);
}
#sidebar-menu .sidebar__level-2--item {
padding: 0 20px 0 0; padding: 0 20px 0 0;
&.active {
background-color: #555;
color: #fff;
.fa-star,
.fa-star-o {
display: none;
} }
#sidebar-menu .sidebar__level-2--item .fa.pull-right { &:hover {
background-color: #555;
.fa-star,
.fa-star-o {
display: block;
color: #fff;
}
}
}
&:hover {
.fa-star-o {
color: #000;
&:hover {
color: #000;
}
}
}
// General "right side" icon theming.
.fa.pull-right {
position: relative; position: relative;
top: 2px; top: 2px;
} }
#sidebar-menu .fa-star-o { .fa-star-o {
color: #f5f5f5; color: #f5f5f5;
} }
#sidebar-menu .sidebar__level-2--item:hover .fa-star-o { .fa-star {
color: #000;
}
#sidebar-menu .sidebar__level-2--item .fa-star-o:hover {
color: #000;
}
#sidebar-menu .fa-star {
color: #666; color: #666;
} }
}
.sidebar__level-1 {
font-size: 2rem;
line-height: 3rem;
} }
.sidebar__level-1--item { // General hover over menu items.
margin-top: 0; &__level-1,
&__level-2--item {
&:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.05);
} }
.sidebar__level-1--item:nth-child(1) {
margin: 0;
} }
.sidebar__level-2--item.active {
background-color: #555;
color: #fff;
}
.sidebar__level-2--item.active i {
display: none;
} }
.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 {
&__level-1 {
background-color: transparent; background-color: transparent;
padding: 1rem; padding: 1rem;
} }
}
#main-content {
margin-left: 250px;
} }
.pane-title { .pane-title {
@@ -115,23 +152,26 @@ li {
} }
} }
.keymap__is-default.fa-star { .keymap__is-default {
&.fa-star {
color: #333; 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;
}