作者 Karson

优化前台会员中心H5下展示

优化后台菜单栏切换
优化后台Logo展示
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <!-- 迷你模式下Logo的大小为50X50 --> 3 <!-- 迷你模式下Logo的大小为50X50 -->
4 <span class="logo-mini">{$site.name|mb_substr=0,4,'utf-8'|mb_strtoupper='utf-8'|htmlentities}</span> 4 <span class="logo-mini">{$site.name|mb_substr=0,4,'utf-8'|mb_strtoupper='utf-8'|htmlentities}</span>
5 <!-- 普通模式下Logo --> 5 <!-- 普通模式下Logo -->
6 - <span class="logo-lg"><b>{$site.name|mb_substr=0,4,'utf-8'|htmlentities}</b>{$site.name|mb_substr=4,null,'utf-8'|htmlentities}</span> 6 + <span class="logo-lg">{$site.name|htmlentities}</span>
7 </a> 7 </a>
8 8
9 <!-- 顶部通栏样式 --> 9 <!-- 顶部通栏样式 -->
1 -<div class="sidenav"> 1 +<div class="sidebar-toggle"><i class="fa fa-bars"></i></div>
  2 +<div class="sidenav" id="sidebar-nav">
2 {:hook('user_sidenav_before')} 3 {:hook('user_sidenav_before')}
3 <ul class="list-group"> 4 <ul class="list-group">
4 <li class="list-group-heading">{:__('Member center')}</li> 5 <li class="list-group-heading">{:__('Member center')}</li>
@@ -42,6 +42,12 @@ @@ -42,6 +42,12 @@
42 </a> 42 </a>
43 </p> 43 </p>
44 <!-- Success --> 44 <!-- Success -->
  45 + </div>
  46 + </div>
  47 +
  48 + <div class="col-md-9 col-sm-9 col-xs-12">
  49 + <!-- Content -->
  50 + <div class="ui-content">
45 <div class="basicinfo"> 51 <div class="basicinfo">
46 <div class="row"> 52 <div class="row">
47 <div class="col-xs-4 col-md-2">{:__('Money')}</div> 53 <div class="col-xs-4 col-md-2">{:__('Money')}</div>
@@ -68,6 +74,7 @@ @@ -68,6 +74,7 @@
68 </div> 74 </div>
69 </div> 75 </div>
70 </div> 76 </div>
  77 +
