github.com/kardianos/nomad@v0.1.3-0.20151022182107-b13df73ee850/website/source/assets/stylesheets/_sidebar.scss (about) 1 2 // Base variables 3 // -------------------------------------------------- 4 $screen-tablet: 768px; 5 6 $gray-darker: #212121; // #212121 - text 7 $gray-secondary: #757575; // #757575 - secondary text, icons 8 $gray: #bdbdbd; // #bdbdbd - hint text 9 $gray-light: #e0e0e0; // #e0e0e0 - divider 10 $gray-lighter: #f5f5f5; // #f5f5f5 - background 11 12 /* -- Sidebar style ------------------------------- */ 13 14 // Sidebar variables 15 // -------------------------------------------------- 16 $zindex-sidebar-fixed: 1035; 17 18 $sidebar-desktop-width: 280px; 19 $sidebar-width: 240px; 20 21 22 $sidebar-padding: 16px; 23 $sidebar-divider: $sidebar-padding/2; 24 25 $sidebar-nav-height: 48px; 26 27 $sidebar-icon-width: 40px; 28 $sidebar-icon-height: 20px; 29 30 $sidebar-badge-size: $sidebar-nav-height/2; 31 $sidebar-badge-font-size: 10px; 32 33 $sidebar-brand-color: $gray-secondary; 34 $sidebar-icon-color: $gray-secondary; 35 $sidebar-menu-color: $gray-darker; 36 37 38 $sidebar-font-weight: 300; 39 40 // Sidebar mixins 41 // -------------------------------------------------- 42 43 // Sidebar horizontal block 44 // 45 // This settings will extended by .sidebar-text, .sidebar-brand and .sidebar-nav>li>a 46 @mixin sidebar-block() 47 { 48 display: block; 49 line-height: $sidebar-nav-height; 50 padding: 0; 51 //padding-left: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding; 52 //padding-right: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding; 53 text-decoration: none; 54 clear: both; 55 @include v-nav-style-core(); 56 //@include text-overflow(); 57 @include transition(all .2s ease-in-out); 58 color: $blue-dark; 59 60 &:hover, &:focus { 61 @include box-shadow(none); 62 outline: none; 63 } 64 65 // positioning caret in sidebar block 66 .caret { 67 position: absolute; 68 right: $sidebar-padding + $sidebar-badge-size/2 - 4px; // caret centered by badge position; 4px - caret width 69 top: $sidebar-nav-height/2; 70 } 71 // positioning badge in sidebar block 72 .sidebar-badge { 73 position: absolute; 74 right: $sidebar-padding; 75 top: ($sidebar-nav-height - $sidebar-badge-size)/2 ; 76 } 77 } 78 79 // Sidebar design template 80 // 81 // You can make own sidebar style with this template 82 @mixin sidebar-template( 83 $color, 84 $bg, 85 $header-bg, 86 $brand-color, 87 $brand-bg, 88 $brand-hover-color, 89 $brand-hover-bg, 90 $divider, 91 $badge-color, 92 $badge-bg, 93 $icon-color, 94 $icon-hover-color, 95 $link-color, 96 $link-bg, 97 $link-hover-color, 98 $link-hover-bg, 99 $link-active-color, 100 $link-active-bg, 101 $link-disabled-color, 102 $link-disabled-bg 103 ) { 104 105 background-color: $bg; 106 107 ul{ 108 padding-left: 0; 109 list-style-type: none; 110 } 111 112 .sidebar-header { 113 background-color: $header-bg; 114 margin-bottom: 15px; 115 } 116 117 .sidebar-divider, .sidebar-nav .divider { 118 background-color: $divider; 119 } 120 121 .sidebar-text { 122 color: $color; 123 } 124 125 .buttons-nav{ 126 margin-top: 10px; 127 text-align: center; 128 @include v-nav-style-core(); 129 130 li{ 131 margin-bottom: 20px; 132 a{ 133 min-width: 148px; 134 color: $blue-dark; 135 &:hover{ 136 color: $green-dark; 137 } 138 } 139 } 140 } 141 142 .sidebar-nav { 143 text-align: center; 144 //border-bottom: 1px solid $faint-gray; 145 padding-bottom: 8px; 146 147 &:last-child{ 148 border-bottom: none; 149 } 150 151 li > a { 152 color: $link-color; 153 background-color: $link-bg; 154 155 i { 156 color: $icon-color; 157 } 158 } 159 li:hover > a, li > a:hover { 160 color: $link-hover-color; 161 background-color: $link-hover-bg; 162 163 i { 164 color: $icon-hover-color; 165 } 166 } 167 li:focus > a, li > a:focus { 168 color: $link-color; 169 background-color: $link-bg; 170 171 i { 172 color: $icon-hover-color; 173 } 174 } 175 176 > .open > a { 177 &, 178 &:hover, 179 &:focus { 180 color: $link-hover-color; 181 background-color: $link-hover-bg; 182 } 183 } 184 185 > .active > a { 186 &, 187 &:hover, 188 &:focus { 189 color: $link-active-color; 190 background-color: $link-active-bg; 191 } 192 } 193 > .disabled > a { 194 &, 195 &:hover, 196 &:focus { 197 color: $link-disabled-color; 198 background-color: $link-disabled-bg; 199 } 200 } 201 > li > .ink { 202 //background: #80d8ff; 203 //opacity: 0.5; 204 } 205 206 // Dropdown menu items 207 > .dropdown { 208 // Remove background color from open dropdown 209 > .dropdown-menu { 210 211 background-color: $link-hover-bg; 212 213 > li > a { 214 &:focus { 215 background-color: $link-hover-bg; 216 color: $link-hover-color; 217 } 218 &:hover { 219 background-color: darken($link-hover-bg, 7%); 220 color: $link-hover-color; 221 } 222 } 223 224 > .active > a { 225 &, 226 &:hover, 227 &:focus { 228 color: $link-active-color; 229 background-color: $link-active-bg; 230 } 231 } 232 } 233 } 234 } 235 } 236 237 // 238 // Sidebars 239 // -------------------------------------------------- 240 241 // Wrapper and base class 242 // 243 // Provide a static sidebar from which we expand to create other sidebar variations. 244 .sidebar { 245 position: relative; 246 display: block; 247 min-height: 100%; 248 overflow-y: auto; 249 overflow-x: hidden; 250 border: none; 251 @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1)); 252 @include clearfix(); 253 } 254 255 // Sidebar Elements 256 // 257 // Basic style of sidebar elements 258 .sidebar { 259 260 // Sidebar heading 261 //---------------- 262 .sidebar-header { 263 position: relative; 264 margin-bottom: $sidebar-divider; 265 @include transition(all .2s ease-in-out); 266 //border-bottom: 1px solid $faint-gray; 267 268 .buttons{ 269 text-align: center; 270 padding: $xsmall-pad 0 $small-pad; 271 a{ 272 &.outline-btn{ 273 margin-right: 10px; 274 } 275 } 276 } 277 } 278 279 .sidebar-image { 280 padding-top: 24px; 281 img { 282 display: block; 283 margin: 0 auto; 284 } 285 } 286 287 // Brand/project name 288 // 289 // In google guideline used for email dropdown 290 .sidebar-brand { 291 position: absolute; 292 bottom: 0; 293 left: 0; 294 right: 0; 295 @include sidebar-block(); 296 297 &:hover, 298 &:focus { 299 text-decoration: none; 300 } 301 } 302 303 // Sidebar text 304 //---------------- 305 .sidebar-text { 306 @include sidebar-block(); 307 } 308 309 // Sidebar icons 310 //---------------- 311 .sidebar-icon { 312 display: inline-block; 313 height: $sidebar-icon-height; 314 margin-right: $sidebar-divider; 315 text-align: left; 316 font-size: $sidebar-icon-height; 317 vertical-align: middle; 318 319 &:before, &:after { 320 vertical-align: middle; 321 } 322 } 323 } 324 325 326 327 // Sidebar navigation class 328 // ------------------------ 329 .sidebar .sidebar-nav { 330 margin: 0; 331 padding: 0; 332 333 // Links 334 //---------------- 335 li { 336 position: relative; 337 list-style-type: none; 338 339 a { 340 position: relative; 341 cursor: pointer; 342 user-select: none; 343 @include sidebar-block(); 344 345 &:hover { 346 background: transparent; 347 } 348 } 349 } 350 } 351 352 // Sidebar color theme variations 353 // 354 // ------------------------ 355 .sidebar-default { 356 @include sidebar-template( 357 $color: $gray-darker, 358 $bg: #fff, 359 $header-bg: $white, 360 $brand-color: $gray-dark, 361 $brand-bg: transparent, 362 $brand-hover-color: $gray-darker, 363 $brand-hover-bg: rgba(0, 0, 0, 0.10), 364 $divider: $gray, 365 $badge-color: #fff, 366 $badge-bg: $gray, 367 $icon-color: $gray-dark, 368 $icon-hover-color: $gray-dark, 369 $link-color: $gray-darker, 370 $link-bg: transparent, 371 $link-hover-color: $gray-darker, 372 $link-hover-bg: lighten($faint-gray, 6%), 373 $link-active-color: $gray-darker, 374 $link-active-bg: $gray-light, 375 $link-disabled-color: $gray-light, 376 $link-disabled-bg: transparent 377 ); 378 } 379 380 381 // Sidebar toggling 382 // 383 // Hide sidebar 384 .sidebar { 385 width: 0; 386 @include translate3d(-$sidebar-desktop-width, 0, 0); 387 388 &.open { 389 min-width: $sidebar-desktop-width; 390 width: $sidebar-desktop-width; 391 @include translate3d(0, 0, 0); 392 } 393 } 394 395 // Sidebar positions: fix the left/right sidebars 396 .sidebar-fixed-left, 397 .sidebar-fixed-right, 398 .sidebar-stacked { 399 position: fixed; 400 top: 0; 401 bottom: 0; 402 z-index: $zindex-sidebar-fixed; 403 } 404 .sidebar-stacked { 405 left: 0; 406 } 407 .sidebar-fixed-left { 408 left: 0; 409 box-shadow: 2px 0px 25px rgba(0,0,0,0.15); 410 -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15); 411 } 412 .sidebar-fixed-right { 413 right: 0; 414 box-shadow: 0px 2px 25px rgba(0,0,0,0.15); 415 -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15); 416 417 @include translate3d($sidebar-desktop-width, 0, 0); 418 &.open { 419 @include translate3d(0, 0, 0); 420 } 421 .icon-material-sidebar-arrow:before { 422 content: "\e614"; // icon-material-arrow-forward 423 } 424 } 425 426 // Sidebar size 427 // 428 // Change size of sidebar and sidebar elements on small screens 429 @media (max-width: $screen-tablet) { 430 .sidebar.open { 431 min-width: $sidebar-width; 432 width: $sidebar-width; 433 } 434 435 .sidebar .sidebar-header { 436 //height: $sidebar-width * 9/16; // 16:9 header dimension 437 } 438 439 .sidebar .sidebar-image { 440 /* img { 441 width: $sidebar-width/4 - $sidebar-padding; 442 height: $sidebar-width/4 - $sidebar-padding; 443 } */ 444 } 445 } 446 447 .sidebar-overlay { 448 visibility: hidden; 449 position: fixed; 450 top: 0; 451 left: 0; 452 right: 0; 453 bottom: 0; 454 opacity: 0; 455 background: $white; 456 z-index: $zindex-sidebar-fixed - 1; 457 458 -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); 459 -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); 460 transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); 461 -webkit-transform: translateZ(0); 462 -moz-transform: translateZ(0); 463 -ms-transform: translateZ(0); 464 -o-transform: translateZ(0); 465 transform: translateZ(0); 466 } 467 468 .sidebar-overlay.active { 469 opacity: 0.3; 470 visibility: visible; 471 -webkit-transition-delay: 0; 472 -moz-transition-delay: 0; 473 transition-delay: 0; 474 }