Subversion Repositories wimsdev

Rev

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

  1. /* slideout Menu styles */
  2.  
  3. .slide-menu{
  4.   background-image: linear-gradient(to right, rgba(0, 0, 0, .5), transparent);
  5.   position: fixed;
  6.   left: 0;
  7.   top: 0;
  8.   right: 0;
  9.   /*padding-bottom: 3em;*/
  10. }
  11.  
  12. .slide-menu-closed .slide-menu{
  13.   overflow: hidden;
  14.   z-index: 200;
  15. }
  16.  
  17. .slide-menu .menuitem>a{
  18.   display:flex;
  19. }
  20.  
  21. .slide-menu-opened .slide-menu{
  22.   overflow-y: auto;
  23.   bottom:0;
  24. }
  25.  
  26. .slide-menu>.toggle-button{margin:.5em 3px;}
  27. .slide-menu>.toggle-button>a{
  28.   margin:0;
  29.   font-size: 1em;
  30.   line-height: 1em;
  31.   font-weight: normal;
  32.   display:flex;
  33.   justify-content: space-between;
  34.   padding: .2em;
  35. }
  36. #wimsmenumodubox .wims_secondary_button{
  37.   color:#000;
  38. }
  39. .slide-menu-opened .toggle-button span{
  40.   transform: rotate(180deg);
  41. }
  42.  
  43.  
  44. /* Transition animation */
  45. .slide-menu {
  46.   transition: width 600ms ease;
  47. }
  48. .slide-menu a>span{
  49.   transition: transform 600ms ease;
  50. }
  51. #wimstopbox, #wimsbodybox {
  52.   transition: margin 600ms ease;
  53. }
  54.  
  55. .slide-menu .menuitem, .slide-menu a{
  56.   width: 100%;
  57.   box-sizing: border-box;
  58. }
  59.  
  60.  
  61.  
  62. /** Taille du menu ouvert **/
  63.  
  64. /* Small screens */
  65. @media only screen and (max-width: 40em) {
  66.   .slide-menu-opened .slide-menu,
  67.   .slide-menu .menu_title{
  68.     width: 170px;
  69.   }
  70.   .slide-menu-opened #wimstopbox, .slide-menu-opened div#wimsbodybox{
  71.     margin-left: 170px
  72.   }
  73.   .slide-menu-closed .slide-menu .menuitem>a>span{
  74.     transform: translateX(-300px);
  75.     width:135px;
  76.     /* prevent element from being stretched */
  77.     margin-right: -135px;
  78.   }
  79. }
  80.  
  81. /* Medium  and large screens */
  82. @media only screen and (min-width: 40.063em)  {
  83.  
  84.   .slide-menu-closed .slide-menu:hover .menuitem>a>span{
  85.     transform: translateX(0);
  86.   }
  87.   .slide-menu-closed .slide-menu:hover{
  88.     overflow-y: auto;
  89.     bottom:0;
  90.   }
  91.  
  92.   .slide-menu-opened .slide-menu,
  93.   .slide-menu-closed .slide-menu:hover,
  94.   .slide-menu-closed .slide-menu .menu_title{
  95.     width: 250px;
  96.   }
  97.   .slide-menu-opened #wimstopbox, .slide-menu-opened div#wimsbodybox{
  98.     margin-left: 250px
  99.   }
  100.   .slide-menu-closed .slide-menu .menuitem>a>span{
  101.     transform: translateX(-500px);
  102.     width:215px;
  103.     /* prevent element from being stretched */
  104.     margin-right: -215px;
  105.   }
  106. }
  107.