UNPKG

@alifd/next/es/nav/main.scss

Version:

1@import "../core/index-noreset.scss";
2@import "scss/mixin";
3@import "scss/variable";
4
5$nav-icononly-width: 58px;
6
7#{$nav-prefix} {
  @include box-sizing;
  min-width: auto;
  border-radius: 0;
11
  &-icon.#{$css-prefix}icon {
      @include icon-size(
          $size: $nav-icon-self-size,
          $marginRight: $nav-icon-self-margin
      );
      font-weight: inherit;
  }
19
  &-group-label {
      height: $nav-group-height;
      line-height: $nav-group-height;
      font-size: $nav-group-font-size;
  }
25
  &-item {
      #{$menu-prefix}-item-text > span,
      #{$nav-prefix}-group-label > span {
          opacity: 1;
          transition: opacity $motion-duration-immediately $motion-linear;
      }
32
      & .#{$css-prefix}menu-item-text > a {
          text-decoration: none;
          color: inherit;
      }
37
      &,
      &:hover,
      &.#{$css-prefix}focused,
      &.#{$css-prefix}selected,
      &.#{$css-prefix}opened {
          #{$menu-prefix}-hoz-icon-arrow.#{$css-prefix}icon,
          #{$menu-prefix}-icon-arrow.#{$css-prefix}icon {
              color: inherit;
              top: 0;
              transform-origin: center 50%;
          }
      }
  }
51
  &.#{$css-prefix}active &-item:before {
      position: absolute;
      transition: all $motion-duration-standard $motion-ease;
      content: '';
  }
57
  &.#{$css-prefix}hoz {
      padding: 0;
      height: calc(#{$nav-hoz-height} + 2 * #{$nav-hoz-item-margin-tb});
61
      @include nav-size(
          'hoz',
          calc(#{$nav-hoz-height} - #{$popup-local-border-width} * 2),
          $nav-hoz-font-size,
          $nav-hoz-item-padding-lr,
          $nav-hoz-item-margin-tb,
          $nav-hoz-item-margin-lr,
          $nav-hoz-item-corner
      );
71
      #{$nav-prefix}-group-label #{$menu-prefix}-item-inner {
          height: $nav-group-height;
          line-height: $nav-group-height;
          font-size: $nav-group-font-size;
      }
77
      #{$menu-prefix}-header {
          float: left;
          height: calc(#{$nav-hoz-height} - #{$popup-local-border-width} * 2);
      }
82
      #{$menu-prefix}-footer {
          float: right;
          height: calc(#{$nav-hoz-height} - #{$popup-local-border-width} * 2);
      }
87
      #{$nav-prefix}-item {
          &:before {
              width: 0;
              left: 50%;
              height: $nav-hoz-item-selected-active-line;
          }
94
          &:hover:before {
              height: $nav-hoz-item-hover-active-line;
          }
98
          @if (get-compiling-value($nav-hoz-item-hover-active-line) != 0 and
          get-compiling-value($nav-hoz-item-hover-active-line) != 0px) {
              &:hover:before {
                  width: 100%;
                  left: 0;
              }
          }
      }
107
      &.#{$css-prefix}top #{$nav-prefix}-item:before {
          top: calc(0px - #{$popup-local-border-width});
      }
111
      &.#{$css-prefix}bottom #{$nav-prefix}-item:before {
          bottom: calc(0px - #{$popup-local-border-width});
      }
115
      .#{$css-prefix}selected#{$nav-prefix}-item:before {
          width: 100%;
          left: 0;
          height: $nav-hoz-item-selected-active-line;
      }
  }
122
  &.#{$css-prefix}ver {
      padding: 0;
      transition: width $motion-duration-standard $motion-ease;
126
      @include nav-size(
          'ver',
          $nav-ver-height,
          $nav-ver-font-size,
          $nav-ver-item-padding-lr,
          $nav-ver-item-margin-tb,
          $nav-ver-item-margin-lr,
          $nav-ver-item-corner
      );
136
      #{$nav-prefix}-group-label #{$menu-prefix}-item-inner {
          height: $nav-group-height;
          line-height: $nav-group-height;
          font-size: $nav-group-font-size;
      }
