bootstrap-reset.scss 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  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 ($jumbotron-padding/2);
  101. }
  102. }
  103. .nav-tabs>.nav-item>.nav-link {
  104. font-weight: bold;
  105. color: $body-color;
  106. background-color: $gray-lighter;
  107. margin: 0;
  108. border: 1px solid $gray;
  109. border-radius: 0;
  110. padding: 10px 20px;
  111. &.active {
  112. background-color: $nav-tabs-link-active-bg;
  113. &,
  114. &:hover,
  115. &:focus {
  116. //color: inherit;
  117. border-bottom-color: #fff;
  118. }
  119. }
  120. }
  121. .tab-content {
  122. padding: 10px 20px;
  123. border-style: solid;
  124. border-width: 0 1px 1px 1px;
  125. border-color: $gray;
  126. .nav-pills+& {
  127. border: 0;
  128. padding: 0;
  129. }
  130. .p-0 & {
  131. padding: 0 !important
  132. }
  133. }
  134. .btn {
  135. border-radius: 3px;
  136. font-size: 13px;
  137. -webkit-appearance: none;
  138. outline: none !important; // padding: 0.375rem 1rem;
  139. @include transition(all .1s);
  140. &.btn-link {
  141. box-shadow: none;
  142. border: 0;
  143. }
  144. .input-group & {
  145. font-size: 14px;
  146. border-color: $input-border-color;
  147. }
  148. .input-group .form-control-sm+.input-group-btn & {
  149. font-size: 0.8125rem;
  150. padding: 0.3125rem 0.625rem;
  151. margin-left: -1px;
  152. border-top-left-radius: 0;
  153. border-bottom-left-radius: 0;
  154. }
  155. }
  156. // Override button styles
  157. .btn {
  158. &.btn-warning {
  159. color: #fff;
  160. }
  161. &.btn-outline-warning:not(:disabled) {
  162. &:hover, &:active {
  163. color: #fff;
  164. }
  165. }
  166. }
  167. .btn-secondary {
  168. background-color: $btn-secondary-bg;
  169. border-color: $btn-secondary-border;
  170. color: $btn-secondary-color;
  171. &:hover {
  172. background-color: #f5f5f5;
  173. } // active state override
  174. &:not(:disabled):not(.disabled):active,
  175. &:not(:disabled):not(.disabled).active,
  176. .show>&.dropdown-toggle {
  177. background-color: #f5f5f5;
  178. box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  179. }
  180. }
  181. .btn-outline-secondary {
  182. border-color: $btn-secondary-border !important;
  183. color: $btn-secondary-color;
  184. &:hover {
  185. color: $btn-secondary-color;
  186. background-color: #f5f5f5 !important;
  187. }
  188. &:focus {
  189. box-shadow: 0 0 0 0.2rem rgba($btn-secondary-border, 0.5);
  190. }
  191. }
  192. span.btn { -webkit-appearance: none !important; }
  193. // FORMS
  194. .form-control {
  195. box-shadow: 0 0 0 #000 !important;
  196. font-size: 0.875rem; //14px
  197. &:focus {
  198. border-color: $input-focus-border-color;
  199. }
  200. }
  201. .form-control-sm,
  202. select.form-control-sm {
  203. font-size: .75rem;
  204. height: 31px;
  205. }
  206. .custom-select {
  207. -webkit-appearance: none;
  208. }
  209. .custom-control-label::before,
  210. .custom-control-label::after {
  211. top: 0.19rem;
  212. }
  213. .custom-control-label::before {
  214. border: 1px solid $gray;
  215. }
  216. fieldset {
  217. padding-bottom: 20px;
  218. border-bottom: 1px dashed #eee;
  219. margin-bottom: 20px;
  220. &.last-child,
  221. &:last-child {
  222. border-bottom: 0;
  223. }
  224. .form-group {
  225. margin-bottom: 0;
  226. }
  227. }
  228. .input-group-text {
  229. font-size: .875rem; // 14px
  230. }
  231. @include media-breakpoint-down(sm) {
  232. // Remove Input Shadows on iPad
  233. input[type="text"],
  234. input[type="email"],
  235. input[type="search"],
  236. input[type="password"] {
  237. -webkit-appearance: none;
  238. }
  239. }
  240. // TABLES
  241. .table-responsive {
  242. overflow-y: hidden;
  243. }
  244. .table {
  245. // Bottom align for column headings
  246. >thead>tr>th {
  247. border-bottom-width: 0;
  248. } // Account for multiple tbody instances
  249. >tbody+tbody {
  250. border-bottom-width: 1px;
  251. }
  252. .form-control {
  253. max-width: 100%;
  254. }
  255. }
  256. .table-bordered {
  257. >thead>tr {
  258. >th,
  259. >td {
  260. border-bottom-width: 1px;
  261. }
  262. }
  263. }
  264. .progress {
  265. @include box-shadow(0 0 0 #000);
  266. border-radius: $border-radius-sm;
  267. border: 1px solid $progress-bg;
  268. background-color: #fff;
  269. .progress-bar {
  270. @include box-shadow(0 0 0 #000);
  271. }
  272. }
  273. // Popover
  274. // --------------------------------------------------
  275. .popover {
  276. box-shadow: 0 0 0 #000;
  277. border-color: #eee;
  278. border-bottom: 2px solid $gray-light;
  279. border-radius: $border-radius-sm;
  280. .popover-title {
  281. border: 0;
  282. }
  283. }
  284. // NAV
  285. .nav {
  286. &.nav-pills {
  287. .active>a {
  288. background-color: $primary;
  289. }
  290. }
  291. }
  292. // DROPDOWN
  293. .dropdown-menu {
  294. border-radius: $border-radius-sm;
  295. font-size: 14px;
  296. padding: 0.3125rem 0;
  297. box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px;
  298. border-color: $dropdown-border-color;
  299. .dropdown-item {
  300. line-height: 1.52857143;
  301. padding: 0.1875rem 1.25rem;
  302. }
  303. }
  304. .dropdown-header {
  305. color: #a1a2a3;
  306. }
  307. .navbar-top .navbar-nav>.active>a {
  308. color: #999;
  309. &:hover,
  310. &:focus {
  311. color: #d1d2d3;
  312. }
  313. }
  314. .navbar-default .navbar-nav .open .dropdown-menu>li>a {
  315. color: #666;
  316. &:hover,
  317. &:focus {
  318. color: #222;
  319. }
  320. }
  321. // CAROUSEL
  322. .carousel {
  323. .carousel-indicators {
  324. bottom: 0;
  325. }
  326. .carousel-control {
  327. &.left,
  328. &.right {
  329. background-image: none;
  330. } // Add support for font awesome
  331. em {
  332. position: absolute;
  333. top: 50%;
  334. left: 50%;
  335. z-index: 5;
  336. display: inline-block;
  337. width: 20px;
  338. height: 20px;
  339. margin-top: -10px;
  340. margin-left: -10px;
  341. }
  342. }
  343. }
  344. // ALERT
  345. @each $color,
  346. $value in $theme-colors {
  347. .alert-#{$color} {
  348. @include alert-variant($value, $value, #fff);
  349. }
  350. }
  351. .alert-secondary {
  352. color: $body-color;
  353. border-color: $gray-light;
  354. }
  355. // fix for ie9 (dropdwon no showing)
  356. .topnavbar,
  357. .navbar,
  358. .navbar .dropdown-menu {
  359. filter: none !important;
  360. }