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.

329 lines
5.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
  1. .form-control {
  2. display: block;
  3. width: 100%;
  4. height: 38px;
  5. padding: $input-btn-padding-y ( $input-btn-padding-x / 2);
  6. font-size: $input-btn-font-size;
  7. font-weight: $font-weight-base;
  8. line-height: $input-btn-line-height;
  9. color: #495057;
  10. background-color: #fff;
  11. background-clip: padding-box;
  12. border: 1px solid #ced4da;
  13. border-radius: $input-btn-border-radius;
  14. box-shadow:none;
  15. @include transition();
  16. &::-ms-expand {
  17. background-color: transparent;
  18. border: 0;
  19. }
  20. &:focus {
  21. border-color: #80bdff;
  22. outline: 0;
  23. }
  24. &::placeholder {
  25. color: #6c757d;
  26. opacity: 1;
  27. }
  28. &:disabled,
  29. &[readonly] {
  30. background-color: #e9ecef;
  31. opacity: 1;
  32. }
  33. &.form-control-sm {
  34. height: 34px;
  35. padding: $input-btn-padding-y-sm ($input-btn-padding-x-sm /2 );
  36. font-size: $input-btn-font-size-sm;
  37. line-height: $input-btn-line-height-sm;
  38. border-radius:$input-btn-border-radius-sm;
  39. }
  40. &.form-control-xs {
  41. height: 26px;
  42. padding: $input-btn-padding-y-xs ($input-btn-padding-x-xs /2 );
  43. font-size: $input-btn-font-size-xs;
  44. line-height: $input-btn-line-height-xs;
  45. border-radius:$input-btn-border-radius-xs;
  46. }
  47. &.form-control-lg {
  48. height: 48px;
  49. padding: $input-btn-padding-y-lg ( $input-btn-padding-x-lg / 2);
  50. font-size: $input-btn-font-size-lg;
  51. line-height: $input-btn-line-height-lg;
  52. border-radius:$input-btn-border-radius-lg;
  53. }
  54. }
  55. select.form-control {
  56. &:focus::-ms-value {
  57. color: #495057;
  58. background-color: #fff;
  59. }
  60. }
  61. .bottom-actions {
  62. @include display-flex();
  63. align-items: center;
  64. .left,
  65. .right {
  66. -webkit-flex:1;
  67. -ms-flex:1;
  68. flex:1;
  69. }
  70. .center {
  71. -webkit-flex:2;
  72. -ms-flex:2;
  73. flex:2;
  74. }
  75. .left {
  76. text-align:left;
  77. }
  78. .right {
  79. text-align:right;
  80. }
  81. }
  82. // 체크박스
  83. .w-check {
  84. position:relative;
  85. display:inline-block;
  86. align-items: center;
  87. vertical-align: middle;
  88. & + .w-check {
  89. margin-left:15px;
  90. }
  91. span {
  92. @include display-flex();
  93. position: relative;
  94. cursor: pointer;
  95. -webkit-user-select: none;
  96. -moz-user-select: none;
  97. -ms-user-select: none;
  98. align-items: center;
  99. height:34px;
  100. &:before {
  101. content:"";
  102. @include display-flex();
  103. font-family: "Font Awesome 5 Pro";
  104. width:18px;
  105. height:18px;
  106. border:1px solid #e9e9e9;
  107. align-items: center;
  108. justify-content: center;
  109. margin-right:5px;
  110. }
  111. }
  112. input[type=checkbox] {
  113. position: absolute;
  114. width:1px;
  115. height:1px;
  116. padding:0;
  117. margin:-1px;
  118. overflow: hidden;
  119. clip:rect(0,0,0,0);
  120. border: 0;
  121. &:checked + span:before {
  122. content:"\f00c";
  123. border-color:$color-primary;
  124. color:$color-primary;
  125. }
  126. }
  127. }
  128. //버튼그룹
  129. .ax-button-group {
  130. display: table;
  131. width: 100%;
  132. min-height: 40px;
  133. .left,
  134. .right {
  135. display: table-cell;
  136. vertical-align: bottom;
  137. padding: 0 5px 10px 5px;
  138. h1, h2, h3, h4, h5, h6 {
  139. line-height: 26px;
  140. }
  141. }
  142. .left {
  143. text-align:left;
  144. }
  145. .right {
  146. text-align:right;
  147. }
  148. &.ax-button-group-bottom {
  149. .left, .right {
  150. padding: 0px;
  151. vertical-align:middle;
  152. }
  153. &.sm {
  154. min-height: 30px;
  155. .left, .right {
  156. padding: 0 5px 7px 5px;
  157. }
  158. }
  159. .pagination {
  160. margin: 0px;
  161. }
  162. }
  163. }
  164. [data-ax-tbl] {
  165. font-size: 0.9em;
  166. background: #fff;
  167. border-top: 1px solid #D8D8D8;
  168. border-right: 1px solid #D8D8D8;
  169. border-left: 1px solid #D8D8D8;
  170. position: relative;
  171. [data-ax-tr] {
  172. border-bottom: 1px solid #D8D8D8;
  173. @include display-flex();
  174. [data-ax-td] {
  175. float: left;
  176. @include display-flex();
  177. table-layout: fixed;
  178. width: 300px;
  179. vertical-align: top;
  180. min-height: 40px;
  181. &.width-auto {
  182. width:auto;
  183. }
  184. &.width-100 {
  185. width:100%;
  186. }
  187. &.right {
  188. margin-left:auto;
  189. text-align:right;
  190. }
  191. [data-ax-td-label] {
  192. @include display-flex();
  193. align-items: center;
  194. justify-content: center;
  195. width: 100px;
  196. padding: 7px;
  197. @include background-gradient(#fbfbfb, #f6f6f6);
  198. border-right: 1px solid #D8D8D8;
  199. vertical-align: middle;
  200. text-align: center;
  201. color: #363636;
  202. fieldset[readonly] &,
  203. fieldset[disabled] & {
  204. color: #c8c8c8;
  205. }
  206. a {
  207. color: #363636;
  208. }
  209. &:empty {
  210. background:#fff;
  211. border-right-color:transparent;
  212. }
  213. }
  214. + [data-ax-td] [data-ax-td-label] { border-left: 1px solid #D8D8D8 }
  215. [data-ax-td-wrap] {
  216. display:block;
  217. padding: 7px 7px;
  218. -webkit-flex:1;
  219. -ms-flex:1;
  220. flex:1;
  221. color: #68717b;
  222. line-height: 1em;
  223. a {
  224. color: #68717b;
  225. &:after {
  226. content: ' ';
  227. }
  228. }
  229. .form-control,
  230. .btn {
  231. vertical-align: middle;
  232. }
  233. .form-control {
  234. font-size:1em;
  235. &.inline-block {
  236. display: inline-block;
  237. width: auto;
  238. }
  239. }
  240. textarea.form-control {
  241. resize:vertical;
  242. }
  243. .form-control-static {
  244. padding: 7px;
  245. min-height:0px;
  246. }
  247. .radio-inline,
  248. .checkbox-inline {
  249. line-height: 21px;
  250. padding: 0;
  251. display: inline-block;
  252. input[type="checkbox"],
  253. input[type="radio"] {
  254. display: inline-block;
  255. position: static;
  256. margin: 0 3px;
  257. vertical-align: middle;
  258. }
  259. }
  260. .radio-inline {
  261. margin-top:5px;
  262. + .radio-inline {
  263. margin-top:5px;
  264. }
  265. }
  266. fieldset[readonly] &,
  267. fieldset[disabled] & {
  268. color: #c8c8c8;
  269. .form-control {
  270. background-color: #eee;
  271. opacity: 1;
  272. }
  273. }
  274. }
  275. }
  276. }
  277. }