142
      > #{$menu-prefix}-item:first-child,
      > #{$menu-prefix}-sub-menu-wrapper:first-child > #{$menu-prefix}-item {
          margin-top: $nav-ver-item-margin-tb;
      }
147
      > #{$menu-prefix}-item:last-child,
      > #{$menu-prefix}-sub-menu-wrapper:last-child > #{$menu-prefix}-item {
          margin-bottom: $nav-ver-item-margin-tb;
      }
152
      #{$menu-prefix}-sub-menu {
          line-height: $nav-ver-sub-nav-height;
      }
156
      #{$menu-prefix}-sub-menu #{$menu-prefix}-item-inner {
          height: $nav-ver-sub-nav-height;
          font-size: $nav-ver-sub-nav-font-size;
      }
161
      #{$nav-prefix}-item {
          &:before {
              height: 0;
              top: 50%;
              width: $nav-ver-item-selected-active-line;
          }
168
          &:hover:before {
              width: $nav-ver-item-hover-active-line;
          }
172
          @if (get-compiling-value($nav-ver-item-hover-active-line) != 0 and
          get-compiling-value($nav-ver-item-hover-active-line) != 0px) {
              &:hover:before {
                  height: 100%;
                  top: 0;
              }
          }
      }
181
      &.#{$css-prefix}left #{$nav-prefix}-item:before,
      &.#{$css-prefix}top #{$nav-prefix}-item:before {
          left: calc(0px - #{$popup-local-border-width});
      }
186
      &.#{$css-prefix}right #{$nav-prefix}-item:before,
      &.#{$css-prefix}bottom #{$nav-prefix}-item:before {
          right: calc(0px - #{$popup-local-border-width});
      }
191
      .#{$css-prefix}selected#{$nav-prefix}-item:before {
          height: 100%;
          top: 0;
          width: $nav-ver-item-selected-active-line;
      }
  }
198
  &.#{$css-prefix}primary {
      @include nav-border-fix(
          $nav-hoz-height,
          $nav-primary-border-width
      );
      @include nav-statement(
          $nav-primary-bg-color,
          $nav-primary-border-color,
          $nav-primary-text-color,
          $nav-primary-text-style,
          $nav-primary-shadow,
          $nav-primary-item-hover-bg-color,
          $nav-primary-item-hover-text-color,
          $nav-primary-item-hover-text-style,
          $nav-primary-item-selected-bg-color,
          $nav-primary-item-selected-text-color,
          $nav-primary-item-selected-text-style,
          $nav-primary-item-selected-active-color,
          $nav-primary-item-hover-active-color,
          $nav-primary-item-opened-bg-color,
          $nav-primary-item-opened-text-color,
          $nav-primary-group-text-color,
          $nav-primary-group-text-style,
          $nav-primary-item-childselected-bg-color,
          $nav-primary-item-childselected-text-color,
          $nav-primary-item-childselected-text-style,
      );
      @include sub-nav-statement(
          $nav-primary-sub-nav-text-color,
          $nav-primary-sub-nav-text-style,
          $nav-primary-sub-nav-bg-color,
          $nav-primary-sub-nav-hover-bg-color,
          $nav-primary-sub-nav-hover-text-color,
          $nav-primary-sub-nav-selected-bg-color,
          $nav-primary-sub-nav-selected-text-color,
          $nav-primary-sub-nav-active-color
      );
      @include nav-disabled-statement(
          $nav-primary-item-disabled-text-color
      );
  }
240
  &.#{$css-prefix}secondary {
      @include nav-border-fix(
          $nav-hoz-height,
          $nav-secondary-border-width
      );
      @include nav-statement(
          $nav-secondary-bg-color,
          $nav-secondary-border-color,
          $nav-secondary-text-color,
          $nav-secondary-text-style,
          $nav-secondary-shadow,
          $nav-secondary-item-hover-bg-color,
          $nav-secondary-item-hover-text-color,
          $nav-secondary-item-hover-text-style,
          $nav-secondary-item-selected-bg-color,
          $nav-secondary-item-selected-text-color,
          $nav-secondary-item-selected-text-style,
          $nav-secondary-item-selected-active-color,
          $nav-secondary-item-hover-active-color,
          $nav-secondary-item-opened-bg-color,
          $nav-secondary-item-opened-text-color,
          $nav-secondary-group-text-color,
          $nav-secondary-group-text-style,
          $nav-secondary-item-childselected-bg-color,
          $nav-secondary-item-childselected-text-color,
          $nav-secondary-item-childselected-text-style,
      );
      @include sub-nav-statement(
          $nav-secondary-sub-nav-text-color,
          $nav-secondary-sub-nav-text-style,
          $nav-secondary-sub-nav-bg-color,
          $nav-secondary-sub-nav-hover-bg-color,
          $nav-secondary-sub-nav-hover-text-color,
          $nav-secondary-sub-nav-selected-bg-color,
          $nav-secondary-sub-nav-selected-text-color,
          $nav-secondary-sub-nav-active-color
      );
      @include nav-disabled-statement(
          $nav-secondary-item-disabled-text-color
      );
  }
