_examples.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. .s2-example + pre,
  2. .s2-event-log + pre {
  3. margin: -15px -15px 15px;
  4. border-radius: 0;
  5. border-width: 0 0 1px;
  6. }
  7. @media (min-width: 768px) {
  8. .s2-example + pre,
  9. .s2-event-log + pre {
  10. margin-top: -16px;
  11. margin-left: 0;
  12. margin-right: 0;
  13. border-width: 1px;
  14. border-bottom-left-radius: 4px;
  15. border-bottom-right-radius: 4px;
  16. }
  17. }
  18. .s2-event-log {
  19. background: #002451;
  20. font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
  21. color: white;
  22. position: relative;
  23. padding: 45px 15px 15px;
  24. margin: 0 -15px 15px;
  25. }
  26. .s2-event-log:after {
  27. content: "Event Log";
  28. position: absolute;
  29. top: 15px;
  30. left: 15px;
  31. font-size: 12px;
  32. font-weight: bold;
  33. color: #BBB;
  34. text-transform: uppercase;
  35. letter-spacing: 1px;
  36. }
  37. .s2-example {
  38. position: relative;
  39. padding: 45px 15px 15px;
  40. margin: 0 -15px 15px;
  41. background-color: #FAFAFA;
  42. box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
  43. border-color: #E5E5E5 #EEE #EEE;
  44. border-style: solid;
  45. border-width: 1px 0;
  46. }
  47. @media (min-width: 768px) {
  48. .s2-example {
  49. margin-left: 0;
  50. margin-right: 0;
  51. background-color: #FFF;
  52. border-width: 1px;
  53. border-color: #eee;
  54. border-radius: 4px 4px 0 0;
  55. box-shadow: none;
  56. }
  57. .s2-event-log {
  58. margin-left: 0;
  59. margin-right: 0;
  60. margin-top: -15px;
  61. border-width: 1px;
  62. border-color: #eee;
  63. box-shadow: none;
  64. }
  65. }
  66. .s2-example:after {
  67. content: "Example";
  68. position: absolute;
  69. top: 15px;
  70. left: 15px;
  71. font-size: 12px;
  72. font-weight: bold;
  73. color: #BBB;
  74. text-transform: uppercase;
  75. letter-spacing: 1px;
  76. }