You are here

Home » API reference » OA Responsive Regions 7

oa_responsive_regions.css in OA Responsive Regions 7 

body.responsive-panels-region-top-on {
  overflow: hidden;
}

@media (max-width: 480px) {
  .responsive-panels-region.responsive-panels-region-top {
    background: rgba(255, 255, 255, 0.95);
    width: 100%;
    position: fixed;
    top: -100%;
    height: 100%;
    left: 0;
    right: 0;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
  }
  .responsive-panels-region.responsive-panels-region-top .responsive-panels-region-inner {
    overflow: scroll;
    height: 100%;
    padding: 0 20px;
  }
  body.responsive-panels-region-top-on .responsive-panels-region.responsive-panels-region-top {
    top: 40px;
    z-index: 500;
  }
}

body.responsive-panels-region-right-on {
  overflow: hidden;
}

@media (max-width: 480px) {
  .responsive-panels-region.responsive-panels-region-right {
    background: rgba(255, 255, 255, 0.95);
    width: 100%;
    position: fixed;
    right: -100%;
    height: 100%;
    top: 40px;
    bottom: 0;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
  }
  .responsive-panels-region.responsive-panels-region-right .responsive-panels-region-inner {
    overflow: scroll;
    height: 100%;
    padding: 0 20px;
  }
  body.responsive-panels-region-right-on .responsive-panels-region.responsive-panels-region-right {
    right: 0;
    z-index: 500;
  }
}

body.responsive-panels-region-left-on {
  overflow: hidden;
}

@media (max-width: 480px) {
  .responsive-panels-region.responsive-panels-region-left {
    background: rgba(255, 255, 255, 0.95);
    width: 100%;
    position: fixed;
    left: -100%;
    height: 100%;
    top: 40px;
    bottom: 0;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
  }
  .responsive-panels-region.responsive-panels-region-left .responsive-panels-region-inner {
    overflow: scroll;
    height: 100%;
    padding: 0 20px;
  }
  body.responsive-panels-region-left-on .responsive-panels-region.responsive-panels-region-left {
    left: 0;
    z-index: 500;
  }
}

body.responsive-panels-region-bottom-on {
  overflow: hidden;
}

@media (max-width: 480px) {
  .responsive-panels-region.responsive-panels-region-bottom {
    background: rgba(255, 255, 255, 0.95);
    width: 100%;
    position: fixed;
    bottom: -100%;
    height: 100%;
    left: 0;
    right: 0;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
  }
  .responsive-panels-region.responsive-panels-region-bottom .responsive-panels-region-inner {
    overflow: scroll;
    height: 100%;
    padding: 0 20px;
  }
  body.responsive-panels-region-bottom-on .responsive-panels-region.responsive-panels-region-bottom {
    bottom: 0;
    z-index: 500;
  }
}

#oa-responsive-regions-navbar {
  position: fixed;
  top: 0;
  margin: 0;
  display: none;
  visibility: hidden;
}
#oa-responsive-regions-navbar .navbar-inner {
  border: 0;
}
#oa-responsive-regions-navbar .btn-navbar {
  padding: 4px 10px;
}
#oa-responsive-regions-navbar .btn-navbar.btn-active {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}
@media (max-width: 480px) {
  #oa-responsive-regions-navbar {
    display: block;
    visibility: visible;
  }
}

File

