API tools faq
paste
Advertisement
zidniryi

index.css

zidniryi
Aug 23rd, 2021
93
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.82 KB | None | 0 0
raw download clone embed print report
  1. /*!
  2. * React SmartTab v2
  3. * The awesome react tab control plugin
  4. * http://www.techlaboratory.net/react-smarttab
  5. *
  6. * Created by Dipu Raj
  7. * http://dipu.me
  8. *
  9. * @license Licensed under the terms of the MIT License
  10. * https://github.com/techlab/react-smarttab/blob/master/LICENSE
  11. */
  12. /* SmartTab Base Styles */
  13. @import url("https://fonts.googleapis.com/css2?family=Kadwa:wght@700&display=swap");
  14.  
  15. .st {
  16. position: relative;
  17. outline-style: none; }
  18. .st:focus {
  19. outline-style: none; }
  20. .st *,
  21. .st *::before,
  22. .st *::after {
  23. box-sizing: border-box; }
  24. .st > .tab-content {
  25. position: relative;
  26. overflow: hidden; }
  27. .st > .tab-content > .tab-pane {
  28. display: none; }
  29. .st > .tab-content > .tab-pane.active {
  30. display: block; }
  31. .st > .nav {
  32. display: flex;
  33. flex-wrap: wrap;
  34. list-style: none;
  35. padding-left: 0;
  36. margin-top: 0;
  37. margin-bottom: 0; }
  38. @media screen and (max-width: 640px) {
  39. .st > .nav {
  40. flex-direction: column !important;
  41. flex: 1 auto; } }
  42. .st > .nav .nav-link {
  43. display: block;
  44. padding: .5rem 1rem;
  45. text-decoration: none;
  46. outline: 0 !important; }
  47. .st > .nav .nav-link:hover, .st > .nav .nav-link:active, .st > .nav .nav-link:focus {
  48. text-decoration: none;
  49. outline: 0 !important; }
  50. .st > .nav .nav-link::-moz-focus-inner {
  51. border: 0 !important; }
  52. .st > .nav .nav-link.disabled {
  53. color: #ccc !important;
  54. pointer-events: none;
  55. cursor: default; }
  56. .st.st-vertical {
  57. display: flex !important;
  58. flex-wrap: nowrap; }
  59. .st.st-vertical > .nav {
  60. flex-direction: column !important;
  61. flex: 1 auto; }
  62. .st.st-vertical > .nav .nav-link {
  63. text-align: left; }
  64. .st.st-vertical > .nav > li, .st.st-vertical > .nav .nav-link {
  65. flex-grow: unset !important; }
  66. .st.st-vertical > .tab-content {
  67. flex: 1 100%; }
  68. .st.st-justified > .nav > li, .st.st-justified > .nav .nav-link {
  69. flex-basis: 0;
  70. flex-grow: 1;
  71. text-align: center; }
  72. .st.st-loading {
  73. -webkit-user-select: none;
  74. -moz-user-select: none;
  75. -ms-user-select: none;
  76. user-select: none; }
  77. .st.st-loading::after {
  78. content: "";
  79. display: block;
  80. position: absolute;
  81. opacity: 1;
  82. top: 0;
  83. left: 0;
  84. height: 100%;
  85. width: 100%;
  86. background: rgba(255, 255, 255, 0.7);
  87. z-index: 2;
  88. transition: all .2s ease; }
  89. .st.st-loading::before {
  90. content: '';
  91. display: inline-block;
  92. position: absolute;
  93. top: 45%;
  94. left: 45%;
  95. width: 2rem;
  96. height: 2rem;
  97. border-radius: 50%;
  98. z-index: 10;
  99. -webkit-animation: spin 1s linear infinite;
  100. animation: spin 1s linear infinite; }
  101.  
  102. @-webkit-keyframes spin {
  103. 0% {
  104. transform: rotate(0deg); }
  105. 100% {
  106. transform: rotate(360deg); } }
  107.  
  108. @keyframes spin {
  109. 0% {
  110. transform: rotate(0deg); }
  111. 100% {
  112. transform: rotate(360deg); } }
  113. .st-theme-default > .tab-content > .tab-pane {
  114. padding: 10px; }
  115. .st-theme-default > .nav .nav-link {
  116. font-family: "Kadwa", serif;
  117. font-weight: bold;
  118. position: relative;
  119. background: transparent;
  120. border: transparent;
  121. height: 100%;
  122. min-height: 100%;
  123. color: #222 !important;
  124. padding: 10px;
  125. transition: all 250ms ease 0s; }
  126. .st-theme-default > .nav .nav-link::after {
  127. content: "";
  128. background: transparent;
  129. height: 2px;
  130. position: absolute;
  131. width: 100%;
  132. left: 0px;
  133. bottom: -1px;
  134. transition: all 250ms ease 0s;
  135. transform: scale(0); }
  136. .st-theme-default > .nav .nav-link.active {
  137. color: #5bc0de !important;
  138. cursor: pointer; }
  139. .st-theme-default > .nav .nav-link.active::after {
  140. background: #5bc0de !important;
  141. transform: scale(1); }
  142. .st-theme-default.st-vertical > .nav .nav-link::after {
  143. height: 100%;
  144. width: 2px;
  145. top: 0px;
  146. left: auto;
  147. right: -1px; }
  148.  
  149. /* SmartTab Theme: Classic */
  150. .st-theme-classic {
  151. border: 1px solid #eee; }
  152. .st-theme-classic > .tab-content > .tab-pane {
  153. padding: 10px; }
  154. .st-theme-classic > .nav .nav-link {
  155. font-weight: bold;
  156. position: relative;
  157. background: transparent;
  158. border: transparent;
  159. height: 100%;
  160. min-height: 100%;
  161. color: #222 !important;
  162. padding: 10px;
  163. background-color: #f9f9f9;
  164. background-image: linear-gradient(to bottom, #f9f9f9 0%, #f6f6f6 47%, #ededed 100%); }
  165. .st-theme-classic > .nav .nav-link.active {
  166. color: #5bc0de !important;
  167. background-image: linear-gradient(to top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
  168. cursor: pointer; }
  169. .st-theme-classic.st-vertical > .nav .nav-link {
  170. background-image: linear-gradient(to right, #f9f9f9 0%, #f6f6f6 47%, #ededed 100%); }
  171. .st-theme-classic.st-vertical > .nav .nav-link.active {
  172. background-image: linear-gradient(to left, #ffffff 0%, #f6f6f6 47%, #ededed 100%); }
  173.  
  174. /* SmartTab Theme: Dark */
  175. .st-theme-dark {
  176. border: 1px solid #000000;
  177. color: rgba(255, 255, 255, 0.95);
  178. background: #181c20; }
  179. .st-theme-dark > .tab-content > .tab-pane {
  180. padding: 10px; }
  181. .st-theme-dark > .nav {
  182. background: #0D0F12; }
  183. .st-theme-dark > .nav .nav-link {
  184. position: relative;
  185. background: transparent;
  186. border: transparent;
  187. height: 100%;
  188. min-height: 100%;
  189. color: #aaaaaa !important;
  190. padding: 10px; }
  191. .st-theme-dark > .nav .nav-link.active {
  192. color: rgba(255, 255, 255, 0.95) !important;
  193. background: #181c20 !important;
  194. cursor: pointer; }
  195. .st-theme-dark > .nav .nav-link.disabled {
  196. color: #555555 !important; }
  197.  
  198. /* SmartTab Theme: Brick */
  199. .st-theme-brick > .tab-content > .tab-pane {
  200. padding: 10px; }
  201.  
  202. .st-theme-brick > .nav {
  203. background: #f9f9f9;
  204. border-bottom: 2px solid #5bc0de; }
  205. .st-theme-brick > .nav .nav-link {
  206. position: relative;
  207. background: transparent;
  208. border: transparent;
  209. height: 100%;
  210. min-height: 100%;
  211. color: #bbbbbb !important;
  212. padding: 10px; }
  213. .st-theme-brick > .nav .nav-link.active {
  214. color: #ffffff !important;
  215. background: #5bc0de !important;
  216. cursor: pointer;
  217. border-top-left-radius: 8px;
  218. border-top-right-radius: 8px; }
  219. .st-theme-brick > .nav .nav-link.disabled {
  220. color: #eeeeee !important; }
  221.  
  222. .st-theme-brick.st-vertical > .nav {
  223. border-right: 2px solid #5bc0de;
  224. border-bottom: unset; }
  225. .st-theme-brick.st-vertical > .nav .nav-link.active {
  226. border-top-left-radius: 8px;
  227. border-bottom-left-radius: 8px;
  228. border-top-right-radius: unset; }
  229.  
  230. /* SmartTab Theme: Round */
  231. .st-theme-round {
  232. border: 1px solid #dee2e6;
  233. border-top-width: 0;
  234. border-radius: 8px; }
  235. .st-theme-round > .tab-content > .tab-pane {
  236. padding: 10px; }
  237. .st-theme-round > .nav {
  238. background: #ffffff;
  239. border-bottom: 1px solid #dee2e6;
  240. margin-right: -1px;
  241. margin-left: -1px; }
  242. .st-theme-round > .nav .nav-link {
  243. position: relative;
  244. background: transparent;
  245. height: 100%;
  246. min-height: 100%;
  247. color: #bbbbbb !important;
  248. padding: 10px;
  249. border: 1px solid transparent;
  250. border-bottom-width: 0;
  251. background: #ffffff; }
  252. .st-theme-round > .nav .nav-link.active {
  253. color: #495057 !important;
  254. border-color: #dee2e6 !important;
  255. cursor: pointer;
  256. border-top-left-radius: 8px;
  257. border-top-right-radius: 8px; }
  258. .st-theme-round > .nav .nav-link.active::after {
  259. content: "";
  260. background: #ffffff;
  261. height: 1px;
  262. position: absolute;
  263. width: 100%;
  264. left: 0px;
  265. bottom: -1px; }
  266. .st-theme-round > .nav .nav-link.disabled {
  267. color: #eeeeee !important; }
  268. .st-theme-round.st-vertical {
  269. border-top-width: 1px;
  270. border-left-width: 0; }
  271. .st-theme-round.st-vertical > .nav {
  272. border-right: 1px solid #dee2e6;
  273. border-bottom: unset;
  274. margin-top: -1px;
  275. margin-bottom: -1px;
  276. margin-right: 0;
  277. margin-left: 0; }
  278. .st-theme-round.st-vertical > .nav .nav-link {
  279. border-bottom-width: 1px;
  280. border-right-width: 0; }
  281. .st-theme-round.st-vertical > .nav .nav-link.active {
  282. border-top-left-radius: 8px;
  283. border-bottom-left-radius: 8px;
  284. border-top-right-radius: unset; }
  285. .st-theme-round.st-vertical > .nav .nav-link.active::after {
  286. height: 100%;
  287. width: 1px;
  288. top: 0px;
  289. left: auto;
  290. right: -1px; }
  291.  
  292. /* SmartTab Theme: Pills */
  293. .st-theme-pills > .tab-content > .tab-pane {
  294. padding: 10px; }
  295.  
  296. .st-theme-pills > .nav {
  297. background: #5bc0de;
  298. padding: 11px 23px;
  299. border-radius: 0.1875rem; }
  300. .st-theme-pills > .nav .nav-link {
  301. height: 100%;
  302. min-height: 100%;
  303. color: #fff !important;
  304. padding: .5rem 1rem; }
  305. .st-theme-pills > .nav .nav-link.active {
  306. color: #fff !important;
  307. background: rgba(255, 255, 255, 0.2);
  308. border-radius: 30px;
  309. cursor: pointer; }
  310.  
  311. /* SmartTab Theme: GitHub */
  312. .st-theme-github > .tab-content > .tab-pane {
  313. padding: 10px; }
  314.  
  315. .st-theme-github > .nav {
  316. background: #fafbfc;
  317. border-bottom: 1px solid #e1e4e8;
  318. margin-right: -1px;
  319. margin-left: -1px; }
  320. .st-theme-github > .nav .nav-link {
  321. position: relative;
  322. background: transparent;
  323. height: 100%;
  324. min-height: 100%;
  325. color: #586069;
  326. padding: 10px;
  327. border: 1px solid transparent;
  328. border-top-width: 3px;
  329. border-bottom-width: 0;
  330. background: #fafbfc; }
  331. .st-theme-github > .nav .nav-link:hover, .st-theme-github > .nav .nav-link:focus {
  332. color: #24292e; }
  333. .st-theme-github > .nav .nav-link.active {
  334. color: #495057 !important;
  335. border-color: #e1e4e8 !important;
  336. border-top-color: #e36209 !important;
  337. background-color: #ffffff !important;
  338. cursor: pointer; }
  339. .st-theme-github > .nav .nav-link.active::after {
  340. content: "";
  341. background: #ffffff;
  342. height: 1px;
  343. position: absolute;
  344. width: 100%;
  345. left: 0px;
  346. bottom: -1px; }
  347. .st-theme-github > .nav .nav-link.disabled {
  348. color: #eeeeee !important; }
  349.  
  350. .st-theme-github.st-vertical > .nav {
  351. border-right: 1px solid #e1e4e8;
  352. border-bottom: unset;
  353. margin-top: -1px;
  354. margin-bottom: -1px;
  355. margin-right: 0;
  356. margin-left: 0; }
  357. .st-theme-github.st-vertical > .nav .nav-link {
  358. border-bottom-width: 1px;
  359. border-right-width: 0;
  360. border-top-width: 1px;
  361. border-left-width: 3px; }
  362. .st-theme-github.st-vertical > .nav .nav-link.active {
  363. border-top-color: #e1e4e8 !important;
  364. border-left-color: #e36209 !important; }
  365. .st-theme-github.st-vertical > .nav .nav-link.active::after {
  366. height: 100%;
  367. width: 1px;
  368. top: 0px;
  369. left: auto;
  370. right: -1px; }
  371.  
  372. /* SmartTab Theme: Sourceforge */
  373. .st-theme-sourceforge > .tab-content > .tab-pane {
  374. padding: 11px 15px; }
  375.  
  376. .st-theme-sourceforge > .nav {
  377. background: #fff;
  378. border-right: 1px solid;
  379. border-image-source: linear-gradient(to bottom, #333333 0%, #333333 3px, #dcdcdc 3px);
  380. border-image-slice: 0 1 0 0; }
  381. .st-theme-sourceforge > .nav .nav-link {
  382. position: relative;
  383. height: 100%;
  384. min-height: 100%;
  385. padding: 10px;
  386. color: #586069;
  387. background: #fff;
  388. border-style: solid;
  389. border-width: 3px 0 1px 1px;
  390. border-image-source: linear-gradient(to bottom, #333333 0%, #333333 3px, #dcdcdc 3px);
  391. border-image-slice: 3 0 1 1; }
  392. .st-theme-sourceforge > .nav .nav-link:hover, .st-theme-sourceforge > .nav .nav-link:focus {
  393. color: #09c !important; }
  394. .st-theme-sourceforge > .nav .nav-link.active {
  395. color: #0cf !important;
  396. background-color: #ffffff !important;
  397. cursor: pointer;
  398. border-image-source: linear-gradient(to bottom, #00ccff 0%, #00ccff 3px, #dcdcdc 3px);
  399. border-image-slice: 3 0 0 1; }
  400.  
  401. .st-theme-sourceforge.st-vertical > .nav {
  402. border-top: 1px solid;
  403. border-image-source: linear-gradient(to right, #333333 0%, #333333 3px, #dcdcdc 3px);
  404. border-image-slice: 1 0 0 0; }
  405. .st-theme-sourceforge.st-vertical > .nav .nav-link {
  406. border-width: 0 1px 1px 3px;
  407. border-image-source: linear-gradient(to right, #333333 0%, #333333 3px, #dcdcdc 3px);
  408. border-image-slice: 0 1 1 3; }
  409. .st-theme-sourceforge.st-vertical > .nav .nav-link.active {
  410. border-image-source: linear-gradient(to right, #00ccff 0%, #00ccff 3px, #dcdcdc 3px);
  411. border-image-slice: 0 0 1 3; }
  412.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!