hexo-theme-shokax 0.0.2-alpha2 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (157) hide show
  1. package/CODE_OF_CONDUCT.md +128 -0
  2. package/CONTRIBUTING.md +56 -0
  3. package/LICENSE +28 -28
  4. package/LICENSE-shoka +21 -21
  5. package/README.md +46 -55
  6. package/README_en.MD +25 -0
  7. package/_config.yml +392 -355
  8. package/_images.yml +100 -100
  9. package/languages/README.md +19 -19
  10. package/languages/default.yml +1 -1
  11. package/languages/en.yml +151 -151
  12. package/languages/ja.yml +146 -146
  13. package/languages/zh-CN.yml +154 -154
  14. package/languages/zh-HK.yml +146 -146
  15. package/languages/zh-TW.yml +146 -146
  16. package/layout/_alternate/atom.ejs +30 -30
  17. package/layout/_alternate/json.ejs +16 -16
  18. package/layout/_alternate/rss.ejs +34 -34
  19. package/layout/_mixin/breadcrumb.pug +33 -33
  20. package/layout/_mixin/card.pug +37 -37
  21. package/layout/_mixin/comment.pug +66 -12
  22. package/layout/_mixin/postmeta.pug +30 -30
  23. package/layout/_mixin/segment.pug +32 -32
  24. package/layout/_mixin/sidebar.pug +36 -36
  25. package/layout/_mixin/widgets.pug +31 -29
  26. package/layout/_partials/footer.pug +40 -40
  27. package/layout/_partials/head/head.pug +56 -58
  28. package/layout/_partials/head/head_com.pug +17 -17
  29. package/layout/_partials/head/pwa.pug +18 -18
  30. package/layout/_partials/header.pug +18 -18
  31. package/layout/_partials/layout.pug +143 -153
  32. package/layout/_partials/loading.pug +13 -13
  33. package/layout/_partials/pagination.pug +4 -4
  34. package/layout/_partials/post/copyright.pug +20 -20
  35. package/layout/_partials/post/footer.pug +14 -14
  36. package/layout/_partials/post/nav.pug +13 -13
  37. package/layout/_partials/post/post.pug +28 -28
  38. package/layout/_partials/post/reward.pug +18 -18
  39. package/layout/_partials/sidebar/menu.pug +37 -37
  40. package/layout/_partials/sidebar/overview.pug +41 -42
  41. package/layout/_partials/third-party/baidu-analytics.pug +11 -11
  42. package/layout/_partials/third-party/clarity.pug +8 -8
  43. package/layout/archive.pug +118 -118
  44. package/layout/category.pug +63 -63
  45. package/layout/index.pug +33 -33
  46. package/layout/page.pug +56 -56
  47. package/layout/post.pug +35 -35
  48. package/layout/tag.pug +43 -43
  49. package/package.json +35 -35
  50. package/scripts/filters/locals.js +59 -59
  51. package/scripts/filters/post.js +23 -23
  52. package/scripts/generaters/archive.js +141 -141
  53. package/scripts/generaters/config.js +43 -43
  54. package/scripts/generaters/images.js +26 -26
  55. package/scripts/generaters/index.js +110 -110
  56. package/scripts/generaters/pages.js +19 -19
  57. package/scripts/generaters/script.js +89 -89
  58. package/scripts/helpers/asset.js +183 -237
  59. package/scripts/helpers/engine.js +190 -190
  60. package/scripts/helpers/list_categories.js +140 -140
  61. package/scripts/helpers/symbols_count_time.js +76 -76
  62. package/scripts/plugin/index.js +6 -6
  63. package/scripts/plugin/lib/injects-point.js +19 -19
  64. package/scripts/plugin/lib/injects.js +89 -88
  65. package/scripts/tags/links.js +86 -86
  66. package/scripts/tags/media.js +19 -19
  67. package/source/assets/algolia_logo.svg +9 -9
  68. package/source/assets/logo.svg +16 -16
  69. package/source/css/_colors.styl +207 -207
  70. package/source/css/_common/components/components.styl +6 -6
  71. package/source/css/_common/components/highlight/highlight.styl +353 -353
  72. package/source/css/_common/components/highlight/operation.styl +21 -21
  73. package/source/css/_common/components/pages/collapse.styl +119 -119
  74. package/source/css/_common/components/pages/home.styl +385 -385
  75. package/source/css/_common/components/pages/pages.styl +56 -56
  76. package/source/css/_common/components/pages/tag-cloud.styl +12 -12
  77. package/source/css/_common/components/post/breadcrumb.styl +39 -39
  78. package/source/css/_common/components/post/copyright.styl +41 -41
  79. package/source/css/_common/components/post/expand.styl +264 -264
  80. package/source/css/_common/components/post/footer.styl +11 -11
  81. package/source/css/_common/components/post/header.styl +79 -79
  82. package/source/css/_common/components/post/nav.styl +63 -63
  83. package/source/css/_common/components/post/post.styl +29 -29
  84. package/source/css/_common/components/post/reward.styl +50 -50
  85. package/source/css/_common/components/post/rtl.styl +12 -12
  86. package/source/css/_common/components/post/tags.styl +39 -39
  87. package/source/css/_common/components/tags/collapse.styl +72 -72
  88. package/source/css/_common/components/tags/container.styl +49 -49
  89. package/source/css/_common/components/tags/label.styl +12 -12
  90. package/source/css/_common/components/tags/links.styl +77 -77
  91. package/source/css/_common/components/tags/list.styl +131 -131
  92. package/source/css/_common/components/tags/note.styl +70 -70
  93. package/source/css/_common/components/tags/player.styl +361 -361
  94. package/source/css/_common/components/tags/quiz.styl +200 -200
  95. package/source/css/_common/components/tags/tabs.styl +83 -83
  96. package/source/css/_common/components/tags/tags.styl +9 -9
  97. package/source/css/_common/components/third-party/loading.styl +222 -222
  98. package/source/css/_common/components/third-party/mermaid/class.styl +90 -90
  99. package/source/css/_common/components/third-party/mermaid/flowchart.styl +72 -72
  100. package/source/css/_common/components/third-party/mermaid/gantt.styl +251 -251
  101. package/source/css/_common/components/third-party/mermaid/git.styl +7 -7
  102. package/source/css/_common/components/third-party/mermaid/mermaid.styl +37 -37
  103. package/source/css/_common/components/third-party/mermaid/pie.styl +9 -9
  104. package/source/css/_common/components/third-party/mermaid/sequence.styl +95 -95
  105. package/source/css/_common/components/third-party/mermaid/state.styl +130 -130
  106. package/source/css/_common/components/third-party/pace.styl +18 -18
  107. package/source/css/_common/components/third-party/search.styl +167 -167
  108. package/source/css/_common/components/third-party/theme.styl +151 -151
  109. package/source/css/_common/components/third-party/third-party.styl +22 -22
  110. package/source/css/_common/components/third-party/valine.styl +548 -548
  111. package/source/css/_common/components/third-party/widgets.styl +57 -57
  112. package/source/css/_common/outline/footer/footer.styl +69 -69
  113. package/source/css/_common/outline/header/brand.styl +77 -77
  114. package/source/css/_common/outline/header/header.styl +20 -20
  115. package/source/css/_common/outline/header/image.styl +79 -79
  116. package/source/css/_common/outline/header/menu.styl +117 -117
  117. package/source/css/_common/outline/header/nav.styl +81 -81
  118. package/source/css/_common/outline/header/right.styl +15 -15
  119. package/source/css/_common/outline/header/tool.styl +207 -207
  120. package/source/css/_common/outline/header/waves.styl +50 -50
  121. package/source/css/_common/outline/mobile.styl +46 -46
  122. package/source/css/_common/outline/outline.styl +78 -78
  123. package/source/css/_common/outline/sidebar/author.styl +59 -59
  124. package/source/css/_common/outline/sidebar/dimmer.styl +23 -23
  125. package/source/css/_common/outline/sidebar/menu.styl +63 -63
  126. package/source/css/_common/outline/sidebar/quick.styl +43 -43
  127. package/source/css/_common/outline/sidebar/related.styl +56 -56
  128. package/source/css/_common/outline/sidebar/sidebar.styl +75 -75
  129. package/source/css/_common/outline/sidebar/social.styl +69 -69
  130. package/source/css/_common/outline/sidebar/state.styl +37 -37
  131. package/source/css/_common/outline/sidebar/tab.styl +71 -71
  132. package/source/css/_common/outline/sidebar/toc.styl +47 -47
  133. package/source/css/_common/scaffolding/animate.styl +318 -318
  134. package/source/css/_common/scaffolding/base.styl +172 -172
  135. package/source/css/_common/scaffolding/buttons.styl +48 -48
  136. package/source/css/_common/scaffolding/divider.styl +36 -36
  137. package/source/css/_common/scaffolding/iconfont.styl +443 -443
  138. package/source/css/_common/scaffolding/normalize.styl +289 -289
  139. package/source/css/_common/scaffolding/pagination.styl +81 -81
  140. package/source/css/_common/scaffolding/ribbon.styl +38 -38
  141. package/source/css/_common/scaffolding/scaffolding.styl +14 -14
  142. package/source/css/_common/scaffolding/scrollbar.styl +37 -37
  143. package/source/css/_common/scaffolding/tables.styl +50 -50
  144. package/source/css/_common/scaffolding/tip.styl +19 -19
  145. package/source/css/_common/scaffolding/toggles.styl +59 -59
  146. package/source/css/_iconfont.styl +451 -451
  147. package/source/css/_mixins.styl +146 -146
  148. package/source/css/_variables.styl +89 -89
  149. package/source/css/app.styl +36 -36
  150. package/source/css/comment.styl +5 -5
  151. package/source/css/mermaid.styl +5 -5
  152. package/source/js/_app/components.js +330 -330
  153. package/source/js/_app/global.js +317 -317
  154. package/source/js/_app/library.js +302 -302
  155. package/source/js/_app/page.js +623 -623
  156. package/source/js/_app/player.js +748 -748
  157. package/source/js/_app/vue.js +43 -43