assets/stylesheets/oa_responsive_regions.css
View source 
  1. body.responsive-panels-region-top-on {

  2.   overflow: hidden;

  3. }

  4. 

  5. @media (max-width: 480px) {

  6.   .responsive-panels-region.responsive-panels-region-top {

  7.     background: rgba(255, 255, 255, 0.95);

  8.     width: 100%;

  9.     position: fixed;

  10.     top: -100%;

  11.     height: 100%;

  12.     left: 0;

  13.     right: 0;

  14.     -webkit-transition: 500ms;

  15.     -moz-transition: 500ms;

  16.     -o-transition: 500ms;

  17.     transition: 500ms;

  18.   }

  19.   .responsive-panels-region.responsive-panels-region-top .responsive-panels-region-inner {

  20.     overflow: scroll;

  21.     height: 100%;

  22.     padding: 0 20px;

  23.   }

  24.   body.responsive-panels-region-top-on .responsive-panels-region.responsive-panels-region-top {

  25.     top: 40px;

  26.     z-index: 500;

  27.   }

  28. }

  29. 

  30. body.responsive-panels-region-right-on {

  31.   overflow: hidden;

  32. }

  33. 

  34. @media (max-width: 480px) {

  35.   .responsive-panels-region.responsive-panels-region-right {

  36.     background: rgba(255, 255, 255, 0.95);

  37.     width: 100%;

  38.     position: fixed;

  39.     right: -100%;

  40.     height: 100%;

  41.     top: 40px;

  42.     bottom: 0;

  43.     -webkit-transition: 500ms;

  44.     -moz-transition: 500ms;

  45.     -o-transition: 500ms;

  46.     transition: 500ms;

  47.   }

  48.   .responsive-panels-region.responsive-panels-region-right .responsive-panels-region-inner {

  49.     overflow: scroll;

  50.     height: 100%;

  51.     padding: 0 20px;

  52.   }

  53.   body.responsive-panels-region-right-on .responsive-panels-region.responsive-panels-region-right {

  54.     right: 0;

  55.     z-index: 500;

  56.   }

  57. }

  58. 

  59. body.responsive-panels-region-left-on {

  60.   overflow: hidden;

  61. }

  62. 

  63. @media (max-width: 480px) {

  64.   .responsive-panels-region.responsive-panels-region-left {

  65.     background: rgba(255, 255, 255, 0.95);

  66.     width: 100%;

  67.     position: fixed;

  68.     left: -100%;

  69.     height: 100%;

  70.     top: 40px;

  71.     bottom: 0;

  72.     -webkit-transition: 500ms;

  73.     -moz-transition: 500ms;

  74.     -o-transition: 500ms;

  75.     transition: 500ms;

  76.   }

  77.   .responsive-panels-region.responsive-panels-region-left .responsive-panels-region-inner {

  78.     overflow: scroll;

  79.     height: 100%;

  80.     padding: 0 20px;

  81.   }

  82.   body.responsive-panels-region-left-on .responsive-panels-region.responsive-panels-region-left {

  83.     left: 0;

  84.     z-index: 500;

  85.   }

  86. }

  87. 

  88. body.responsive-panels-region-bottom-on {

  89.   overflow: hidden;

  90. }

  91. 

  92. @media (max-width: 480px) {

  93.   .responsive-panels-region.responsive-panels-region-bottom {

  94.     background: rgba(255, 255, 255, 0.95);

  95.     width: 100%;

  96.     position: fixed;

  97.     bottom: -100%;

  98.     height: 100%;

  99.     left: 0;

  100.     right: 0;

  101.     -webkit-transition: 500ms;

  102.     -moz-transition: 500ms;

  103.     -o-transition: 500ms;

  104.     transition: 500ms;

  105.   }

  106.   .responsive-panels-region.responsive-panels-region-bottom .responsive-panels-region-inner {

  107.     overflow: scroll;

  108.     height: 100%;

  109.     padding: 0 20px;

  110.   }

  111.   body.responsive-panels-region-bottom-on .responsive-panels-region.responsive-panels-region-bottom {

  112.     bottom: 0;

  113.     z-index: 500;

  114.   }

  115. }

  116. 

  117. #oa-responsive-regions-navbar {

  118.   position: fixed;

  119.   top: 0;

  120.   margin: 0;

  121.   display: none;

  122.   visibility: hidden;

  123. }

  124. #oa-responsive-regions-navbar .navbar-inner {

  125.   border: 0;

  126. }

  127. #oa-responsive-regions-navbar .btn-navbar {

  128.   padding: 4px 10px;

  129. }

  130. #oa-responsive-regions-navbar .btn-navbar.btn-active {

  131.   -webkit-transform: scaleX(-1);

  132.   -moz-transform: scaleX(-1);

  133.   -ms-transform: scaleX(-1);

  134.   -o-transform: scaleX(-1);

  135.   transform: scaleX(-1);

  136. }

  137. @media (max-width: 480px) {

  138.   #oa-responsive-regions-navbar {

  139.     display: block;

  140.     visibility: visible;

  141.   }

  142. }