bootstrap-reset.scss 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. /* ========================================================================
  2. Component: bootstrap-reset
  3. ========================================================================== */
  4. // Use this file to reset simple bootstrap styles
  5. // instead of modifying the core files
  6. // Makes easy to update new framework versions
  7. // --------------------------------------------------
  8. *:not(.react-grid-Cell):focus {
  9. outline: 0 !important;
  10. }
  11. a {
  12. outline: none !important;
  13. &.text-muted {
  14. &:hover,
  15. &:focus {
  16. color: darken($text-muted, 10%);
  17. }
  18. }
  19. }
  20. hr {
  21. border-top: 1px solid $gray-light;
  22. }
  23. // custom element
  24. [data-now] {
  25. display: inline-block;
  26. }
  27. .badge {
  28. padding: 0.1875rem 0.4375rem;
  29. font-size: 0.75rem;
  30. border-radius: 0.625rem;
  31. &.badge-warning {
  32. color: #fff !important;
  33. }
  34. &.badge-secondary {
  35. background-color: $gray-dark;
  36. color: #fff;
  37. }
  38. }
  39. .list-group {
  40. line-height: 1.3;
  41. .list-group-item {
  42. padding: 10px;
  43. color: #555;
  44. &.active {
  45. color: #fff;
  46. .badge {
  47. background-color: #fff;
  48. color: $primary;
  49. }
  50. }
  51. .card>& {
  52. border: 0;
  53. }
  54. }
  55. }
  56. .list-group+.card-footer {
  57. border-top: 0;
  58. }
  59. .page-header {
  60. padding-bottom: 0.59375rem;
  61. margin: 2.625rem 0 1.3125rem;
  62. border-bottom: 1px solid $gray-light;
  63. }
  64. .card {
  65. border-color: transparent;
  66. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  67. .card-header {
  68. border-bottom: 0;
  69. padding: 0.625rem 0.9375rem;
  70. background-color: transparent;
  71. .card-title {
  72. margin-bottom: 0;
  73. font-size: 1rem;
  74. }
  75. a {
  76. text-decoration: none !important;
  77. }
  78. }
  79. }
  80. .card-body {
  81. padding: 20px; //15px
  82. }
  83. .card-footer {
  84. padding: 0.625rem 0.9375rem;
  85. }
  86. .card-default {
  87. border-top-width: 3px;
  88. border-color: $card-default-border-color;
  89. .card-header {
  90. background-color: #fff;
  91. }
  92. }
  93. .well {
  94. border: 1px solid $gray;
  95. }
  96. .jumbotron {
  97. border: 1px solid $gray;
  98. background-color: #fff;
  99. @include media-breakpoint-up(md) {
  100. padding: $jumbotron-padding (
  101. $jumbotron-padding/2
  102. );
  103. }
  104. }
  105. .nav-tabs>.nav-item>.nav-link {
  106. font-weight: bold;
  107. color: $body-color;
  108. background-color: $gray-lighter;
  109. margin: 0;
  110. border: 1px solid $gray;
  111. border-radius: 0;
  112. padding: 10px 20px;
  113. &.active {
  114. background-color: $nav-tabs-link-active-bg;
  115. &,
  116. &:hover,
  117. &:focus {
  118. //color: inherit;
  119. border-bottom-color: #fff;
  120. }
  121. }
  122. }
  123. .tab-content {
  124. padding: 10px 20px;
  125. border-style: solid;
  126. border-width: 0 1px 1px 1px;
  127. border-color: $gray;
  128. .nav-pills+& {
  129. border: 0;
  130. padding: 0;
  131. }
  132. .p-0 & {
  133. padding: 0 !important
  134. }
  135. }
  136. .btn {
  137. border-radius: 3px;
  138. font-size: 13px;
  139. -webkit-appearance: none;
  140. outline: none !important; // padding: 0.375rem 1rem;
  141. @include transition(all .1s);
  142. &.btn-link {
  143. box-shadow: none;
  144. border: 0;
  145. }
  146. .input-group & {
  147. font-size: 14px;
  148. border-color: $input-border-color;
  149. }
  150. .input-group .form-control-sm+.input-group-btn & {
  151. font-size: 0.8125rem;
  152. padding: 0.3125rem 0.625rem;
  153. margin-left: -1px;
  154. border-top-left-radius: 0;
  155. border-bottom-left-radius: 0;
  156. }
  157. }
  158. // Override button styles
  159. .btn {
  160. &.btn-warning {
  161. color: #fff;
  162. }
  163. &.btn-outline-warning:not(:disabled) {
  164. &:hover,
  165. &:active {
  166. color: #fff;
  167. }
  168. }
  169. }
  170. .btn-secondary {
  171. background-color: $btn-secondary-bg;
  172. border-color: $btn-secondary-border;
  173. color: $btn-secondary-color;
  174. &:hover {
  175. background-color: #f5f5f5;
  176. }
  177. // active state override
  178. &:not(:disabled):not(.disabled):active,
  179. &:not(:disabled):not(.disabled).active,
  180. .show>&.dropdown-toggle {
  181. background-color: #f5f5f5;
  182. box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  183. }
  184. }
  185. .btn-outline-secondary {
  186. border-color: $btn-secondary-border !important;
  187. color: $btn-secondary-color;
  188. &:hover {
  189. color: $btn-secondary-color;
  190. background-color: #f5f5f5 !important;
  191. }
  192. &:focus {
  193. box-shadow: 0 0 0 0.2rem rgba($btn-secondary-border, 0.5);
  194. }
  195. }
  196. span.btn {
  197. -webkit-appearance: none !important;
  198. }
  199. // FORMS
  200. .form-control {
  201. box-shadow: 0 0 0 #000 !important;
  202. font-size: 0.875rem; //14px
  203. &:focus {
  204. border-color: $input-focus-border-color;
  205. }
  206. }
  207. .form-control-sm,
  208. select.form-control-sm {
  209. font-size: .75rem;
  210. height: 31px;
  211. }
  212. .custom-select {
  213. -webkit-appearance: none;
  214. }
  215. .custom-control-label::before,
  216. .custom-control-label::after {
  217. top: 0.19rem;
  218. }
  219. .custom-control-label::before {
  220. border: 1px solid $gray;
  221. }
  222. fieldset {
  223. padding-bottom: 20px;
  224. border-bottom: 1px dashed #eee;
  225. margin-bottom: 20px;
  226. &.last-child,
  227. &:last-child {
  228. border-bottom: 0;
  229. }
  230. .form-group {
  231. margin-bottom: 0;
  232. }
  233. }
  234. .input-group-text {
  235. font-size: .875rem; // 14px
  236. }
  237. @include media-breakpoint-down(sm) {
  238. // Remove Input Shadows on iPad
  239. input[type="text"],
  240. input[type="email"],
  241. input[type="search"],
  242. input[type="password"] {
  243. -webkit-appearance: none;
  244. }
  245. }
  246. // TABLES
  247. .table-responsive {
  248. overflow-y: hidden;
  249. }
  250. .table {
  251. // Bottom align for column headings
  252. >thead>tr>th {
  253. border-bottom-width: 0;
  254. }
  255. // Account for multiple tbody instances
  256. >tbody+tbody {
  257. border-bottom-width: 1px;
  258. }
  259. .form-control {
  260. max-width: 100%;
  261. }
  262. }
  263. .table-bordered {
  264. >thead>tr {
  265. >th,
  266. >td {
  267. border-bottom-width: 1px;
  268. }
  269. }
  270. }
  271. .progress {
  272. @include box-shadow(0 0 0 #000);
  273. border-radius: $border-radius-sm;
  274. border: 1px solid $progress-bg;
  275. background-color: #fff;
  276. .progress-bar {
  277. @include box-shadow(0 0 0 #000);
  278. }
  279. }
  280. // Popover
  281. // --------------------------------------------------
  282. .popover {
  283. box-shadow: 0 0 0 #000;
  284. border-color: #eee;
  285. border-bottom: 2px solid $gray-light;
  286. border-radius: $border-radius-sm;
  287. .popover-title {
  288. border: 0;
  289. }
  290. }
  291. // NAV
  292. .nav {
  293. &.nav-pills {
  294. .active>a {
  295. background-color: $primary;
  296. }
  297. }
  298. }
  299. // DROPDOWN
  300. .dropdown-menu {
  301. border-radius: $border-radius-sm;
  302. font-size: 14px;
  303. padding: 0.3125rem 0;
  304. box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px;
  305. border-color: $dropdown-border-color;
  306. .dropdown-item {
  307. line-height: 1.52857143;
  308. padding: 0.1875rem 1.25rem;
  309. }
  310. }
  311. .dropdown-header {
  312. color: #a1a2a3;
  313. }
  314. .navbar-top .navbar-nav>.active>a {
  315. color: #999;
  316. &:hover,
  317. &:focus {
  318. color: #d1d2d3;
  319. }
  320. }
  321. .navbar-default .navbar-nav .open .dropdown-menu>li>a {
  322. color: #666;
  323. &:hover,
  324. &:focus {
  325. color: #222;
  326. }
  327. }
  328. // CAROUSEL
  329. .carousel {
  330. .carousel-indicators {
  331. bottom: 0;
  332. }
  333. .carousel-control {
  334. &.left,
  335. &.right {
  336. background-image: none;
  337. }
  338. // Add support for font awesome
  339. em {
  340. position: absolute;
  341. top: 50%;
  342. left: 50%;
  343. z-index: 5;
  344. display: inline-block;
  345. width: 20px;
  346. height: 20px;
  347. margin-top: -10px;
  348. margin-left: -10px;
  349. }
  350. }
  351. }
  352. // ALERT
  353. @each $color,
  354. $value in $theme-colors {
  355. .alert-#{$color} {
  356. @include alert-variant($value, $value, #fff);
  357. }
  358. }
  359. .alert-secondary {
  360. color: $body-color;
  361. border-color: $gray-light;
  362. }
  363. // fix for ie9 (dropdwon no showing)
  364. .topnavbar,
  365. .navbar,
  366. .navbar .dropdown-menu {
  367. filter: none !important;
  368. }
  369. .badge-red {
  370. color: #fff;
  371. background-color: #FD4233;
  372. }
  373. a.badge-info:hover,
  374. a.badge-info:focus {
  375. color: #fff;
  376. background-color: #FD4233;
  377. }
  378. a.badge-info:focus,
  379. a.badge-info.focus {
  380. outline: 0;
  381. box-shadow: 0 0 0 0.2rem #FD4233;
  382. }
  383. .badge-green {
  384. color: #fff;
  385. background-color: #1EA457;
  386. }
  387. a.badge-info:hover,
  388. a.badge-info:focus {
  389. color: #fff;
  390. background-color: #1EA457;
  391. }
  392. a.badge-info:focus,
  393. a.badge-info.focus {
  394. outline: 0;
  395. box-shadow: 0 0 0 0.2rem #1EA457;
  396. }
  397. .cursor-pointer {
  398. cursor: pointer;
  399. }