You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

251 lines
4.9 KiB

7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
  1. body {
  2. height:100vh;
  3. }
  4. $header-height : 50px;
  5. $nav-height : 59px;
  6. #header {
  7. position:relative;
  8. @include display-flex();
  9. height:$header-height;
  10. background: #5399ea; /* Old browsers */
  11. background: -moz-linear-gradient(left, #5399ea 0%, #5ec0cc 100%); /* FF3.6-15 */
  12. background: -webkit-linear-gradient(left, #5399ea 0%,#5ec0cc 100%); /* Chrome10-25,Safari5.1-6 */
  13. background: linear-gradient(to right, #5399ea 0%,#5ec0cc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  14. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5399ea', endColorstr='#5ec0cc',GradientType=1 ); /* IE6-9 */
  15. padding:0 30px;
  16. z-index:101;
  17. align-items: center;
  18. .logo {
  19. display:block;
  20. color:#fff;
  21. font-size:19px;
  22. }
  23. .top-navs {
  24. -ms-flex:1;
  25. -webkit-flex:1;
  26. flex:1;
  27. }
  28. .btn-top-action {
  29. padding:14px;
  30. cursor:pointer;
  31. background:transparent;
  32. position:relative;
  33. color:#fff;
  34. border:0 none;
  35. outline:none !important;
  36. font-size:13px;
  37. i {
  38. font-size:20px;
  39. vertical-align: middle;
  40. }
  41. }
  42. .btn-user {
  43. display:inline-block;
  44. .btn-top-action {
  45. &:after {
  46. content:"\f107";
  47. font-family:'Font Awesome 5 Pro';
  48. position:absolute;
  49. right:0px;
  50. top:50%;
  51. -webkit-transform: translateY(-50%);
  52. -moz-transform: translateY(-50%);
  53. -ms-transform: translateY(-50%);
  54. -o-transform: translateY(-50%);
  55. transform: translateY(-50%);
  56. }
  57. }
  58. }
  59. }
  60. #nav {
  61. position:relative;
  62. z-index: 100;
  63. width: 100%;
  64. height: $nav-height;
  65. background-color: #ffffff;
  66. border-bottom: 1px solid #e6e6e6;
  67. padding:0 30px;
  68. .main-navigation {
  69. @include display-flex();
  70. height:$nav-height;
  71. padding:0;
  72. margin:0;
  73. list-style:none;
  74. flex-wrap:wrap;
  75. > li {
  76. display:block;
  77. position:relative;
  78. margin-right:30px;
  79. > a {
  80. @include display-flex();
  81. height:$nav-height;
  82. justify-content: center;
  83. align-items: center;
  84. color:#979797;
  85. font-size:0;
  86. font-weight:500;
  87. padding-left:0;
  88. padding-right:45px;
  89. position:relative;
  90. font-family: NanumSquare;
  91. &:after {
  92. content:"\f107";
  93. font-family:'Font Awesome 5 Pro';
  94. position:absolute;
  95. font-size:15px;
  96. right:15px;
  97. top:50%;
  98. -webkit-transform: translateY(-50%);
  99. -moz-transform: translateY(-50%);
  100. -ms-transform: translateY(-50%);
  101. -o-transform: translateY(-50%);
  102. transform: translateY(-50%);
  103. }
  104. i, span {
  105. font-size:15px;
  106. }
  107. i + span {
  108. margin-left:6px;
  109. }
  110. }
  111. &.active {
  112. > a {
  113. color:#282828;
  114. }
  115. }
  116. > ul {
  117. height:0;
  118. visibility: hidden;
  119. opacity:0;
  120. z-index:101;
  121. position:absolute;
  122. top:100%;
  123. left:0;
  124. width:130px;
  125. background:#fff;
  126. list-style:none;
  127. padding:0;
  128. margin:0;
  129. border:1px solid #767676;
  130. li {
  131. display:block;
  132. a {
  133. display:block;
  134. padding:12px 15px;
  135. font-size:13px;
  136. color:#282828;
  137. cursor:pointer;
  138. &:hover {
  139. background-color:#f4f8f9;
  140. }
  141. }
  142. &.active {
  143. a {
  144. background-color:#f4f8f9;
  145. color:$color-primary;
  146. }
  147. }
  148. }
  149. }
  150. &:hover {
  151. > a {
  152. color:#282828;
  153. }
  154. > ul {
  155. height:auto;
  156. visibility: visible;
  157. opacity:1;
  158. -webkit-transition: visibility .3s, opacity .3s;
  159. -moz-transition: visibility .3s, opacity .3s;
  160. -ms-transition: visibility .3s, opacity .3s;
  161. -o-transition: visibility .3s, opacity .3s;
  162. transition: visibility .3s, opacity .3s;
  163. }
  164. }
  165. }
  166. }
  167. }
  168. #contents {
  169. padding:30px;
  170. height: calc(100vh - #{$header-height} - #{$nav-height});
  171. overflow-y:auto;
  172. }
  173. .page-header {
  174. margin-bottom:15px;
  175. .page-title {
  176. font-size:23px;
  177. font-weight:500;
  178. color:#282828;
  179. small {
  180. color:#767676;
  181. font-size:12px;
  182. margin-left:15px;
  183. }
  184. }
  185. }
  186. .box {
  187. position:relative;
  188. padding:30px;
  189. background:#fff;
  190. border-radius:4px;
  191. border:1px solid #e6e6e6;
  192. .box-header {
  193. border-bottom:1px solid #e6e6e6;
  194. margin-bottom:15px;
  195. margin-top:-30px;
  196. position:relative;
  197. height:57px;
  198. @include clear-fix-after();
  199. .box-title {
  200. float:left;
  201. color:$brand-primary;
  202. font-size:15px;
  203. font-weight:500;
  204. padding:18px 0;
  205. small {
  206. color:#767676;
  207. font-weight:400;
  208. font-size:13px;
  209. }
  210. }
  211. .box-action {
  212. float:right;
  213. @include display-flex();
  214. height:57px;
  215. align-items: center;
  216. }
  217. }
  218. }