71 </div> 78 </div>
72 </div> 79 </div>
73 </div> 80 </div>
@@ -28,13 +28,6 @@ body.is-dialog { @@ -28,13 +28,6 @@ body.is-dialog {
28 border: 1px solid #8B9; 28 border: 1px solid #8B9;
29 background-color: #BEC; 29 background-color: #BEC;
30 } 30 }
31 -.main-header .logo,  
32 -.main-header .navbar {  
33 - -webkit-transition: none;  
34 - -moz-transition: none;  
35 - -o-transition: none;  
36 - transition: none;  
37 -}  
38 .main-header .navbar { 31 .main-header .navbar {
39 position: relative; 32 position: relative;
40 } 33 }
@@ -52,9 +45,6 @@ html.ios-fix body { @@ -52,9 +45,6 @@ html.ios-fix body {
52 .wrapper { 45 .wrapper {
53 height: 100%; 46 height: 100%;
54 } 47 }
55 -#header {  
56 - background: #fff;  
57 -}  
58 .content-wrapper { 48 .content-wrapper {
59 position: relative; 49 position: relative;
60 height: 100%; 50 height: 100%;
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 * Skin: Blue 2 * Skin: Blue
3 * ---------- 3 * ----------
4 */ 4 */
  5 +.skin-blue .main-header {
  6 + background-color: #3c8dbc;
  7 +}
5 .skin-blue .main-header .navbar { 8 .skin-blue .main-header .navbar {
6 background-color: #3c8dbc; 9 background-color: #3c8dbc;
7 } 10 }
@@ -652,6 +655,9 @@ @@ -652,6 +655,9 @@
652 * Skin: Green 655 * Skin: Green
653 * ----------- 656 * -----------
654 */ 657 */
  658 +.skin-green .main-header {
  659 + background-color: #18bc9c;
  660 +}
655 .skin-green .main-header .navbar { 661 .skin-green .main-header .navbar {
656 background-color: #18bc9c; 662 background-color: #18bc9c;
657 } 663 }
@@ -791,6 +797,9 @@ @@ -791,6 +797,9 @@
791 * Skin: Green 797 * Skin: Green
792 * ----------- 798 * -----------
793 */ 799 */
  800 +.skin-green-light .main-header {
  801 + background-color: #18bc9c;
  802 +}
794 .skin-green-light .main-header .navbar { 803 .skin-green-light .main-header .navbar {
795 background-color: #18bc9c; 804 background-color: #18bc9c;
796 } 805 }
@@ -944,6 +953,9 @@ @@ -944,6 +953,9 @@
944 * Skin: Red 953 * Skin: Red
945 * --------- 954 * ---------
946 */ 955 */
  956 +.skin-red .main-header {
  957 + background-color: #e74c3c;
  958 +}
947 .skin-red .main-header .navbar { 959 .skin-red .main-header .navbar {
948 background-color: #e74c3c; 960 background-color: #e74c3c;
949 } 961 }
@@ -1083,6 +1095,9 @@ @@ -1083,6 +1095,9 @@
1083 * Skin: Red 1095 * Skin: Red
1084 * --------- 1096 * ---------
1085 */ 1097 */
  1098 +.skin-red-light .main-header {
  1099 + background-color: #e74c3c;
  1100 +}
1086 .skin-red-light .main-header .navbar { 1101 .skin-red-light .main-header .navbar {
1087 background-color: #e74c3c; 1102 background-color: #e74c3c;
1088 } 1103 }
@@ -1236,6 +1251,9 @@ @@ -1236,6 +1251,9 @@
1236 * Skin: Yellow 1251 * Skin: Yellow
1237 * ------------ 1252 * ------------
1238 */ 1253 */
  1254 +.skin-yellow .main-header {
  1255 + background-color: #f39c12;
  1256 +}
1239 .skin-yellow .main-header .navbar { 1257 .skin-yellow .main-header .navbar {
1240 background-color: #f39c12; 1258 background-color: #f39c12;
1241 } 1259 }
@@ -1375,6 +1393,9 @@ @@ -1375,6 +1393,9 @@
1375 * Skin: Yellow 1393 * Skin: Yellow
1376 * ------------ 1394 * ------------
1377 */ 1395 */
  1396 +.skin-yellow-light .main-header {
  1397 + background-color: #f39c12;
  1398 +}
1378 .skin-yellow-light .main-header .navbar { 1399 .skin-yellow-light .main-header .navbar {
1379 background-color: #f39c12; 1400 background-color: #f39c12;
1380 } 1401 }
@@ -1528,6 +1549,9 @@ @@ -1528,6 +1549,9 @@
1528 * Skin: Purple 1549 * Skin: Purple
1529 * ------------ 1550 * ------------
1530 */ 1551 */
  1552 +.skin-purple .main-header {
  1553 + background-color: #605ca8;
  1554 +}
1531 .skin-purple .main-header .navbar { 1555 .skin-purple .main-header .navbar {
1532 background-color: #605ca8; 1556 background-color: #605ca8;
1533 } 1557 }
@@ -1667,6 +1691,9 @@ @@ -1667,6 +1691,9 @@
1667 * Skin: Purple 1691 * Skin: Purple
1668 * ------------ 1692 * ------------
1669 */ 1693 */
  1694 +.skin-purple-light .main-header {
  1695 + background-color: #605ca8;
  1696 +}
1670 .skin-purple-light .main-header .navbar { 1697 .skin-purple-light .main-header .navbar {
1671 background-color: #605ca8; 1698 background-color: #605ca8;
1672 } 1699 }
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 * Skin: Blue 2 * Skin: Blue
3 * ---------- 3 * ----------
4 */ 4 */
  5 +.skin-blue .main-header {
  6 + background-color: #3c8dbc;
  7 +}
5 .skin-blue .main-header .navbar { 8 .skin-blue .main-header .navbar {
6 background-color: #3c8dbc; 9 background-color: #3c8dbc;
7 } 10 }
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 * Skin: Green 2 * Skin: Green
3 * ----------- 3 * -----------
4 */ 4 */
  5 +.skin-green-light .main-header {
  6 + background-color: #18bc9c;
  7 +}
5 .skin-green-light .main-header .navbar { 8 .skin-green-light .main-header .navbar {
6 background-color: #18bc9c; 9 background-color: #18bc9c;
7 } 10 }
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 * Skin: Green 2 * Skin: Green
3 * ----------- 3 * -----------
4 */ 4 */
  5 +.skin-green .main-header {
  6 + background-color: #18bc9c;
  7 +}
5 .skin-green .main-header .navbar { 8 .skin-green .main-header .navbar {
6 background-color: #18bc9c; 9 background-color: #18bc9c;
7 } 10 }
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 * Skin: Purple 2 * Skin: Purple
3 * ------------ 3 * ------------
4 */ 4 */
  5 +.skin-purple-light .main-header {
  6 + background-color: #605ca8;
  7 +}
5 .skin-purple-light .main-header .navbar { 8 .skin-purple-light .main-header .navbar {
6 background-color: #605ca8; 9 background-color: #605ca8;
7 } 10 }
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 * Skin: Purple 2 * Skin: Purple
3 * ------------ 3 * ------------
4 */ 4 */
  5 +.skin-purple .main-header {
  6 + background-color: #605ca8;
  7 +}
5 .skin-purple .main-header .navbar { 8 .skin-purple .main-header .navbar {
6 background-color: #605ca8; 9 background-color: #605ca8;
7 } 10 }
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 * Skin: Red 2 * Skin: Red
3 * --------- 3 * ---------
4 */ 4 */
  5 +.skin-red-light .main-header {
  6 + background-color: #e74c3c;
  7 +}
5 .skin-red-light .main-header .navbar { 8 .skin-red-light .main-header .navbar {
6 background-color: #e74c3c; 9 background-color: #e74c3c;
7 } 10 }
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 * Skin: Red 2 * Skin: Red
3 * --------- 3 * ---------
4 */ 4 */
  5 +.skin-red .main-header {
  6 + background-color: #e74c3c;
  7 +}
5 .skin-red .main-header .navbar { 8 .skin-red .main-header .navbar {
6 background-color: #e74c3c; 9 background-color: #e74c3c;
7 } 10 }
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 * Skin: Yellow 2 * Skin: Yellow
3 * ------------ 3 * ------------
4 */ 4 */
  5 +.skin-yellow-light .main-header {
  6 + background-color: #f39c12;
  7 +}
5 .skin-yellow-light .main-header .navbar { 8 .skin-yellow-light .main-header .navbar {
6 background-color: #f39c12; 9 background-color: #f39c12;
7 } 10 }
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 * Skin: Yellow 2 * Skin: Yellow
3 * ------------ 3 * ------------
4 */ 4 */
  5 +.skin-yellow .main-header {
  6 + background-color: #f39c12;
  7 +}
5 .skin-yellow .main-header .navbar { 8 .skin-yellow .main-header .navbar {
6 background-color: #f39c12; 9 background-color: #f39c12;
7 } 10 }
1 h2.page-header { 1 h2.page-header {
2 - margin:10px 0 25px 0;  
3 - padding-bottom:15px; 2 + margin: 10px 0 25px 0;
  3 + padding-bottom: 15px;
4 } 4 }
5 .user-baseinfo { 5 .user-baseinfo {
6 - margin-bottom:25px;  
7 -}  
8 -.user-baseinfo table tr td {color:#999;}  
9 -@media (min-width: 767px) {  
10 - .user-center .avatar-text,.user-center .avatar-img {  
11 - height:150px;width:150px;border-radius: 150px;line-height:150px;font-size:70px;  
12 - }  
13 - .user-center .avatar-img {font-size:0;}  
14 - .user-center .avatar-img img {  
15 - height:150px;width:150px;border-radius:150px;  
16 - }  
17 -}  
  6 + margin-bottom: 25px;
  7 +}
  8 +.user-baseinfo table tr td {
  9 + color: #999;
  10 +}
  11 +@media (min-width: 992px) {
  12 + .user-center .avatar-text,
  13 + .user-center .avatar-img {
  14 + height: 150px;
  15 + width: 150px;
  16 + border-radius: 150px;
  17 + line-height: 150px;
  18 + font-size: 70px;
  19 + }
  20 + .user-center .avatar-img {
  21 + font-size: 0;
  22 + }
  23 + .user-center .avatar-img img {
  24 + height: 150px;
  25 + width: 150px;
  26 + border-radius: 150px;
  27 + }
  28 +}
  29 +.sidebar-toggle {
  30 + display: none;
  31 +}
  32 +@media (max-width: 991px) {
  33 + .sidenav {
  34 + position: fixed;
  35 + top: 50px;
  36 + z-index: 1029;
  37 + height: calc(100vh - 50px);
  38 + padding: 20px 0 20px 0;
  39 + min-width: 250px;
  40 + overflow-y: auto;
  41 + overflow-x: hidden;
  42 + width: 250px;
  43 + left: -250px;
  44 + -webkit-transition: all 0.3s ease;
  45 + -moz-transition: all 0.3s ease;
  46 + -o-transition: all 0.3s ease;
  47 + transition: all 0.3s ease;
  48 + }
  49 + .sidebar-toggle {
  50 + display: block;
  51 + position: fixed;
  52 + right: 20px;
  53 + bottom: 70px;
  54 + border-radius: 50%;
  55 + background: #eee;
  56 + font-size: 22px;
  57 + padding: 10px;
  58 + line-height: 30px;
  59 + height: 50px;
  60 + width: 50px;
  61 + text-align: center;
  62 + z-index: 999999;
  63 + }
  64 +}
  65 +body.sidebar-open .sidenav {
  66 + left: 0;
  67 + width: 250px;
  68 + box-shadow: 0 6px 27px rgba(0, 0, 0, 0.075);
  69 +}
  70 +body.sidebar-open .sidebar-toggle i:before {
  71 + content: "\f00d";
  72 +}
  73 +/*# sourceMappingURL=user.css.map */
@@ -67,6 +67,39 @@ define(['fast', 'template', 'moment'], function (Fast, Template, Moment) { @@ -67,6 +67,39 @@ define(['fast', 'template', 'moment'], function (Fast, Template, Moment) {
67 $('body').tooltip({selector: '[data-toggle="tooltip"]'}); 67 $('body').tooltip({selector: '[data-toggle="tooltip"]'});
68 } 68 }
69 $('body').popover({selector: '[data-toggle="popover"]'}); 69 $('body').popover({selector: '[data-toggle="popover"]'});
  70 +
  71 + // 手机端左右滑动切换菜单栏
  72 + if ('ontouchstart' in document.documentElement) {
  73 + var startX, startY, moveEndX, moveEndY, relativeX, relativeY, element;
  74 + element = $('body', document);
  75 + element.on("touchstart", function (e) {
  76 + startX = e.originalEvent.changedTouches[0].pageX;
  77 + startY = e.originalEvent.changedTouches[0].pageY;
  78 + });
  79 + element.on("touchend", function (e) {
  80 + moveEndX = e.originalEvent.changedTouches[0].pageX;
  81 + moveEndY = e.originalEvent.changedTouches[0].pageY;
  82 + relativeX = moveEndX - startX;
  83 + relativeY = moveEndY - startY;
  84 +
  85 + // 判断标准
  86 + //右滑
  87 + if (relativeX > 45) {
  88 + if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
  89 + element.addClass("sidebar-open");
  90 + }
  91 + }
  92 + //左滑
  93 + else if (relativeX < -45) {
  94 + if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
  95 + element.removeClass("sidebar-open");
  96 + }
  97 + }
  98 + });
  99 + }
  100 + $(document).on("click", ".sidebar-toggle", function () {
  101 + $("body").toggleClass("sidebar-open");
  102 + });
70 } 103 }
71 }; 104 };
72 Frontend.api = $.extend(Fast.api, Frontend.api); 105 Frontend.api = $.extend(Fast.api, Frontend.api);
@@ -6758,6 +6758,39 @@ define('frontend',['fast', 'template', 'moment'], function (Fast, Template, Mome @@ -6758,6 +6758,39 @@ define('frontend',['fast', 'template', 'moment'], function (Fast, Template, Mome
6758 $('body').tooltip({selector: '[data-toggle="tooltip"]'}); 6758 $('body').tooltip({selector: '[data-toggle="tooltip"]'});
6759 } 6759 }
6760 $('body').popover({selector: '[data-toggle="popover"]'}); 6760 $('body').popover({selector: '[data-toggle="popover"]'});
  6761 +
  6762 + // 手机端左右滑动切换菜单栏
  6763 + if ('ontouchstart' in document.documentElement) {
  6764 + var startX, startY, moveEndX, moveEndY, relativeX, relativeY, element;
  6765 + element = $('body', document);
  6766 + element.on("touchstart", function (e) {
  6767 + startX = e.originalEvent.changedTouches[0].pageX;
  6768 + startY = e.originalEvent.changedTouches[0].pageY;
  6769 + });
  6770 + element.on("touchend", function (e) {
  6771 + moveEndX = e.originalEvent.changedTouches[0].pageX;
  6772 + moveEndY = e.originalEvent.changedTouches[0].pageY;
  6773 + relativeX = moveEndX - startX;
  6774 + relativeY = moveEndY - startY;
  6775 +
  6776 + // 判断标准
  6777 + //右滑
  6778 + if (relativeX > 45) {
  6779 + if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
  6780 + element.addClass("sidebar-open");
  6781 + }
  6782 + }
  6783 + //左滑
  6784 + else if (relativeX < -45) {
  6785 + if ((Math.abs(relativeX) - Math.abs(relativeY)) > 50) {
  6786 + element.removeClass("sidebar-open");
  6787 + }
  6788 + }
  6789 + });
  6790 + }
  6791 + $(document).on("click", ".sidebar-toggle", function () {
  6792 + $("body").toggleClass("sidebar-open");
  6793 + });
6761 } 6794 }
6762 }; 6795 };
6763 Frontend.api = $.extend(Fast.api, Frontend.api); 6796 Frontend.api = $.extend(Fast.api, Frontend.api);
@@ -43,9 +43,6 @@ body.is-dialog { @@ -43,9 +43,6 @@ body.is-dialog {
43 } 43 }
44 44
45 .main-header { 45 .main-header {
46 - .logo, .navbar {  
47 - .transition(none);  
48 - }  
49 46
50 .navbar { 47 .navbar {
51 position: relative; 48 position: relative;
@@ -69,7 +66,6 @@ html.ios-fix, html.ios-fix body { @@ -69,7 +66,6 @@ html.ios-fix, html.ios-fix body {
69 } 66 }
70 67
71 #header { 68 #header {
72 - background: #fff;  
73 //box-shadow: 0 2px 2px rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.05); 69 //box-shadow: 0 2px 2px rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.05);
74 } 70 }
75 71
@@ -518,3 +518,4 @@ main.content { @@ -518,3 +518,4 @@ main.content {
518 text-align: center; 518 text-align: center;
519 display: inline-block; 519 display: inline-block;
520 } 520 }
  521 +
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 .skin-blue { 10 .skin-blue {
11 //Navbar 11 //Navbar
12 .main-header { 12 .main-header {
  13 + background-color:@light-blue;
13 .navbar { 14 .navbar {
14 .navbar-variant(@light-blue; #fff); 15 .navbar-variant(@light-blue; #fff);
15 .sidebar-toggle { 16 .sidebar-toggle {
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 .skin-green-light { 10 .skin-green-light {
11 //Navbar 11 //Navbar
12 .main-header { 12 .main-header {
  13 + background-color:@green;
13 .navbar { 14 .navbar {
14 .navbar-variant(@green; #fff); 15 .navbar-variant(@green; #fff);
15 .sidebar-toggle { 16 .sidebar-toggle {
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 .skin-green { 10 .skin-green {
11 //Navbar 11 //Navbar
12 .main-header { 12 .main-header {
  13 + background-color:@green;
13 .navbar { 14 .navbar {
14 .navbar-variant(@green; #fff); 15 .navbar-variant(@green; #fff);
15 .sidebar-toggle { 16 .sidebar-toggle {
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 .skin-purple-light { 10 .skin-purple-light {
11 //Navbar 11 //Navbar
12 .main-header { 12 .main-header {
  13 + background-color:@purple;
13 .navbar { 14 .navbar {
14 .navbar-variant(@purple; #fff); 15 .navbar-variant(@purple; #fff);
15 .sidebar-toggle { 16 .sidebar-toggle {
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 .skin-purple { 10 .skin-purple {
11 //Navbar 11 //Navbar
12 .main-header { 12 .main-header {
  13 + background-color:@purple;
13 .navbar { 14 .navbar {
14 .navbar-variant(@purple; #fff); 15 .navbar-variant(@purple; #fff);
15 .sidebar-toggle { 16 .sidebar-toggle {
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 .skin-red-light { 10 .skin-red-light {
11 //Navbar 11 //Navbar
12 .main-header { 12 .main-header {
  13 + background-color:@red;
13 .navbar { 14 .navbar {
14 .navbar-variant(@red; #fff); 15 .navbar-variant(@red; #fff);
15 .sidebar-toggle { 16 .sidebar-toggle {
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 .skin-red { 10 .skin-red {
11 //Navbar 11 //Navbar
12 .main-header { 12 .main-header {
  13 + background-color:@red;
13 .navbar { 14 .navbar {
14 .navbar-variant(@red; #fff); 15 .navbar-variant(@red; #fff);
15 .sidebar-toggle { 16 .sidebar-toggle {
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 .skin-yellow-light { 10 .skin-yellow-light {
11 //Navbar 11 //Navbar
12 .main-header { 12 .main-header {
  13 + background-color:@yellow;
13 .navbar { 14 .navbar {
14 .navbar-variant(@yellow; #fff); 15 .navbar-variant(@yellow; #fff);
15 .sidebar-toggle { 16 .sidebar-toggle {
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 .skin-yellow { 10 .skin-yellow {
11 //Navbar 11 //Navbar
12 .main-header { 12 .main-header {
  13 + background-color:@yellow;
13 .navbar { 14 .navbar {
14 .navbar-variant(@yellow; #fff); 15 .navbar-variant(@yellow; #fff);
15 .sidebar-toggle { 16 .sidebar-toggle {
  1 +h2.page-header {
  2 + margin: 10px 0 25px 0;
  3 + padding-bottom: 15px;
  4 +}
  5 +
  6 +.user-baseinfo {
  7 + margin-bottom: 25px;
  8 +
  9 + table tr td {
  10 + color: #999;
  11 + }
  12 +}
  13 +
  14 +@media (min-width: 992px) {
  15 + .user-center {
  16 + .avatar-text, .avatar-img {
  17 + height: 150px;
  18 + width: 150px;
  19 + border-radius: 150px;
  20 + line-height: 150px;
  21 + font-size: 70px;
  22 + }
  23 +
  24 + .avatar-img {
  25 + font-size: 0;
  26 +
  27 + img {
  28 + height: 150px;
  29 + width: 150px;
  30 + border-radius: 150px;
  31 + }
  32 + }
  33 + }
  34 +
  35 +}
  36 +
  37 +.sidebar-toggle {
  38 + display: none;
  39 +}
  40 +
  41 +@media (max-width: 991px) {
  42 + .sidenav {
  43 + position: fixed;
  44 + top: 50px;
  45 + z-index: 1029;
  46 + height: calc(~ '100vh - 50px');
  47 + padding: 20px 0 20px 0;
  48 + min-width: 250px;
  49 + overflow-y: auto;
  50 + overflow-x: hidden;
  51 + width: 250px;
  52 + left: -250px;
  53 + -webkit-transition: all 0.3s ease;
  54 + -moz-transition: all 0.3s ease;
  55 + -o-transition: all 0.3s ease;
  56 + transition: all 0.3s ease;
  57 + }
  58 +
  59 + .sidebar-toggle {
  60 + display: block;
  61 + position: fixed;
  62 + right: 20px;
  63 + bottom: 70px;
  64 + border-radius: 50%;
  65 + background: #eee;
  66 + font-size: 22px;
  67 + padding: 10px;
  68 + line-height: 30px;
  69 + height: 50px;
  70 + width: 50px;
  71 + text-align: center;
  72 + z-index: 999999;
  73 + }
  74 +}
  75 +
  76 +body.sidebar-open {
  77 + .sidenav {
  78 + left: 0;
  79 + width: 250px;
  80 + box-shadow: 0 6px 27px rgba(0, 0, 0, 0.075);
  81 + }
  82 +
  83 + .sidebar-toggle i:before {
  84 + content: "\f00d";
  85 + }
  86 +}