282
  &.#{$css-prefix}normal {
      @include nav-statement(
          $nav-normal-bg-color,
          $nav-normal-border-color,
          $nav-normal-text-color,
          $nav-normal-text-style,
          $nav-normal-shadow,
          $nav-normal-item-hover-bg-color,
          $nav-normal-item-hover-text-color,
          $nav-normal-item-hover-text-style,
          $nav-normal-item-selected-bg-color,
          $nav-normal-item-selected-text-color,
          $nav-normal-item-selected-text-style,
          $nav-normal-item-selected-active-color,
          $nav-normal-item-hover-active-color,
          $nav-normal-item-opened-bg-color,
          $nav-normal-item-opened-text-color,
          $nav-normal-group-text-color,
          $nav-normal-group-text-style,
          $nav-normal-item-childselected-bg-color,
          $nav-normal-item-childselected-text-color,
          $nav-normal-item-childselected-text-style,
      );
      @include sub-nav-statement(
          $nav-normal-sub-nav-text-color,
          $nav-normal-sub-nav-text-style,
          $nav-normal-sub-nav-bg-color,
          $nav-normal-sub-nav-hover-bg-color,
          $nav-normal-sub-nav-hover-text-color,
          $nav-normal-sub-nav-selected-bg-color,
          $nav-normal-sub-nav-selected-text-color,
          $nav-normal-sub-nav-active-color
      );
      @include nav-disabled-statement(
          $nav-normal-item-disabled-text-color
      );
  }
320
  &.#{$css-prefix}line {
      &.#{$css-prefix}hoz {
          border-top-color: $nav-line-bg-color;
          border-left-color: $nav-line-bg-color;
          border-right-color: $nav-line-bg-color;
      }
327
      &.#{$css-prefix}ver {
          border-top-color: $nav-line-bg-color;
          border-left-color: $nav-line-bg-color;
          border-bottom-color: $nav-line-bg-color;
      }
333
      @include nav-statement(
          $nav-line-bg-color,
          $nav-line-border-color,
          $nav-line-text-color,
          $nav-line-text-style,
          $shadow-zero,
          $nav-line-item-hover-bg-color,
          $nav-line-item-hover-text-color,
          $nav-line-item-hover-text-style,
          $nav-line-item-selected-bg-color,
          $nav-line-item-selected-text-color,
          $nav-line-item-selected-text-style,
          $nav-line-item-selected-active-color,
          $nav-line-item-hover-active-color,
          $nav-line-item-opened-bg-color,
          $nav-line-item-opened-text-color,
          $nav-line-group-text-color,
          $nav-line-group-text-style,
          $nav-line-item-childselected-bg-color,
          $nav-line-item-childselected-text-color,
          $nav-line-item-childselected-text-style,
      );
      @include sub-nav-statement(
          $nav-line-sub-nav-text-color,
          $nav-line-sub-nav-text-style,
          $nav-line-sub-nav-bg-color,
          $nav-line-sub-nav-hover-bg-color,
          $nav-line-sub-nav-hover-text-color,
          $nav-line-sub-nav-selected-bg-color,
          $nav-line-sub-nav-selected-text-color,
          $nav-line-sub-nav-active-color
      );
      @include nav-disabled-statement(
          $nav-line-item-disabled-text-color
      );
  }
370
  &.#{$css-prefix}icon-only {
      &.#{$css-prefix}icon-only-text {
          padding-top: $s-1;
          padding-bottom: $s-1;
      }
      &.#{$css-prefix}custom-icon-only-width {
          text-align: center;
      }
