You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

136 lines
2.5 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. @import "../Shared.sass"
  2. .Blob
  3. margin-top: 0.5em
  4. border-radius: 0.5em
  5. display: inline-block
  6. box-sizing: border-box
  7. cursor: default
  8. margin-left: 0.25em
  9. margin-right: 0.25em
  10. &.Blob-clickable
  11. cursor: pointer
  12. &:hover
  13. color: $blob-foreground-clickable-hover
  14. &.Blob-gray
  15. background-color: $blob-background
  16. color: $blob-foreground
  17. &.Blob-clickable:hover
  18. background-color: $blob-background-hover
  19. &.Blob-green
  20. background-color: $green-1
  21. color: $green-6
  22. &.Blob-clickable:hover
  23. background-color: $green-2
  24. &.Blob-blue
  25. background-color: $blue-1
  26. color: $blue-6
  27. &.Blob-clickable:hover
  28. background-color: $blue-2
  29. &.Blob-cyan
  30. background-color: $cyan-1
  31. color: $cyan-6
  32. &.Blob-clickable:hover
  33. background-color: $cyan-2
  34. &.Blob-yellow
  35. background-color: $yellow-1
  36. color: $yellow-6
  37. &.Blob-clickable:hover
  38. background-color: $yellow-2
  39. &.Blob-red
  40. background-color: $red-1
  41. color: $red-6
  42. &.Blob-clickable:hover
  43. background-color: $red-2
  44. &.Blob-indigo
  45. background-color: $indigo-1
  46. color: $indigo-6
  47. &.Blob-clickable:hover
  48. background-color: $indigo-2
  49. &.Blob-fill-on-any
  50. display: block
  51. @media screen and (max-width: $mobile-max)
  52. &.Blob-fill-on-mobile
  53. display: block
  54. @media screen and (max-width: $tablet-max)
  55. &.Blob-fill-on-tablet
  56. display: block
  57. @media screen and (max-width: $desktop-max)
  58. &.Blob-fill-on-desktop
  59. display: block
  60. .Blob-body
  61. display: flex
  62. flex-direction: row
  63. border-radius: inherit
  64. .BlobText
  65. padding: 0.5em
  66. min-width: 1ch
  67. &.BlobText-centered
  68. text-align: center
  69. &.BlobText-text-secondary
  70. opacity: 0.75
  71. .BlobTextLine
  72. &.BlobTextLine-secondary
  73. opacity: 0.5
  74. &:not(:last-child)
  75. padding-bottom: 0.2em
  76. input.BlobInput
  77. font: inherit
  78. background-color: $blob-background-dark
  79. color: inherit
  80. border: none
  81. padding: 0.5em
  82. border-radius: inherit
  83. &:not(:first-child)
  84. border-bottom-left-radius: 0
  85. border-top-left-radius: 0
  86. &:not(:last-child)
  87. border-bottom-right-radius: 0
  88. border-top-right-radius: 0
  89. div
  90. text-wrap: avoid
  91. .BlobGroup
  92. display: inline-block
  93. .Blob:not(:first-child)
  94. margin-left: 0
  95. border-top-left-radius: 0
  96. border-bottom-left-radius: 0
  97. .Blob:not(:last-child)
  98. margin-right: 0
  99. border-top-right-radius: 0
  100. border-bottom-right-radius: 0