src/main/resources/META-INF/resources/designer/css/simple-sidebar.css

   1 /*!
   2  * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
   3  * Code licensed under the Apache License v2.0.
   4  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
   5  */
   6
   7 /* Toggle Styles */
   8
   9 #wrapper {
  10     padding-left: 0;
  11     -webkit-transition: all 0.5s ease;
  12     -moz-transition: all 0.5s ease;
  13     -o-transition: all 0.5s ease;
  14     transition: all 0.5s ease;
  15 }
  16
  17 #wrapper.toggled {
  18     padding-left: 250px;
  19 }
  20
  21 #sidebar-wrapper
  22 {
  23     z-index: 1000;
  24     float:left;
  25     left: 250px;
  26     width: 0;
  27     height: 100%;
  28     margin-left: -250px;
  29     overflow-y: auto;
  30     -webkit-transition: all 0.5s ease;
  31     -moz-transition: all 0.5s ease;
  32     -o-transition: all 0.5s ease;
  33     transition: all 0.5s ease;
  34 }
  35
  36 #wrapper.toggled #sidebar-wrapper {
  37     width: 250px;
  38 }
  39
  40 #page-content-wrapper {
  41     width: 100%;
  42     padding: 15px;
  43 }
  44
  45 #wrapper.toggled #page-content-wrapper {
  46     position: absolute;
  47     margin-right: -250px;
  48 }
  49
  50 /* Sidebar Styles */
  51
  52 .sidebar-nav {
  53     position: absolute;
  54     top: 0;
  55     width: 250px;
  56     margin: 0;
  57     padding: 0;
  58     list-style: none;
  59 }
  60
  61 .sidebar-nav li {
  62     text-indent: 20px;
  63     line-height: 40px;
  64 }
  65
  66 .sidebar-nav li a {
  67     display: block;
  68     text-decoration: none;
  69     color: #999999;
  70 }
  71
  72 .sidebar-nav li a:hover {
  73     text-decoration: none;
  74     color: #fff;
  75     background: rgba(255,255,255,0.2);
  76 }
  77
  78 .sidebar-nav li a:active,
  79 .sidebar-nav li a:focus {
  80     text-decoration: none;
  81 }
  82
  83 .sidebar-nav > .sidebar-brand {
  84     height: 65px;
  85     font-size: 18px;
  86     line-height: 60px;
  87 }
  88
  89 .sidebar-nav > .sidebar-brand a {
  90     color: #999999;
  91 }
  92
  93 .sidebar-nav > .sidebar-brand a:hover {
  94     color: #fff;
  95     background: none;
  96 }
  97
  98 @media(min-width:768px) {
  99     #wrapper {
 100         padding-left: 250px;
 101     }
 102
 103     #wrapper.toggled {
 104         padding-left: 0;
 105     }
 106
 107     #sidebar-wrapper {
 108         width: 250px;
 109     }
 110
 111     #wrapper.toggled #sidebar-wrapper {
 112         width: 0;
 113     }
 114
 115     #page-content-wrapper {
 116         padding: 20px;
 117     }
 118
 119     #wrapper.toggled #page-content-wrapper {
 120         position: relative;
 121         margin-right: 0;
 122     }
 123 }