Subversion Repositories wimsdev

Rev

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