379
      #{$menu-prefix}-item-inner {
          text-overflow: clip;
      }
383
      // #{$menu-prefix}-item-text > span,
      // #{$nav-prefix}-group-label > #{$menu-prefix}-item-inner > span {
      //     opacity: 0;
      // }
388
      &.#{$css-prefix}normal {
          @include icon-only-size($popup-local-border-width);
      }
392
      &.#{$css-prefix}primary {
          @include icon-only-size($nav-primary-border-width);
      }
      &.#{$css-prefix}secondary {
          @include icon-only-size($nav-secondary-border-width);
      }
399
      #{$nav-prefix}-icon-only-arrow.#{$css-prefix}icon {
          @include icon-size(
              $size: $nav-icon-only-font-size,
              $marginLeft: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr}),
              $marginRight: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr})
          );
          transition: all $motion-duration-immediately $motion-linear;
          transform-origin: center 50%;
      }
409
      #{$nav-prefix}-item.#{$css-prefix}opened #{$nav-prefix}-icon-only-arrow.#{$css-prefix}icon-arrow-down {
          @include icon-size(
              $size: $nav-icon-only-font-size,
              $marginLeft: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr}),
              $marginRight: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr}),
              $transform: rotate(180deg)
          );
      }
418
      // #{$nav-prefix}-item.#{$css-prefix}selected #{$nav-prefix}-icon.#{$css-prefix}icon {
      //     animation: pulse .3s cubic-bezier(.23, 1, .32, 1);
      // }
422
      #{$menu-prefix}-hoz-icon-arrow,
      #{$menu-prefix}-icon-arrow {
          display: none;
      }
  }
428
  &-embeddable {
      &.#{$css-prefix}primary,
      &.#{$css-prefix}secondary,
      &.#{$css-prefix}normal {
          height: 100%;
          background: transparent;
          box-shadow: none;
          border: none;
437
          #{$menu-prefix}-sub-menu #{$menu-prefix}-item,
          #{$nav-prefix}-item#{$menu-prefix}-item {
              background: transparent;
          }
442
          &.#{$css-prefix}icon-only {
              @include icon-only-size(0px);
          }
      }
447
      &#{$nav-prefix}.#{$css-prefix}hoz {
          #{$menu-prefix}-item-inner {
              height: 100%;
          }
452
          #{$menu-prefix}-sub-menu #{$menu-prefix}-item,
          #{$nav-prefix}-item#{$menu-prefix}-item {
              height: 100%;
          }
      }
  }
459
  &-embeddable,
  &-embeddable &-item.#{$css-prefix}disabled,
  &-embeddable &-item.#{$css-prefix}disabled #{$menu-prefix}-item-text > a {
      background: transparent;
      border: none;
  }
466}
467
468@import "./rtl.scss";

