app/assets/sass/_menu.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

$menu-offset: 120px;
$menu-toggle-height: 45px;

.menu {
   width: 190px;
   height: 260px;
   position: absolute;
   font-size: $font-size-sm;
   top: $menu-offset - 5;
   left: 0;
   background-color: $gray-dark;
   box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);
   color: #fff;
   border-top-right-radius: $border-radius-base;
   border-bottom-right-radius: $border-radius-base;
   z-index: 1;

   header {
      h3 {
         padding-top: $padding-lg;
         margin-bottom: $padding-base;
         font-size: round($font-size-base * 1.2);
         font-weight: 600;
         line-height: 2;
         text-align: right;
         padding-right: $padding-lg * 2;
      }
   }

   ul {
      margin-left: $padding-lg;

      li {
         line-height: 2.5;
      }
   }

   &-toggle {
      font-size: round($font-size-lg * 1.3);
      float: left;
      padding-left: $padding-base;
      line-height: 2;
      cursor: pointer;
   }

   &-hidden {
      width: $menu-toggle-height;
      height: $menu-toggle-height;
      border-top-right-radius: 50%;
      border-bottom-right-radius: 50%;

      ul, h3 {
         visibility: hidden;
      }
   }

   .button-group {
      display: flex;
      margin-bottom: $padding-base;
   }
}