_classes.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. //
  2. // Utilities
  3. //
  4. %border-box {
  5. -moz-box-sizing: border-box;
  6. box-sizing: border-box;
  7. }
  8. %user-select-none {
  9. -webkit-user-select: none;
  10. -moz-user-select: -moz-none;
  11. -ms-user-select: none;
  12. user-select: none;
  13. }
  14. //
  15. // Boxes
  16. //
  17. %box {
  18. background: $boxBackground;
  19. border: 1px solid $boxBorder;
  20. border-radius: 3px;
  21. }
  22. %heading-box {
  23. background: $boxHeaderBackground;
  24. border: 1px solid $boxBorder;
  25. border-radius: 3px;
  26. }
  27. %block-heading {
  28. line-height: 1.25rem;
  29. margin: 2em 0 1em;
  30. padding: .5em .75em;
  31. font-size: 1rem;
  32. overflow: hidden;
  33. @extend %heading-box;
  34. }
  35. //
  36. // Notes
  37. //
  38. %note {
  39. margin: 1.5rem 0;
  40. padding: .5rem .875rem;
  41. background: $noteBackground;
  42. border: 1px solid $noteBorder;
  43. border-radius: 3px;
  44. }
  45. %label {
  46. margin: 0 1px;
  47. padding: 1px 4px 2px;
  48. background: $labelBackground;
  49. border-radius: 3px;
  50. }
  51. %block-label {
  52. display: block;
  53. line-height: 1.375rem;
  54. margin: 2em 0 1em;
  55. padding-left: .5em;
  56. padding-right: .5em;
  57. font-size: inherit;
  58. border: 1px solid $boxBorder;
  59. border-radius: 2px;
  60. @extend %label;
  61. }
  62. %note-green, %label-green {
  63. background: $noteGreenBackground;
  64. border-color: $noteGreenBorder;
  65. }
  66. %note-blue, %label-blue {
  67. background: $noteBlueBackground;
  68. border-color: $noteBlueBorder;
  69. }
  70. %note-orange, %label-orange {
  71. background: $noteOrangeBackground;
  72. border-color: $noteOrangeBorder;
  73. }
  74. %note-red, %label-red {
  75. background: $noteRedBackground;
  76. border-color: $noteRedBorder;
  77. }
  78. //
  79. // External links
  80. //
  81. %external-link {
  82. &:after {
  83. display: inline-block;
  84. width: .5rem;
  85. height: .4375rem;
  86. margin: .125rem 0 0 .0625rem;
  87. vertical-align: top;
  88. @extend %icon, %icon-link;
  89. }
  90. }
  91. %internal-link:after { content: none !important; }