API tools faq
paste
Advertisement
yudiwbs

dashtab

yudiwbs
Nov 28th, 2019
351
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.28 KB | None | 0 0
raw download clone embed print report
  1. /* Table of contents
  2. ––––––––––––––––––––––––––––––––––––––––––––––––––
  3. - Plotly.js
  4. - Grid
  5. - Base Styles
  6. - Typography
  7. - Links
  8. - Buttons
  9. - Forms
  10. - Lists
  11. - Code
  12. - Tables
  13. - Spacing
  14. - Utilities
  15. - Clearing
  16. - Media Queries
  17. */
  18.  
  19. /* PLotly.js
  20. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  21. /* plotly.js's modebar's z-index is 1001 by default
  22.  * https://github.com/plotly/plotly.js/blob/7e4d8ab164258f6bd48be56589dacd9bdd7fded2/src/css/_modebar.scss#L5
  23.  * In case a dropdown is above the graph, the dropdown's options
  24.  * will be rendered below the modebar
  25.  * Increase the select option's z-index
  26.  */
  27.  
  28. /* This was actually not quite right -
  29.    dropdowns were overlapping each other (edited October 26)
  30.  
  31. .Select {
  32.     z-index: 1002;
  33. }*/
  34.  
  35.  
  36. /* Grid
  37. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  38. .container {
  39.   position: relative;
  40.   width: 100%;
  41.   max-width: 960px;
  42.   margin: 0 auto;
  43.   padding: 0 20px;
  44.   box-sizing: border-box; }
  45. .column,
  46. .columns {
  47.   width: 100%;
  48.   float: left;
  49.   box-sizing: border-box; }
  50.  
  51. /* For devices larger than 400px */
  52. @media (min-width: 400px) {
  53.   .container {
  54.     width: 85%;
  55.     padding: 0; }
  56. }
  57.  
  58. /* For devices larger than 550px */
  59. @media (min-width: 550px) {
  60.   .container {
  61.     width: 80%; }
  62.   .column,
  63.   .columns {
  64.     margin-left: 4%; }
  65.   .column:first-child,
  66.   .columns:first-child {
  67.     margin-left: 0; }
  68.  
  69.   .one.column,
  70.   .one.columns                    { width: 4.66666666667%; }
  71.   .two.columns                    { width: 13.3333333333%; }
  72.   .three.columns                  { width: 22%;            }
  73.   .four.columns                   { width: 30.6666666667%; }
  74.   .five.columns                   { width: 39.3333333333%; }
  75.   .six.columns                    { width: 48%;            }
  76.   .seven.columns                  { width: 56.6666666667%; }
  77.   .eight.columns                  { width: 65.3333333333%; }
  78.   .nine.columns                   { width: 74.0%;          }
  79.   .ten.columns                    { width: 82.6666666667%; }
  80.   .eleven.columns                 { width: 91.3333333333%; }
  81.   .twelve.columns                 { width: 100%; margin-left: 0; }
  82.  
  83.   .one-third.column               { width: 30.6666666667%; }
  84.   .two-thirds.column              { width: 65.3333333333%; }
  85.  
  86.   .one-half.column                { width: 48%; }
  87.  
  88.   /* Offsets */
  89.   .offset-by-one.column,
  90.   .offset-by-one.columns          { margin-left: 8.66666666667%; }
  91.   .offset-by-two.column,
  92.   .offset-by-two.columns          { margin-left: 17.3333333333%; }
  93.   .offset-by-three.column,
  94.   .offset-by-three.columns        { margin-left: 26%;            }
  95.   .offset-by-four.column,
  96.   .offset-by-four.columns         { margin-left: 34.6666666667%; }
  97.   .offset-by-five.column,
  98.   .offset-by-five.columns         { margin-left: 43.3333333333%; }
  99.   .offset-by-six.column,
  100.   .offset-by-six.columns          { margin-left: 52%;            }
  101.   .offset-by-seven.column,
  102.   .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  103.   .offset-by-eight.column,
  104.   .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  105.   .offset-by-nine.column,
  106.   .offset-by-nine.columns         { margin-left: 78.0%;          }
  107.   .offset-by-ten.column,
  108.   .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  109.   .offset-by-eleven.column,
  110.   .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
  111.  
  112.   .offset-by-one-third.column,
  113.   .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  114.   .offset-by-two-thirds.column,
  115.   .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
  116.  
  117.   .offset-by-one-half.column,
  118.   .offset-by-one-half.columns     { margin-left: 52%; }
  119.  
  120. }
  121.  
  122.  
  123. /* Base Styles
  124. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  125. /* NOTE
  126. html is set to 62.5% so that all the REM measurements throughout Skeleton
  127. are based on 10px sizing. So basically 1.5rem = 15px :) */
  128. html {
  129.   font-size: 100%; } /* yw 62.5 */
  130. body {
  131.   font-size: 20 em; /* yw ganti.. currently ems cause chrome bug misinterpreting rems on body element */
  132.   line-height: 1.6;
  133.   font-weight: 400;
  134.   font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  135.   color: rgb(150, 150, 150); }
  136.  
  137.  
  138. /* Typography
  139. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  140. h1, h2, h3, h4, h5, h6 {
  141.   margin-top: 0;
  142.   margin-bottom: 0;
  143.   font-weight: 300; }
  144. h1 { font-size: 4.5rem; line-height: 1.2;  letter-spacing: -.1rem; margin-bottom: 2rem; }
  145. h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 1.8rem; margin-top: 1.8rem;}
  146. h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 1.5rem;}
  147. h4 { font-size: 2.6rem; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 1.2rem;}
  148. h5 { font-size: 2.2rem; line-height: 1.5;  letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem;}
  149. h6 { font-size: 2.0rem; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem;}
  150.  
  151. p {
  152.   margin-top: 0; }
  153.  
  154.  
  155. /* Blockquotes
  156. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  157. blockquote {
  158.   border-left: 4px lightgrey solid;
  159.   padding-left: 1rem;
  160.   margin-top: 2rem;
  161.   margin-bottom: 2rem;
  162.   margin-left: 0rem;
  163. }
  164.  
  165.  
  166. /* Links
  167. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  168. a {
  169.   color: #1EAEDB;
  170.   text-decoration: underline;
  171.   cursor: pointer;}
  172. a:hover {
  173.   color: #0FA0CE; }
  174.  
  175.  
  176. /* Buttons
  177. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  178. .button,
  179. button,
  180. input[type="submit"],
  181. input[type="reset"],
  182. input[type="button"] {
  183.   display: inline-block;
  184.   height: 38px;
  185.   padding: 0 30px;
  186.   color: #555;
  187.   text-align: center;
  188.   font-size: 11px;
  189.   font-weight: 600;
  190.   line-height: 38px;
  191.   letter-spacing: .1rem;
  192.   text-transform: uppercase;
  193.   text-decoration: none;
  194.   white-space: nowrap;
  195.   background-color: transparent;
  196.   border-radius: 4px;
  197.   border: 1px solid #bbb;
  198.   cursor: pointer;
  199.   box-sizing: border-box; }
  200. .button:hover,
  201. button:hover,
  202. input[type="submit"]:hover,
  203. input[type="reset"]:hover,
  204. input[type="button"]:hover,
  205. .button:focus,
  206. button:focus,
  207. input[type="submit"]:focus,
  208. input[type="reset"]:focus,
  209. input[type="button"]:focus {
  210.   color: #333;
  211.   border-color: #888;
  212.   outline: 0; }
  213. .button.button-primary,
  214. button.button-primary,
  215. input[type="submit"].button-primary,
  216. input[type="reset"].button-primary,
  217. input[type="button"].button-primary {
  218.   color: #FFF;
  219.   background-color: #33C3F0;
  220.   border-color: #33C3F0; }
  221. .button.button-primary:hover,
  222. button.button-primary:hover,
  223. input[type="submit"].button-primary:hover,
  224. input[type="reset"].button-primary:hover,
  225. input[type="button"].button-primary:hover,
  226. .button.button-primary:focus,
  227. button.button-primary:focus,
  228. input[type="submit"].button-primary:focus,
  229. input[type="reset"].button-primary:focus,
  230. input[type="button"].button-primary:focus {
  231.   color: #FFF;
  232.   background-color: #1EAEDB;
  233.   border-color: #1EAEDB; }
  234.  
  235.  
  236. /* Forms
  237. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  238. input[type="email"],
  239. input[type="number"],
  240. input[type="search"],
  241. input[type="text"],
  242. input[type="tel"],
  243. input[type="url"],
  244. input[type="password"],
  245. textarea,
  246. select {
  247.   height: 38px;
  248.   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  249.   background-color: #fff;
  250.   border: 1px solid #D1D1D1;
  251.   border-radius: 4px;
  252.   box-shadow: none;
  253.   box-sizing: border-box;
  254.   font-family: inherit;
  255.   font-size: inherit; /*https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body*/}
  256. /* Removes awkward default styles on some inputs for iOS */
  257. input[type="email"],
  258. input[type="number"],
  259. input[type="search"],
  260. input[type="text"],
  261. input[type="tel"],
  262. input[type="url"],
  263. input[type="password"],
  264. textarea {
  265.   -webkit-appearance: none;
  266.      -moz-appearance: none;
  267.           appearance: none; }
  268. textarea {
  269.   min-height: 65px;
  270.   padding-top: 6px;
  271.   padding-bottom: 6px; }
  272. input[type="email"]:focus,
  273. input[type="number"]:focus,
  274. input[type="search"]:focus,
  275. input[type="text"]:focus,
  276. input[type="tel"]:focus,
  277. input[type="url"]:focus,
  278. input[type="password"]:focus,
  279. textarea:focus,
  280. select:focus {
  281.   border: 1px solid #33C3F0;
  282.   outline: 0; }
  283. label,
  284. legend {
  285.   display: block;
  286.   margin-bottom: 0px; }
  287. fieldset {
  288.   padding: 0;
  289.   border-width: 0; }
  290. input[type="checkbox"],
  291. input[type="radio"] {
  292.   display: inline; }
  293. label > .label-body {
  294.   display: inline-block;
  295.   margin-left: .5rem;
  296.   font-weight: normal; }
  297.  
  298.  
  299. /* Lists
  300. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  301. ul {
  302.   list-style: circle inside; }
  303. ol {
  304.   list-style: decimal inside; }
  305. ol, ul {
  306.   padding-left: 0;
  307.   margin-top: 0; }
  308. ul ul,
  309. ul ol,
  310. ol ol,
  311. ol ul {
  312.   margin: 1.5rem 0 1.5rem 3rem;
  313.   font-size: 90%; }
  314. li {
  315.   margin-bottom: 1rem; }
  316.  
  317.  
  318. /* Tables
  319. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  320. table {
  321.   border-collapse: collapse;
  322. }
  323. th:not(.CalendarDay),
  324. td:not(.CalendarDay) {
  325.   padding: 12px 15px;
  326.   text-align: left;
  327.   border-bottom: 1px solid #E1E1E1; }
  328. th:first-child:not(.CalendarDay),
  329. td:first-child:not(.CalendarDay) {
  330.   padding-left: 0; }
  331. th:last-child:not(.CalendarDay),
  332. td:last-child:not(.CalendarDay) {
  333.   padding-right: 0; }
  334.  
  335.  
  336. /* Spacing
  337. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  338. button,
  339. .button {
  340.   margin-bottom: 0rem; }
  341. input,
  342. textarea,
  343. select,
  344. fieldset {
  345.   margin-bottom: 0rem; }
  346. pre,
  347. dl,
  348. figure,
  349. table,
  350. form {
  351.   margin-bottom: 0rem; }
  352. p,
  353. ul,
  354. ol {
  355.   margin-bottom: 0.75rem; }
  356.  
  357. /* Utilities
  358. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  359. .u-full-width {
  360.   width: 100%;
  361.   box-sizing: border-box; }
  362. .u-max-full-width {
  363.   max-width: 100%;
  364.   box-sizing: border-box; }
  365. .u-pull-right {
  366.   float: right; }
  367. .u-pull-left {
  368.   float: left; }
  369.  
  370.  
  371. /* Misc
  372. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  373. hr {
  374.   margin-top: 3rem;
  375.   margin-bottom: 3.5rem;
  376.   border-width: 0;
  377.   border-top: 1px solid #E1E1E1; }
  378.  
  379.  
  380. /* Clearing
  381. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  382.  
  383. /* Self Clearing Goodness */
  384. .container:after,
  385. .row:after,
  386. .u-cf {
  387.   content: "";
  388.   display: table;
  389.   clear: both; }
  390.  
  391.  
  392. /* Media Queries
  393. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  394. /*
  395. Note: The best way to structure the use of media queries is to create the queries
  396. near the relevant code. For example, if you wanted to change the styles for buttons
  397. on small devices, paste the mobile query code up in the buttons section and style it
  398. there.
  399. */
  400.  
  401.  
  402. /* Larger than mobile */
  403. @media (min-width: 400px) {}
  404.  
  405. /* Larger than phablet (also point when grid becomes active) */
  406. @media (min-width: 550px) {}
  407.  
  408. /* Larger than tablet */
  409. @media (min-width: 750px) {}
  410.  
  411. /* Larger than desktop */
  412. @media (min-width: 1000px) {}
  413.  
  414. /* Larger than Desktop HD */
  415. @media (min-width: 1200px) {}
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!