diff --git a/assets/css/main.css b/assets/css/main.css index bedfa06..623d936 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -884,4 +884,68 @@ header__navbar-icon-link:hover { line-height: 38px; color: var(--text-color); display: block; +} + +/* App container */ +.app__container { + background-color: #f5f5f5; +} + +.category { + border-radius: 2px; + background-color: var(--white-color); +} + +.category__heading { + color: var(--text-color); + font-size: 1.7rem; + padding: 12px 16px; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); +} + +.category__heading-icon { + font-size: 1.4rem; + margin-right: 4px; + position: relative; + top: -1px; +} + +.category-list { + padding: 0 0 8px 0; + list-style: none; + margin-left: 10px; +} + +.category-item { + +} + +.category-item--active .category-item__link { + color: var(--primary-color); +} + +.category-item--active .category-item__link::before { + content: ""; + position: absolute; + top: 50%; + left: 6px; + border: 4px solid; + transform: translateY(-50%); + border-color: transparent transparent transparent var(--primary-color); +} + +.category-item__link { + position: relative; + right: 0; + font-size: 1.5rem; + color: var(--text-color); + text-decoration: none; + padding: 4px 16px; + display: block; + transition: right linear 0.1s; +} + +.category-item__link:hover { + right: -4px; + color: var(--primary-color); } \ No newline at end of file diff --git a/index.html b/index.html index c12aa74..cfc4b44 100644 --- a/index.html +++ b/index.html @@ -306,24 +306,24 @@
-
+