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.

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