You are here

Home » API reference » Bootstrap Styles 1.0.x

responsive.css in Bootstrap Styles 1.0.x 

.bs-responsive-preview-wrapper {
  position: fixed;
  z-index: 500;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.bs-responsive-preview-wrapper:before {
  content: '';
  background-color: black;
  background-color: rgba(0, 0, 0, 0.92);
  background-image: -webkit-linear-gradient(left, #141414, #323232 25%, #646464 40%, #646464 60%, #323232 75%, #141414);
  background-image: -moz-linear-gradient(left, #141414, #323232 25%, #646464 40%, #646464 60%, #323232 75%, #141414);
  background-image: linear-gradient(left, #141414, #323232 25%, #646464 40%, #646464 60%, #323232 75%, #141414);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.bs-responsive-preview-scroll-track {
  padding: 0 60px;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.bs-responsive-preview-scroll-pane {
  min-height: 100%;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.bs-responsive-preview-container {
  z-index: 100;
  background-color: #212121;
  border-radius: 20px;
  box-shadow: 0 0 0px 1px #777, 1px 1px 60px 0px #000;
  -webkit-transition: left 150ms ease-out;
  -moz-transition: left 150ms ease-out;
  transition: left 150ms ease-out;
  opacity: 1;
  min-height: 70vh;
  margin: 0 auto;
  position: relative;
  padding: 20px;
}

iframe#bs-responsive-preview {
  display: block;
  position: absolute;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  box-shadow: 0 0 0 1px #808080;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.bs-ui-widget-overlay.ui-widget-overlay {
  opacity: 1;
  z-index: 500 !important;
}

#drupal-off-canvas .form-item.bs_responsive_bar {
  top: 68px;
  z-index: 2;
  position: sticky;
  margin: -68px -30px 68px;
  width: calc(100% + 60px);
  background: #292C32;
  border-bottom: #727579 2px solid;
  transition: all .3s ease-in-out;
}

#drupal-off-canvas .form-item.bs_responsive_bar legend {
  margin-bottom: 2px;
}

File

css/responsive.css
View source 
  1. .bs-responsive-preview-wrapper {

  2.   position: fixed;

  3.   z-index: 500;

  4.   left: 0;

  5.   top: 0;

  6.   right: 0;

  7.   bottom: 0;

  8. }

  9. 

  10. .bs-responsive-preview-wrapper:before {

  11.   content: '';

  12.   background-color: black;

  13.   background-color: rgba(0, 0, 0, 0.92);

  14.   background-image: -webkit-linear-gradient(left, #141414, #323232 25%, #646464 40%, #646464 60%, #323232 75%, #141414);

  15.   background-image: -moz-linear-gradient(left, #141414, #323232 25%, #646464 40%, #646464 60%, #323232 75%, #141414);

  16.   background-image: linear-gradient(left, #141414, #323232 25%, #646464 40%, #646464 60%, #323232 75%, #141414);

  17.   bottom: 0;

  18.   left: 0;

  19.   position: absolute;

  20.   right: 0;

  21.   top: 0;

  22.   z-index: 1;

  23. }

  24. 

  25. .bs-responsive-preview-scroll-track {

  26.   padding: 0 60px;

  27.   bottom: 0;

  28.   left: 0;

  29.   overflow-y: auto;

  30.   position: absolute;

  31.   right: 0;

  32.   top: 0;

  33.   z-index: 1;

  34. }

  35. 

  36. .bs-responsive-preview-scroll-pane {

  37.   min-height: 100%;

  38.   position: relative;

  39.   width: 100%;

  40.   display: flex;

  41.   align-items: center;

  42. }

  43. 

  44. .bs-responsive-preview-container {

  45.   z-index: 100;

  46.   background-color: #212121;

  47.   border-radius: 20px;

  48.   box-shadow: 0 0 0px 1px #777, 1px 1px 60px 0px #000;

  49.   -webkit-transition: left 150ms ease-out;

  50.   -moz-transition: left 150ms ease-out;

  51.   transition: left 150ms ease-out;

  52.   opacity: 1;

  53.   min-height: 70vh;

  54.   margin: 0 auto;

  55.   position: relative;

  56.   padding: 20px;

  57. }

  58. 

  59. iframe#bs-responsive-preview {

  60.   display: block;

  61.   position: absolute;

  62.   width: calc(100% - 40px);

  63.   height: calc(100% - 40px);

  64.   top: 20px;

  65.   left: 20px;

  66.   right: 20px;

  67.   bottom: 20px;

  68.   box-shadow: 0 0 0 1px #808080;

  69.   -webkit-transition: all 150ms ease-out;

  70.   -moz-transition: all 150ms ease-out;

  71.   -o-transition: all 150ms ease-out;

  72.   transition: all 150ms ease-out;

  73. }

  74. 

  75. .bs-ui-widget-overlay.ui-widget-overlay {

  76.   opacity: 1;

  77.   z-index: 500 !important;

  78. }

  79. 

  80. #drupal-off-canvas .form-item.bs_responsive_bar {

  81.   top: 68px;

  82.   z-index: 2;

  83.   position: sticky;

  84.   margin: -68px -30px 68px;

  85.   width: calc(100% + 60px);

  86.   background: #292C32;

  87.   border-bottom: #727579 2px solid;

  88.   transition: all .3s ease-in-out;

  89. }

  90. 

  91. #drupal-off-canvas .form-item.bs_responsive_bar legend {

  92.   margin-bottom: 2px;

  93. }