two-columns.layout.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. @import '../../styles/themes';
  2. @import '~bootstrap/scss/mixins/breakpoints';
  3. @import '~@nebular/theme/styles/global/breakpoints';
  4. @include nb-install-component() {
  5. nb-layout-column.small {
  6. flex: 0.15 !important;
  7. }
  8. nb-sidebar.settings-sidebar {
  9. $sidebar-width: 7.5rem;
  10. transition: width 0.3s ease;
  11. width: $sidebar-width;
  12. overflow: hidden;
  13. &.collapsed {
  14. width: 0;
  15. /deep/ .main-container {
  16. width: 0;
  17. .scrollable {
  18. width: $sidebar-width;
  19. padding: 1.25rem;
  20. }
  21. }
  22. }
  23. /deep/ .main-container {
  24. width: $sidebar-width;
  25. background: nb-theme(color-bg);
  26. transition: width 0.3s ease;
  27. overflow: hidden;
  28. .scrollable {
  29. width: $sidebar-width;
  30. }
  31. @include nb-for-theme(cosmic) {
  32. background: nb-theme(layout-bg);
  33. }
  34. }
  35. }
  36. nb-sidebar.menu-sidebar {
  37. margin-top: nb-theme(sidebar-header-gap);
  38. @include nb-for-theme(corporate) {
  39. margin-top: 0;
  40. }
  41. /deep/ .main-container {
  42. height:
  43. calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
  44. @include nb-ltr(border-top-right-radius, nb-theme(radius));
  45. @include nb-rtl(border-top-left-radius, nb-theme(radius));
  46. @include nb-for-theme(corporate) {
  47. border: 1px solid nb-theme(separator);
  48. height:
  49. calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
  50. }
  51. }
  52. /deep/ .scrollable {
  53. @include nb-for-theme(corporate) {
  54. padding-top: 0;
  55. .menu-item:first-child {
  56. border-top: none;
  57. }
  58. }
  59. }
  60. /deep/ nb-sidebar-header {
  61. padding-bottom: 0.5rem;
  62. text-align: center;
  63. }
  64. background: transparent;
  65. .main-btn {
  66. padding: 0.75rem 2.5rem;
  67. margin-top: -2rem;
  68. font-weight: bold;
  69. transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
  70. @include nb-for-theme(corporate) {
  71. border-radius: nb-theme(radius);
  72. }
  73. i {
  74. font-size: 2rem;
  75. text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  76. }
  77. span {
  78. @include nb-ltr(padding-left, 0.25rem);
  79. @include nb-rtl(padding-right, 0.25rem);
  80. }
  81. i, span {
  82. vertical-align: middle;
  83. }
  84. }
  85. &.compacted {
  86. /deep/ nb-sidebar-header {
  87. padding-left: 0;
  88. padding-right: 0;
  89. }
  90. .main-btn {
  91. width: 46px;
  92. height: 44px;
  93. padding: 0.375rem;
  94. border-radius: 5px;
  95. transition: none;
  96. span {
  97. display: none;
  98. }
  99. }
  100. }
  101. }
  102. @include media-breakpoint-down(xs) {
  103. .main-content {
  104. padding: 0.75rem !important;
  105. }
  106. }
  107. @include media-breakpoint-down(sm) {
  108. nb-sidebar.menu-sidebar {
  109. margin-top: 0;
  110. /deep/ .main-container {
  111. height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
  112. @include nb-ltr(border-top-right-radius, 0);
  113. @include nb-rtl(border-top-left-radius, 0);
  114. .scrollable {
  115. padding-top: 0;
  116. }
  117. }
  118. }
  119. .main-btn {
  120. display: none;
  121. }
  122. }
  123. }