SHARE
TWEET

TureNavigationDemo

a guest Jan 18th, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import "custom-variables";
  2. /* ********  REGION TOP BAR  *********** */
  3.  
  4. /* ตั้งค่าขนาด top bar */
  5. .region-topbar{
  6.     height: 85px
  7. }
  8. .layout-atlas .region-topbar .topbar-content{
  9.     height:85px
  10. }
  11.  
  12. /* ลบแถบสี topbar */
  13. .layout-atlas .region-topbar::before {
  14.     display: none !important;
  15. }
  16.  
  17. /* ปรับระยะ Main Logo */
  18. .layout-atlas .region-topbar .navbar-brand img {
  19.     margin-left: 15px;
  20. }
  21.  
  22. /* ********  SIDE NAVIGAION  *********** */
  23.  
  24. /* สีของ side bar navigator */
  25. .layout-atlas .region-sidebar {
  26.     background-color: #2c2e3d;
  27. }  
  28.  
  29. /* ขนาดของ icon หน้าเมนู */
  30. .mx-navigationtree .navbar-inner > ul > li > a img{
  31.     width: inherit !important; /* คืนค่า เขียนทับค่า default ของ theme */
  32.     max-width: 36px; /* ตั้งค่าความข้างของ icon - ต้องใช้ภาพขนาดกว้างอย่างน้อย 36px */
  33.     height: auto; /* ให้ความสูงคำนวณตามสัดส่วนเดิม */
  34.     margin: 0 20px; /* ระยะห่างด้านข้างของ icon ส่วนนี้ทำให้ icon จัดอยู่ตรงกลางแถบ sidebar ได้ */
  35. }
  36.  
  37. /* ความกว้างและสี background ของแถบ sidabar navigator */
  38. .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar {
  39.     width: 75px !important;
  40.     background-color: #2c2e3d;
  41. }
  42.  
  43. /* ความสูงของแต่ละเมนู, สี background แต่ละเมนู, สีฟอนต์ของเมนู, สีขอบของเมนู*/
  44. .layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree .navbar-inner > ul > li > a {
  45.     height: 49px;
  46.     border-color: transparent; /* ลบเส้นขั้นระหว่างเมนู */
  47.     color:#525672;
  48.     background-color: #2c2e3d;
  49.     padding-left: 0;
  50. }
  51.  
  52. /* ตั้งค่าความกว้างของ hamburger toggle ให้เท่ากับ ความข้าง sidenav */
  53. .layout-atlas-responsive-default .region-sidebar .toggle-btn{
  54.     width: 100%;
  55.     height: 85px;
  56. }
  57.  
  58. /* ตั้งค่าความกว้างและความสูงของปุ่ม hamburger toggle ให้เท่ากับ ความกว้าง sidenav */
  59. .layout-atlas-responsive-default .region-sidebar .toggle-btn{
  60.     width: 100%;
  61.     height: 85px;
  62. }
  63.  
  64. /* ตั้งค่า hamberger icon - เฉพาะตัว glyph */
  65. .layout-atlas .toggle-btn .glyphicon.glyphicon-menu-hamburger {
  66.     font-size: 24px;
  67.     display: block;
  68.     text-align: left;
  69.     margin-left: 11px;
  70.     color:#525672;
  71. }
  72.  
  73. /* hover อักษรในแต่ละเมนู */
  74. .layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper>.mx-navigationtree .navbar-inner>ul>li:hover>a{
  75.     color:white;
  76.     transition: 0.25s;
  77. }
  78. .layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper>.mx-navigationtree .navbar-inner>ul>li >a{
  79.     transition: 0.25s;
  80. }
  81.  
  82. /* hover ไอคอน สีขาวเท่านั้น ใช้เทคนิคเพิ่ม brightness ให้กับ icon โดยใช้ css */
  83. .layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper>.mx-navigationtree .navbar-inner>ul>li:hover  img{
  84.     -webkit-filter: brightness(0) invert(1);
  85.     filter: brightness(0) invert(1);
  86.     transition: 0.25s;
  87. }
  88.  
  89. .layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper>.mx-navigationtree .navbar-inner>ul>li  img{
  90.     transition: 0.25s;
  91. }
  92.  
  93. /* hover ของ hamburger */
  94. .layout-atlas .toggle-btn .glyphicon.glyphicon-menu-hamburger:hover{
  95.     color:white;    transition: 0.25s;
  96. }
  97.  
  98. .layout-atlas .toggle-btn .glyphicon.glyphicon-menu-hamburger{
  99.     transition: 0.25s;
  100. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top