| 1 | nav { position: relative; width: 350px; margin: 0 auto; background: #ffffff; border: 1px solid #e0e0e0; border-width: 1px 0; overflow: hidden; }
|
| 2 | nav ul { display: flex; flex-wrap: nowrap; list-style: none; margin: 0 50px; padding: 0; position: relative; left: 0; transition: 0.3s left ease; word-break: break-word; }
|
| 3 | nav li { min-width: 100%; flex: 1 0 25%; text-align: center; font-size: 14px; }
|
| 4 | nav li:first-child a { border-right: 1px solid #e0e0e0; }
|
| 5 | nav a { position: relative; display: block; height: 100%; padding: 20px; text-decoration: none; color: #212121; transition: 0.3s background; align-items: center; border-right: 1px solid #e0e0e0; cursor: pointer; }
|
| 6 | nav a:hover { background-color: rgba(255, 255, 255, 0.6); }
|
| 7 | nav a.active { background-color: #ffffff; }
|
| 8 | nav a.active:after { content: ''; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background-color: #ffffff; }
|
| 9 | nav p { margin-bottom: 0; }
|
| 10 | nav .icon img { width: 80px; min-width: 80px; height: 80px; }
|
| 11 | nav .prev, nav .next { position: absolute; height: 100%; width: 50px; top: 0; background: rgba(33, 33, 33, 0.1); cursor: pointer; text-align: center; opacity: 1; transition: 0.3s opacity ease; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; }
|
| 12 | nav .prev:not(.disabled):hover, nav .next:not(.disabled):hover { background: rgba(33, 33, 33, 0.3); }
|
| 13 | nav .prev { left: 0; }
|
| 14 | nav .next { right: 0; }
|
| 15 | nav .disabled { cursor: default; opacity: 0; }
|
| 16 | @media screen and (min-width: 600px) { nav { width: auto; overflow: initial; }
|
| 17 | nav li { min-width: 0; width: 25%; flex-grow: 0; } }
|
| 18 | @media screen and (min-width: 600px) { nav .hide-arrows { display: none; }
|
| 19 | nav .hide-arrows + .slides { margin: 0; } }
|
| 20 |
|
| 21 | va-icon { display: inline-block; }
|
| 22 |
|
| 23 | .item-amount { color: #9e9e9e; font-size: 14px; text-align: right; margin: 0 24px 8px; }
|
| 24 |
|
| 25 | .wrapper { overflow: hidden; }
|
| 26 |
|
| 27 | .requires-text { color: #9e9e9e; }
|
| 28 |
|
| 29 | .icon-area { position: relative; display: inline-block; }
|
| 30 |
|
| 31 | .addon-indicator { position: absolute; border: 2px solid #ffffff; border-radius: 50%; bottom: -2px; right: -2px; }
|