@@ -1,81 +1,81 @@
1
- $page-number-basic {
2
- display: inline-block;
3
- margin: 0 .5rem;
4
- padding: 0 .75rem;
5
- position: relative;
6
- border-radius: .3125rem;
7
-
8
- +mobile() {
9
- margin: 0 .3125rem;
10
- }
11
- }
12
-
13
- .pagination {
14
- width: 100%;
15
- padding: 1.25rem 3.125rem;
16
- text-align: center;
17
- display: inline-block;
18
- color: var(--grey-5);
19
-
20
- +mobile() {
21
- padding: 1.25rem .625rem;
22
- }
23
-
24
- .inner {
25
- width: auto;
26
- border-radius: .9375rem;
27
- }
28
-
29
- .prev,
30
- .next,
31
- .page-number {
32
- @extend $page-number-basic;
33
-
34
- the-transition();
35
-
36
- &:hover {
37
- @extend $color-btn;
38
- }
39
- }
40
-
41
- .space {
42
- @extend $page-number-basic;
43
- margin: 0;
44
- padding: 0;
45
- }
46
-
47
- .prev {
48
- margin-left: 0;
49
- }
50
-
51
- .next {
52
- margin-right: 0;
53
- }
54
-
55
- .page-number.current {
56
- @extend $color-btn;
57
-
58
- &:hover {
59
- box-shadow: 0 0 .3125rem var(--primary-color);
60
- }
61
- }
62
- }
63
-
64
- /*+mobile() {
65
- .pagination {
66
- border-top: none;
67
- }
68
-
69
- .pagination {
70
- .prev, .next, .page-number {
71
- border-bottom: .0625rem solid var(--grey-3);
72
- border-top: 0;
73
- margin-bottom: .625rem;
74
- padding: 0 .625rem;
75
-
76
- &:hover {
77
- border-bottom-color: var(--color-red);
78
- }
79
- }
80
- }
81
- }*/
1
+ $page-number-basic {
2
+ display: inline-block;
3
+ margin: 0 .5rem;
4
+ padding: 0 .75rem;
5
+ position: relative;
6
+ border-radius: .3125rem;
7
+
8
+ +mobile() {
9
+ margin: 0 .3125rem;
10
+ }
11
+ }
12
+
13
+ .pagination {
14
+ width: 100%;
15
+ padding: 1.25rem 3.125rem;
16
+ text-align: center;
17
+ display: inline-block;
18
+ color: var(--grey-5);
19
+
20
+ +mobile() {
21
+ padding: 1.25rem .625rem;
22
+ }
23
+
24
+ .inner {
25
+ width: auto;
26
+ border-radius: .9375rem;
27
+ }
28
+
29
+ .prev,
30
+ .next,
31
+ .page-number {
32
+ @extend $page-number-basic;
33
+
34
+ the-transition();
35
+
36
+ &:hover {
37
+ @extend $color-btn;
38
+ }
39
+ }
40
+
41
+ .space {
42
+ @extend $page-number-basic;
43
+ margin: 0;
44
+ padding: 0;
45
+ }
46
+
47
+ .prev {
48
+ margin-left: 0;
49
+ }
50
+
51
+ .next {
52
+ margin-right: 0;
53
+ }
54
+
55
+ .page-number.current {
56
+ @extend $color-btn;
57
+
58
+ &:hover {
59
+ box-shadow: 0 0 .3125rem var(--primary-color);
60
+ }
61
+ }
62
+ }
63
+
64
+ /*+mobile() {
65
+ .pagination {
66
+ border-top: none;
67
+ }
68
+
69
+ .pagination {
70
+ .prev, .next, .page-number {
71
+ border-bottom: .0625rem solid var(--grey-3);
72
+ border-top: 0;
73
+ margin-bottom: .625rem;
74
+ padding: 0 .625rem;
75
+
76
+ &:hover {
77
+ border-bottom-color: var(--color-red);
78
+ }
79
+ }
80
+ }
81
+ }*/
@@ -1,38 +1,38 @@
1
- .ribbon {
2
- display: inline-block;
3
- align-self: flex-start;
4
- position: relative;
5
- padding: 0 1rem 0 2rem;
6
- border-radius: 0 .3rem .3rem 0;
7
- background-image: linear-gradient(to right,var(--color-orange) 0,var(--color-pink) 100%);
8
- color: var(--grey-0);
9
-
10
- &::after {
11
- content: "";
12
- position: absolute;
13
- top: 100%;
14
- left: 0;
15
- width: 0;
16
- height: 0;
17
- background-color: transparent;
18
- border-style: solid;
19
- border-width: 0 1rem 1rem 0;
20
- border-color: transparent;
21
- border-right-color: var(--color-orange);
22
- filter: brightness(.9);
23
- }
24
-
25
- a {
26
- display: block;
27
- margin: 0;
28
- text-align: center;
29
- overflow: hidden;
30
- white-space: nowrap;
31
- text-overflow: ellipsis;
32
-
33
- &:hover {
34
- color: currentColor;
35
- @extend .shake;
36
- }
37
- }
38
- }
1
+ .ribbon {
2
+ display: inline-block;
3
+ align-self: flex-start;
4
+ position: relative;
5
+ padding: 0 1rem 0 2rem;
6
+ border-radius: 0 .3rem .3rem 0;
7
+ background-image: linear-gradient(to right,var(--color-orange) 0,var(--color-pink) 100%);
8
+ color: var(--grey-0);
9
+
10
+ &::after {
11
+ content: "";
12
+ position: absolute;
13
+ top: 100%;
14
+ left: 0;
15
+ width: 0;
16
+ height: 0;
17
+ background-color: transparent;
18
+ border-style: solid;
19
+ border-width: 0 1rem 1rem 0;
20
+ border-color: transparent;
21
+ border-right-color: var(--color-orange);
22
+ filter: brightness(.9);
23
+ }
24
+
25
+ a {
26
+ display: block;
27
+ margin: 0;
28
+ text-align: center;
29
+ overflow: hidden;
30
+ white-space: nowrap;
31
+ text-overflow: ellipsis;
32
+
33
+ &:hover {
34
+ color: currentColor;
35
+ @extend .shake;
36
+ }
37
+ }
38
+ }
@@ -1,14 +1,14 @@
1
- //
2
- // Scaffolding
3
- // ==================================================
4
- @import 'normalize';
5
- @import 'scrollbar';
6
- @import 'animate';
7
- @import 'base';
8
- @import 'tables';
9
- @import 'buttons';
10
- @import 'toggles';
11
- @import 'pagination';
12
- @import 'tip';
13
- @import 'ribbon';
14
- @import 'divider';
1
+ //
2
+ // Scaffolding
3
+ // ==================================================
4
+ @import 'normalize';
5
+ @import 'scrollbar';
6
+ @import 'animate';
7
+ @import 'base';
8
+ @import 'tables';
9
+ @import 'buttons';
10
+ @import 'toggles';
11
+ @import 'pagination';
12
+ @import 'tip';
13
+ @import 'ribbon';
14
+ @import 'divider';
@@ -1,37 +1,37 @@
1
- ::-webkit-scrollbar {
2
- width: .3125rem;
3
- height: .3125rem;
4
- background: transparent;
5
- }
6
-
7
- ::-webkit-scrollbar-track {
8
- border-radius: .3125rem;
9
- background: transparent;
10
- }
11
-
12
- ::-webkit-scrollbar-track-piece {
13
- background: transparent;
14
- }
15
-
16
- ::-webkit-scrollbar-button {
17
- background: transparent;
18
- height: 0;
19
- }
20
-
21
- ::-webkit-scrollbar-thumb {
22
- border-radius: 1.25rem;
23
- background-clip: padding-box;
24
- background-color: var(--grey-3);
25
- background-image: linear-gradient(45deg,var(--grey-1-a5) 25%,transparent 0,transparent 50%,var(--grey-1-a5) 0,var(--grey-1-a5) 75%,transparent 0,transparent);
26
- }
27
-
28
- $big-scrollbar {
29
- &::-webkit-scrollbar {
30
- width: .5rem;
31
- height: .5rem;
32
- }
33
-
34
- &::-webkit-scrollbar-thumb {
35
- background-color: var(--color-pink-light);
36
- }
37
- }
1
+ ::-webkit-scrollbar {
2
+ width: .3125rem;
3
+ height: .3125rem;
4
+ background: transparent;
5
+ }
6
+
7
+ ::-webkit-scrollbar-track {
8
+ border-radius: .3125rem;
9
+ background: transparent;
10
+ }
11
+
12
+ ::-webkit-scrollbar-track-piece {
13
+ background: transparent;
14
+ }
15
+
16
+ ::-webkit-scrollbar-button {
17
+ background: transparent;
18
+ height: 0;
19
+ }
20
+
21
+ ::-webkit-scrollbar-thumb {
22
+ border-radius: 1.25rem;
23
+ background-clip: padding-box;
24
+ background-color: var(--grey-3);
25
+ background-image: linear-gradient(45deg,var(--grey-1-a5) 25%,transparent 0,transparent 50%,var(--grey-1-a5) 0,var(--grey-1-a5) 75%,transparent 0,transparent);
26
+ }
27
+
28
+ $big-scrollbar {
29
+ &::-webkit-scrollbar {
30
+ width: .5rem;
31
+ height: .5rem;
32
+ }
33
+
34
+ &::-webkit-scrollbar-thumb {
35
+ background-color: var(--color-pink-light);
36
+ }
37
+ }
@@ -1,50 +1,50 @@
1
- .table-container {
2
- overflow: auto;
3
-
4
- table {
5
- border-collapse: collapse;
6
- border-spacing: 0;
7
- font-size: $font-size-small;
8
- margin: 0 0 1.25rem 0;
9
- width: 100%;
10
- overflow: auto;
11
-
12
- tbody tr {
13
- &:nth-of-type(even) {
14
- background: var(--grey-0);
15
- }
16
-
17
- &:hover {
18
- background: var(--grey-2);
19
- }
20
- }
21
-
22
- caption, th, td {
23
- font-weight: normal;
24
- padding: .5rem;
25
- text-align: left;
26
- vertical-align: middle;
27
- }
28
-
29
- th, td {
30
- border: .0625rem solid var(--grey-3);
31
- border-bottom: .1875rem solid var(--grey-3);
32
- }
33
-
34
- th {
35
- font-weight: 700;
36
- padding-bottom: .625rem;
37
- text-align: center;
38
- }
39
-
40
- td {
41
- border-bottom-width: .0625rem;
42
-
43
- p:last-child, pre:last-child, .highlight:last-child {
44
- margin: 0;
45
- }
46
-
47
- }
48
- }
49
-
50
- }
1
+ .table-container {
2
+ overflow: auto;
3
+
4
+ table {
5
+ border-collapse: collapse;
6
+ border-spacing: 0;
7
+ font-size: $font-size-small;
8
+ margin: 0 0 1.25rem 0;
9
+ width: 100%;
10
+ overflow: auto;
11
+
12
+ tbody tr {
13
+ &:nth-of-type(even) {
14
+ background: var(--grey-0);
15
+ }
16
+
17
+ &:hover {
18
+ background: var(--grey-2);
19
+ }
20
+ }
21
+
22
+ caption, th, td {
23
+ font-weight: normal;
24
+ padding: .5rem;
25
+ text-align: left;
26
+ vertical-align: middle;
27
+ }
28
+
29
+ th, td {
30
+ border: .0625rem solid var(--grey-3);
31
+ border-bottom: .1875rem solid var(--grey-3);
32
+ }
33
+
34
+ th {
35
+ font-weight: 700;
36
+ padding-bottom: .625rem;
37
+ text-align: center;
38
+ }
39
+
40
+ td {
41
+ border-bottom-width: .0625rem;
42
+
43
+ p:last-child, pre:last-child, .highlight:last-child {
44
+ margin: 0;
45
+ }
46
+
47
+ }
48
+ }
49
+
50
+ }
@@ -1,19 +1,19 @@
1
- .tip {
2
- position: fixed;
3
- background: var(--grey-9-a5);
4
- color: #fff;
5
- top: 50%;
6
- left: 50%;
7
- z-index: $zindex-5;
8
- padding: .625rem 1rem;
9
- border-radius: .625rem;
10
- transform: translate(-50%,-50%);
11
- text-align: center;
12
- font-size: $font-size-small;
13
- backdrop-filter: blur(.625rem);
14
- @extend .fade-in;
15
-
16
- &.hide {
17
- @extend .fade-out;
18
- }
19
- }
1
+ .tip {
2
+ position: fixed;
3
+ background: var(--grey-9-a5);
4
+ color: #fff;
5
+ top: 50%;
6
+ left: 50%;
7
+ z-index: $zindex-5;
8
+ padding: .625rem 1rem;
9
+ border-radius: .625rem;
10
+ transform: translate(-50%,-50%);
11
+ text-align: center;
12
+ font-size: $font-size-small;
13
+ backdrop-filter: blur(.625rem);
14
+ @extend .fade-in;
15
+
16
+ &.hide {
17
+ @extend .fade-out;
18
+ }
19
+ }
@@ -1,59 +1,59 @@
1
- .toggle {
2
- line-height: 0;
3
- cursor: pointer;
4
-
5
- .line {
6
- background: var(--header-text-color);
7
- display: inline-block;
8
- height: .125rem;
9
- left: 0;
10
- position: relative;
11
- border-radius: .0625rem;
12
- top: 0;
13
- transition: all .4s;
14
- vertical-align: top;
15
- width: 100%;
16
- box-shadow: 0 0 .5rem alpha(#000, .5);
17
-
18
- &:not(:first-child) {
19
- margin-top: .1875rem;
20
- }
21
- }
22
-
23
- &.toggle-arrow {
24
- .toggle-line-first {
25
- left: 50%;
26
- top: .125rem;
27
- transform: rotate(45deg);
28
- width: 50%;
29
- }
30
-
31
- .toggle-line-middle {
32
- left: .125rem;
33
- width: 90%;
34
- }
35
-
36
- .toggle-line-last {
37
- left: 50%;
38
- top: -.125rem;
39
- transform: rotate(-45deg);
40
- width: 50%;
41
- }
42
- }
43
-
44
- &.close {
45
- .line:nth-child(1) {
46
- transform: rotate(-45deg);
47
- top: .3125rem;
48
- }
49
-
50
- .line:nth-child(2) {
51
- opacity: 0;
52
- }
53
-
54
- .line:nth-child(3) {
55
- transform: rotate(45deg);
56
- top: -.3125rem;
57
- }
58
- }
59
- }
1
+ .toggle {
2
+ line-height: 0;
3
+ cursor: pointer;
4
+
5
+ .line {
6
+ background: var(--header-text-color);
7
+ display: inline-block;
8
+ height: .125rem;
9
+ left: 0;
10
+ position: relative;
11
+ border-radius: .0625rem;
12
+ top: 0;
13
+ transition: all .4s;
14
+ vertical-align: top;
15
+ width: 100%;
16
+ box-shadow: 0 0 .5rem alpha(#000, .5);
17
+
18
+ &:not(:first-child) {
19
+ margin-top: .1875rem;
20
+ }
21
+ }
22
+
23
+ &.toggle-arrow {
24
+ .toggle-line-first {
25
+ left: 50%;
26
+ top: .125rem;
27
+ transform: rotate(45deg);
28
+ width: 50%;
29
+ }
30
+
31
+ .toggle-line-middle {
32
+ left: .125rem;
33
+ width: 90%;
34
+ }
35
+
36
+ .toggle-line-last {
37
+ left: 50%;
38
+ top: -.125rem;
39
+ transform: rotate(-45deg);
40
+ width: 50%;
41
+ }
42
+ }
43
+
44
+ &.close {
45
+ .line:nth-child(1) {
46
+ transform: rotate(-45deg);
47
+ top: .3125rem;
48
+ }
49
+
50
+ .line:nth-child(2) {
51
+ opacity: 0;
52
+ }
53
+
54
+ .line:nth-child(3) {
55
+ transform: rotate(45deg);
56
+ top: -.3125rem;
57
+ }
58
+ }
59
+ }