1	`@import "../core/index-noreset.scss";`
2	`@import "scss/mixin";`
3	`@import "scss/variable";`
4
5	`$nav-icononly-width: 58px;`
6
7	`#{$nav-prefix} {`
8	`@include box-sizing;`
9	`min-width: auto;`
10	`border-radius: 0;`
11
12	`&-icon.#{$css-prefix}icon {`
13	`@include icon-size(`
14	`$size: $nav-icon-self-size,`
15	`$marginRight: $nav-icon-self-margin`
16	`);`
17	`font-weight: inherit;`
18	`}`
19
20	`&-group-label {`
21	`height: $nav-group-height;`
22	`line-height: $nav-group-height;`
23	`font-size: $nav-group-font-size;`
24	`}`
25
26	`&-item {`
27	`#{$menu-prefix}-item-text > span,`
28	`#{$nav-prefix}-group-label > span {`
29	`opacity: 1;`
30	`transition: opacity $motion-duration-immediately $motion-linear;`
31	`}`
32
33	`& .#{$css-prefix}menu-item-text > a {`
34	`text-decoration: none;`
35	`color: inherit;`
36	`}`
37
38	`&,`
39	`&:hover,`
40	`&.#{$css-prefix}focused,`
41	`&.#{$css-prefix}selected,`
42	`&.#{$css-prefix}opened {`
43	`#{$menu-prefix}-hoz-icon-arrow.#{$css-prefix}icon,`
44	`#{$menu-prefix}-icon-arrow.#{$css-prefix}icon {`
45	`color: inherit;`
46	`top: 0;`
47	`transform-origin: center 50%;`
48	`}`
49	`}`
50	`}`
51
52	`&.#{$css-prefix}active &-item:before {`
53	`position: absolute;`
54	`transition: all $motion-duration-standard $motion-ease;`
55	`content: '';`
56	`}`
57
58	`&.#{$css-prefix}hoz {`
59	`padding: 0;`
60	`height: calc(#{$nav-hoz-height} + 2 * #{$nav-hoz-item-margin-tb});`
61
62	`@include nav-size(`
63	`'hoz',`
64	`calc(#{$nav-hoz-height} - #{$popup-local-border-width} * 2),`
65	`$nav-hoz-font-size,`
66	`$nav-hoz-item-padding-lr,`
67	`$nav-hoz-item-margin-tb,`
68	`$nav-hoz-item-margin-lr,`
69	`$nav-hoz-item-corner`
70	`);`
71
72	`#{$nav-prefix}-group-label #{$menu-prefix}-item-inner {`
73	`height: $nav-group-height;`
74	`line-height: $nav-group-height;`
75	`font-size: $nav-group-font-size;`
76	`}`
77
78	`#{$menu-prefix}-header {`
79	`float: left;`
80	`height: calc(#{$nav-hoz-height} - #{$popup-local-border-width} * 2);`
81	`}`
82
83	`#{$menu-prefix}-footer {`
84	`float: right;`
85	`height: calc(#{$nav-hoz-height} - #{$popup-local-border-width} * 2);`
86	`}`
87
88	`#{$nav-prefix}-item {`
89	`&:before {`
90	`width: 0;`
91	`left: 50%;`
92	`height: $nav-hoz-item-selected-active-line;`
93	`}`
94
95	`&:hover:before {`
96	`height: $nav-hoz-item-hover-active-line;`
97	`}`
98
99	`@if (get-compiling-value($nav-hoz-item-hover-active-line) != 0 and`
100	`get-compiling-value($nav-hoz-item-hover-active-line) != 0px) {`
101	`&:hover:before {`
102	`width: 100%;`
103	`left: 0;`
104	`}`
105	`}`
106	`}`
107
108	`&.#{$css-prefix}top #{$nav-prefix}-item:before {`
109	`top: calc(0px - #{$popup-local-border-width});`
110	`}`
111
112	`&.#{$css-prefix}bottom #{$nav-prefix}-item:before {`
113	`bottom: calc(0px - #{$popup-local-border-width});`
114	`}`
115
116	`.#{$css-prefix}selected#{$nav-prefix}-item:before {`
117	`width: 100%;`
118	`left: 0;`
119	`height: $nav-hoz-item-selected-active-line;`
120	`}`
121	`}`
122
123	`&.#{$css-prefix}ver {`
124	`padding: 0;`
125	`transition: width $motion-duration-standard $motion-ease;`
126
127	`@include nav-size(`
128	`'ver',`
129	`$nav-ver-height,`
130	`$nav-ver-font-size,`
131	`$nav-ver-item-padding-lr,`
132	`$nav-ver-item-margin-tb,`
133	`$nav-ver-item-margin-lr,`
134	`$nav-ver-item-corner`
135	`);`
136
137	`#{$nav-prefix}-group-label #{$menu-prefix}-item-inner {`
138	`height: $nav-group-height;`
139	`line-height: $nav-group-height;`
140	`font-size: $nav-group-font-size;`
141	`}`
142
143	`> #{$menu-prefix}-item:first-child,`
144	`> #{$menu-prefix}-sub-menu-wrapper:first-child > #{$menu-prefix}-item {`
145	`margin-top: $nav-ver-item-margin-tb;`
146	`}`
147
148	`> #{$menu-prefix}-item:last-child,`
149	`> #{$menu-prefix}-sub-menu-wrapper:last-child > #{$menu-prefix}-item {`
150	`margin-bottom: $nav-ver-item-margin-tb;`
151	`}`
152
153	`#{$menu-prefix}-sub-menu {`
154	`line-height: $nav-ver-sub-nav-height;`
155	`}`
156
157	`#{$menu-prefix}-sub-menu #{$menu-prefix}-item-inner {`
158	`height: $nav-ver-sub-nav-height;`
159	`font-size: $nav-ver-sub-nav-font-size;`
160	`}`
161
162	`#{$nav-prefix}-item {`
163	`&:before {`
164	`height: 0;`
165	`top: 50%;`
166	`width: $nav-ver-item-selected-active-line;`
167	`}`
168
169	`&:hover:before {`
170	`width: $nav-ver-item-hover-active-line;`
171	`}`
172
173	`@if (get-compiling-value($nav-ver-item-hover-active-line) != 0 and`
174	`get-compiling-value($nav-ver-item-hover-active-line) != 0px) {`
175	`&:hover:before {`
176	`height: 100%;`
177	`top: 0;`
178	`}`
179	`}`
180	`}`
181
182	`&.#{$css-prefix}left #{$nav-prefix}-item:before,`
183	`&.#{$css-prefix}top #{$nav-prefix}-item:before {`
184	`left: calc(0px - #{$popup-local-border-width});`
185	`}`
186
187	`&.#{$css-prefix}right #{$nav-prefix}-item:before,`
188	`&.#{$css-prefix}bottom #{$nav-prefix}-item:before {`
189	`right: calc(0px - #{$popup-local-border-width});`
190	`}`
191
192	`.#{$css-prefix}selected#{$nav-prefix}-item:before {`
193	`height: 100%;`
194	`top: 0;`
195	`width: $nav-ver-item-selected-active-line;`
196	`}`
197	`}`
198
199	`&.#{$css-prefix}primary {`
200	`@include nav-border-fix(`
201	`$nav-hoz-height,`
202	`$nav-primary-border-width`
203	`);`
204	`@include nav-statement(`
205	`$nav-primary-bg-color,`
206	`$nav-primary-border-color,`
207	`$nav-primary-text-color,`
208	`$nav-primary-text-style,`
209	`$nav-primary-shadow,`
210	`$nav-primary-item-hover-bg-color,`
211	`$nav-primary-item-hover-text-color,`
212	`$nav-primary-item-hover-text-style,`
213	`$nav-primary-item-selected-bg-color,`
214	`$nav-primary-item-selected-text-color,`
215	`$nav-primary-item-selected-text-style,`
216	`$nav-primary-item-selected-active-color,`
217	`$nav-primary-item-hover-active-color,`
218	`$nav-primary-item-opened-bg-color,`
219	`$nav-primary-item-opened-text-color,`
220	`$nav-primary-group-text-color,`
221	`$nav-primary-group-text-style,`
222	`$nav-primary-item-childselected-bg-color,`
223	`$nav-primary-item-childselected-text-color,`
224	`$nav-primary-item-childselected-text-style,`
225	`);`
226	`@include sub-nav-statement(`
227	`$nav-primary-sub-nav-text-color,`
228	`$nav-primary-sub-nav-text-style,`
229	`$nav-primary-sub-nav-bg-color,`
230	`$nav-primary-sub-nav-hover-bg-color,`
231	`$nav-primary-sub-nav-hover-text-color,`
232	`$nav-primary-sub-nav-selected-bg-color,`
233	`$nav-primary-sub-nav-selected-text-color,`
234	`$nav-primary-sub-nav-active-color`
235	`);`
236	`@include nav-disabled-statement(`
237	`$nav-primary-item-disabled-text-color`
238	`);`
239	`}`
240
241	`&.#{$css-prefix}secondary {`
242	`@include nav-border-fix(`
243	`$nav-hoz-height,`
244	`$nav-secondary-border-width`
245	`);`
246	`@include nav-statement(`
247	`$nav-secondary-bg-color,`
248	`$nav-secondary-border-color,`
249	`$nav-secondary-text-color,`
250	`$nav-secondary-text-style,`
251	`$nav-secondary-shadow,`
252	`$nav-secondary-item-hover-bg-color,`
253	`$nav-secondary-item-hover-text-color,`
254	`$nav-secondary-item-hover-text-style,`
255	`$nav-secondary-item-selected-bg-color,`
256	`$nav-secondary-item-selected-text-color,`
257	`$nav-secondary-item-selected-text-style,`
258	`$nav-secondary-item-selected-active-color,`
259	`$nav-secondary-item-hover-active-color,`
260	`$nav-secondary-item-opened-bg-color,`
261	`$nav-secondary-item-opened-text-color,`
262	`$nav-secondary-group-text-color,`
263	`$nav-secondary-group-text-style,`
264	`$nav-secondary-item-childselected-bg-color,`
265	`$nav-secondary-item-childselected-text-color,`
266	`$nav-secondary-item-childselected-text-style,`
267	`);`
268	`@include sub-nav-statement(`
269	`$nav-secondary-sub-nav-text-color,`
270	`$nav-secondary-sub-nav-text-style,`
271	`$nav-secondary-sub-nav-bg-color,`
272	`$nav-secondary-sub-nav-hover-bg-color,`
273	`$nav-secondary-sub-nav-hover-text-color,`
274	`$nav-secondary-sub-nav-selected-bg-color,`
275	`$nav-secondary-sub-nav-selected-text-color,`
276	`$nav-secondary-sub-nav-active-color`
277	`);`
278	`@include nav-disabled-statement(`
279	`$nav-secondary-item-disabled-text-color`
280	`);`
281	`}`
282
283	`&.#{$css-prefix}normal {`
284	`@include nav-statement(`
285	`$nav-normal-bg-color,`
286	`$nav-normal-border-color,`
287	`$nav-normal-text-color,`
288	`$nav-normal-text-style,`
289	`$nav-normal-shadow,`
290	`$nav-normal-item-hover-bg-color,`
291	`$nav-normal-item-hover-text-color,`
292	`$nav-normal-item-hover-text-style,`
293	`$nav-normal-item-selected-bg-color,`
294	`$nav-normal-item-selected-text-color,`
295	`$nav-normal-item-selected-text-style,`
296	`$nav-normal-item-selected-active-color,`
297	`$nav-normal-item-hover-active-color,`
298	`$nav-normal-item-opened-bg-color,`
299	`$nav-normal-item-opened-text-color,`
300	`$nav-normal-group-text-color,`
301	`$nav-normal-group-text-style,`
302	`$nav-normal-item-childselected-bg-color,`
303	`$nav-normal-item-childselected-text-color,`
304	`$nav-normal-item-childselected-text-style,`
305	`);`
306	`@include sub-nav-statement(`
307	`$nav-normal-sub-nav-text-color,`
308	`$nav-normal-sub-nav-text-style,`
309	`$nav-normal-sub-nav-bg-color,`
310	`$nav-normal-sub-nav-hover-bg-color,`
311	`$nav-normal-sub-nav-hover-text-color,`
312	`$nav-normal-sub-nav-selected-bg-color,`
313	`$nav-normal-sub-nav-selected-text-color,`
314	`$nav-normal-sub-nav-active-color`
315	`);`
316	`@include nav-disabled-statement(`
317	`$nav-normal-item-disabled-text-color`
318	`);`
319	`}`
320
321	`&.#{$css-prefix}line {`
322	`&.#{$css-prefix}hoz {`
323	`border-top-color: $nav-line-bg-color;`
324	`border-left-color: $nav-line-bg-color;`
325	`border-right-color: $nav-line-bg-color;`
326	`}`
327
328	`&.#{$css-prefix}ver {`
329	`border-top-color: $nav-line-bg-color;`
330	`border-left-color: $nav-line-bg-color;`
331	`border-bottom-color: $nav-line-bg-color;`
332	`}`
333
334	`@include nav-statement(`
335	`$nav-line-bg-color,`
336	`$nav-line-border-color,`
337	`$nav-line-text-color,`
338	`$nav-line-text-style,`
339	`$shadow-zero,`
340	`$nav-line-item-hover-bg-color,`
341	`$nav-line-item-hover-text-color,`
342	`$nav-line-item-hover-text-style,`
343	`$nav-line-item-selected-bg-color,`
344	`$nav-line-item-selected-text-color,`
345	`$nav-line-item-selected-text-style,`
346	`$nav-line-item-selected-active-color,`
347	`$nav-line-item-hover-active-color,`
348	`$nav-line-item-opened-bg-color,`
349	`$nav-line-item-opened-text-color,`
350	`$nav-line-group-text-color,`
351	`$nav-line-group-text-style,`
352	`$nav-line-item-childselected-bg-color,`
353	`$nav-line-item-childselected-text-color,`
354	`$nav-line-item-childselected-text-style,`
355	`);`
356	`@include sub-nav-statement(`
357	`$nav-line-sub-nav-text-color,`
358	`$nav-line-sub-nav-text-style,`
359	`$nav-line-sub-nav-bg-color,`
360	`$nav-line-sub-nav-hover-bg-color,`
361	`$nav-line-sub-nav-hover-text-color,`
362	`$nav-line-sub-nav-selected-bg-color,`
363	`$nav-line-sub-nav-selected-text-color,`
364	`$nav-line-sub-nav-active-color`
365	`);`
366	`@include nav-disabled-statement(`
367	`$nav-line-item-disabled-text-color`
368	`);`
369	`}`
370
371	`&.#{$css-prefix}icon-only {`
372	`&.#{$css-prefix}icon-only-text {`
373	`padding-top: $s-1;`
374	`padding-bottom: $s-1;`
375	`}`
376	`&.#{$css-prefix}custom-icon-only-width {`
377	`text-align: center;`
378	`}`
379
380	`#{$menu-prefix}-item-inner {`
381	`text-overflow: clip;`
382	`}`
383
384	`// #{$menu-prefix}-item-text > span,`
385	`// #{$nav-prefix}-group-label > #{$menu-prefix}-item-inner > span {`
386	`// opacity: 0;`
387	`// }`
388
389	`&.#{$css-prefix}normal {`
390	`@include icon-only-size($popup-local-border-width);`
391	`}`
392
393	`&.#{$css-prefix}primary {`
394	`@include icon-only-size($nav-primary-border-width);`
395	`}`
396	`&.#{$css-prefix}secondary {`
397	`@include icon-only-size($nav-secondary-border-width);`
398	`}`
399
400	`#{$nav-prefix}-icon-only-arrow.#{$css-prefix}icon {`
401	`@include icon-size(`
402	`$size: $nav-icon-only-font-size,`
403	`$marginLeft: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr}),`
404	`$marginRight: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr})`
405	`);`
406	`transition: all $motion-duration-immediately $motion-linear;`
407	`transform-origin: center 50%;`
408	`}`
409
410	`#{$nav-prefix}-item.#{$css-prefix}opened #{$nav-prefix}-icon-only-arrow.#{$css-prefix}icon-arrow-down {`
411	`@include icon-size(`
412	`$size: $nav-icon-only-font-size,`
413	`$marginLeft: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr}),`
414	`$marginRight: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr}),`
415	`$transform: rotate(180deg)`
416	`);`
417	`}`
418
419	`// #{$nav-prefix}-item.#{$css-prefix}selected #{$nav-prefix}-icon.#{$css-prefix}icon {`
420	`// animation: pulse .3s cubic-bezier(.23, 1, .32, 1);`
421	`// }`
422
423	`#{$menu-prefix}-hoz-icon-arrow,`
424	`#{$menu-prefix}-icon-arrow {`
425	`display: none;`
426	`}`
427	`}`
428
429	`&-embeddable {`
430	`&.#{$css-prefix}primary,`
431	`&.#{$css-prefix}secondary,`
432	`&.#{$css-prefix}normal {`
433	`height: 100%;`
434	`background: transparent;`
435	`box-shadow: none;`
436	`border: none;`
437
438	`#{$menu-prefix}-sub-menu #{$menu-prefix}-item,`
439	`#{$nav-prefix}-item#{$menu-prefix}-item {`
440	`background: transparent;`
441	`}`
442
443	`&.#{$css-prefix}icon-only {`
444	`@include icon-only-size(0px);`
445	`}`
446	`}`
447
448	`&#{$nav-prefix}.#{$css-prefix}hoz {`
449	`#{$menu-prefix}-item-inner {`
450	`height: 100%;`
451	`}`
452
453	`#{$menu-prefix}-sub-menu #{$menu-prefix}-item,`
454	`#{$nav-prefix}-item#{$menu-prefix}-item {`
455	`height: 100%;`
456	`}`
457	`}`
458	`}`
459
460	`&-embeddable,`
461	`&-embeddable &-item.#{$css-prefix}disabled,`
462	`&-embeddable &-item.#{$css-prefix}disabled #{$menu-prefix}-item-text > a {`
463	`background: transparent;`
464	`border: none;`
465	`}`
466	`}`
467
468	`@import "./rtl.scss";`