Subversion Repositories wimsdev

Rev

Rev 12723 | Rev 15049 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1. /** Menu style */
  2.  
  3. /** these are redefined in wims theme : **/
  4. /*  .menu .is-active > a {
  5.     background: #1779ba;
  6.     color: #fefefe; }
  7.   .menu .active > a {
  8.     background: #1779ba;
  9.     color: #fefefe; }*/
  10.  
  11. /**
  12.  * Foundation for Sites by ZURB
  13.  * Version 6.5.3
  14.  * foundation.zurb.com
  15.  * Licensed under MIT Open Source
  16.  */
  17. /* Foundation Menu styles */
  18. .menu {
  19.   padding: 0;
  20.   margin: 0;
  21.   list-style: none;
  22.   position: relative;
  23.   display: flex;
  24.   flex-wrap: wrap; }
  25.   [data-whatinput='mouse'] .menu li {
  26.     outline: 0; }
  27.   .menu a,
  28.   .menu .button {
  29.     line-height: 1;
  30.     text-decoration: none;
  31.     display: block;
  32.     padding: 0.7rem 1rem; }
  33.   .menu input,
  34.   .menu select,
  35.   .menu a,
  36.   .menu button {
  37.     margin-bottom: 0; }
  38.   .menu input {
  39.     display: inline-block; }
  40.   .menu, .menu.horizontal {
  41.     flex-wrap: wrap;
  42.     flex-direction: row; }
  43.   .menu.vertical {
  44.     flex-wrap: nowrap;
  45.     flex-direction: column; }
  46.   .menu.expanded li {
  47.     flex: 1 1 0px; }
  48.   .menu.simple {
  49.     align-items: center; }
  50.     .menu.simple li + li {
  51.       margin-left: 1rem; }
  52.     .menu.simple a {
  53.       padding: 0; }
  54.   @media print, screen and (min-width: 40em) {
  55.     .menu.medium-horizontal {
  56.       flex-wrap: wrap;
  57.       flex-direction: row; }
  58.     .menu.medium-vertical {
  59.       flex-wrap: nowrap;
  60.       flex-direction: column; }
  61.     .menu.medium-expanded li {
  62.       flex: 1 1 0px; }
  63.     .menu.medium-simple li {
  64.       flex: 1 1 0px; } }
  65.   @media print, screen and (min-width: 64em) {
  66.     .menu.large-horizontal {
  67.       flex-wrap: wrap;
  68.       flex-direction: row; }
  69.     .menu.large-vertical {
  70.       flex-wrap: nowrap;
  71.       flex-direction: column; }
  72.     .menu.large-expanded li {
  73.       flex: 1 1 0px; }
  74.     .menu.large-simple li {
  75.       flex: 1 1 0px; } }
  76.   .menu.nested {
  77.     margin-right: 0;
  78.     margin-left: 1rem; }
  79.   .menu.icons a {
  80.     display: flex; }
  81.   .menu.icon-top a, .menu.icon-right a, .menu.icon-bottom a, .menu.icon-left a {
  82.     display: flex; }
  83.   .menu.icon-left li a {
  84.     flex-flow: row nowrap; }
  85.     .menu.icon-left li a img,
  86.     .menu.icon-left li a i,
  87.     .menu.icon-left li a svg {
  88.       margin-right: 0.25rem; }
  89.   .menu.icon-right li a {
  90.     flex-flow: row nowrap; }
  91.     .menu.icon-right li a img,
  92.     .menu.icon-right li a i,
  93.     .menu.icon-right li a svg {
  94.       margin-left: 0.25rem; }
  95.   .menu.icon-top li a {
  96.     flex-flow: column nowrap; }
  97.     .menu.icon-top li a img,
  98.     .menu.icon-top li a i,
  99.     .menu.icon-top li a svg {
  100.       align-self: stretch;
  101.       margin-bottom: 0.25rem;
  102.       text-align: center; }
  103.   .menu.icon-bottom li a {
  104.     flex-flow: column nowrap; }
  105.     .menu.icon-bottom li a img,
  106.     .menu.icon-bottom li a i,
  107.     .menu.icon-bottom li a svg {
  108.       align-self: stretch;
  109.       margin-bottom: 0.25rem;
  110.       text-align: center; }
  111.   /*.menu .is-active > a {
  112.     background: #1779ba;
  113.     color: #fefefe; }
  114.   .menu .active > a {
  115.     background: #1779ba;
  116.     color: #fefefe; }*/
  117.   .menu.align-left {
  118.     justify-content: flex-start; }
  119.   .menu.align-right li {
  120.     display: flex;
  121.     justify-content: flex-end; }
  122.     .menu.align-right li .submenu li {
  123.       justify-content: flex-start; }
  124.   .menu.align-right.vertical li {
  125.     display: block;
  126.     text-align: right; }
  127.     .menu.align-right.vertical li .submenu li {
  128.       text-align: right; }
  129.   .menu.align-right .nested {
  130.     margin-right: 1rem;
  131.     margin-left: 0; }
  132.   .menu.align-center li {
  133.     display: flex;
  134.     justify-content: center; }
  135.     .menu.align-center li .submenu li {
  136.       justify-content: flex-start; }
  137.   .menu .menu-text {
  138.     padding: 0.7rem 1rem;
  139.     font-weight: bold;
  140.     line-height: 1;
  141.     color: inherit; }
  142.  
  143. .menu-centered > .menu {
  144.   justify-content: center; }
  145.   .menu-centered > .menu li {
  146.     display: flex;
  147.     justify-content: center; }
  148.     .menu-centered > .menu li .submenu li {
  149.       justify-content: flex-start; }
  150.  
  151. .no-js [data-responsive-menu] ul {
  152.   display: none; }
  153.  
  154. .menu-icon {
  155.   position: relative;
  156.   display: inline-block;
  157.   vertical-align: middle;
  158.   width: 20px;
  159.   height: 16px;
  160.   cursor: pointer; }
  161.   .menu-icon::after {
  162.     position: absolute;
  163.     top: 0;
  164.     left: 0;
  165.     display: block;
  166.     width: 100%;
  167.     height: 2px;
  168.     background: #fefefe;
  169.     box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
  170.     content: ''; }
  171.   .menu-icon:hover::after {
  172.     background: #cacaca;
  173.     box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; }
  174.  
  175. .menu-icon.dark {
  176.   position: relative;
  177.   display: inline-block;
  178.   vertical-align: middle;
  179.   width: 20px;
  180.   height: 16px;
  181.   cursor: pointer; }
  182.   .menu-icon.dark::after {
  183.     position: absolute;
  184.     top: 0;
  185.     left: 0;
  186.     display: block;
  187.     width: 100%;
  188.     height: 2px;
  189.     background: #0a0a0a;
  190.     box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
  191.     content: ''; }
  192.   .menu-icon.dark:hover::after {
  193.     background: #8a8a8a;
  194.     box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; }
  195.