Subversion Repositories wimsdev

Rev

Rev 13238 | 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. .slide-menu .wims_button_help{
  44.   margin:0;
  45. }
  46. #wimsmenumodubox.slide-menu .wims_button_help:hover{
  47.   background-color: var(--wims_ref_button_help_bgcolor);
  48. }
  49.  
  50. /* Transition animation */
  51. .slide-menu {
  52.   transition: width 600ms ease;
  53. }
  54. .slide-menu a>span{
  55.   transition: transform 600ms ease;
  56. }
  57. #wimstopbox, #wimsbodybox {
  58.   transition: margin 600ms ease;
  59. }
  60.  
  61. .slide-menu .menuitem, .slide-menu a{
  62.   width: 100%;
  63.   box-sizing: border-box;
  64. }
  65.  
  66.  
  67.  
  68. /** Taille du menu ouvert **/
  69.  
  70. /* Small screens */
  71. @media only screen and (max-width: 40em) {
  72.   .slide-menu-opened .slide-menu,
  73.   .slide-menu .menu_title{
  74.     width: 170px;
  75.   }
  76.   .slide-menu-opened #wimstopbox, .slide-menu-opened div#wimsbodybox{
  77.     margin-left: 170px
  78.   }
  79.   .slide-menu-closed .slide-menu .menuitem>a>span{
  80.     transform: translateX(-300px);
  81.     width:135px;
  82.     /* prevent element from being stretched */
  83.     margin-right: -135px;
  84.   }
  85. }
  86.  
  87. /* Medium  and large screens */
  88. @media only screen and (min-width: 40.063em)  {
  89.  
  90.   .slide-menu-closed .slide-menu:hover .menuitem>a>span{
  91.     transform: translateX(0);
  92.   }
  93.   .slide-menu-closed .slide-menu:hover{
  94.     overflow-y: auto;
  95.     bottom:0;
  96.   }
  97.  
  98.   .slide-menu-opened .slide-menu,
  99.   .slide-menu-closed .slide-menu:hover,
  100.   .slide-menu-closed .slide-menu .menu_title{
  101.     width: 250px;
  102.   }
  103.   .slide-menu-opened #wimstopbox, .slide-menu-opened div#wimsbodybox{
  104.     margin-left: 250px
  105.   }
  106.   .slide-menu-closed .slide-menu .menuitem>a>span{
  107.     transform: translateX(-500px);
  108.     width:215px;
  109.     /* prevent element from being stretched */
  110.     margin-right: -215px;
  111.   }
  112. }
  113.