_common.scss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. /**
  2. * General Uppy styles that apply to everything inside the .Uppy container
  3. */
  4. .uppy-Root {
  5. box-sizing: border-box;
  6. font-family: $font-family-base;
  7. line-height: 1;
  8. -webkit-font-smoothing: antialiased;
  9. -moz-osx-font-smoothing: grayscale;
  10. }
  11. .uppy-Root *, .uppy-Root *:before, .uppy-Root *:after {
  12. box-sizing: inherit;
  13. }
  14. // .uppy-Root *:focus:not(.focus-visible) {
  15. // outline: 0;
  16. // }
  17. .uppy-Root *:focus {
  18. outline: $size-focus-outline solid $color-cornflower-blue; /* no !important */
  19. outline-offset: $size-focus-offset; /* no !important */
  20. }
  21. // https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  22. .UppyIcon {
  23. max-width: 100%;
  24. max-height: 100%;
  25. fill: currentColor; /* no !important */
  26. display: inline-block;
  27. overflow: hidden;
  28. }
  29. .UppyIcon--svg-baseline {
  30. bottom: -0.125em;
  31. position: relative;
  32. }
  33. // Utilities
  34. .uppy-u-reset {
  35. // @include reset-button;
  36. animation: none 0s ease 0s 1 normal none running;
  37. backface-visibility: visible;
  38. background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  39. border: medium none currentColor;
  40. border-collapse: separate;
  41. border-image: none;
  42. border-radius: 0;
  43. border-spacing: 0;
  44. bottom: auto;
  45. box-shadow: none;
  46. // box-sizing: content-box;
  47. caption-side: top;
  48. clear: none;
  49. clip: auto;
  50. color: #000;
  51. columns: auto;
  52. column-count: auto;
  53. column-fill: balance;
  54. column-gap: normal;
  55. column-rule: medium none currentColor;
  56. column-span: 1;
  57. column-width: auto;
  58. content: normal;
  59. counter-increment: none;
  60. counter-reset: none;
  61. cursor: auto;
  62. // direction: ltr;
  63. display: inline;
  64. empty-cells: show;
  65. float: none;
  66. font-family: inherit;
  67. font-size: medium;
  68. font-style: normal;
  69. font-variant: normal;
  70. font-weight: normal;
  71. font-stretch: normal;
  72. line-height: normal;
  73. height: auto;
  74. hyphens: none;
  75. left: auto;
  76. letter-spacing: normal;
  77. list-style: disc outside none;
  78. margin: 0;
  79. max-height: none;
  80. max-width: none;
  81. min-height: 0;
  82. min-width: 0;
  83. opacity: 1;
  84. orphans: 2;
  85. outline: medium none invert;
  86. overflow: visible;
  87. overflow-x: visible;
  88. overflow-y: visible;
  89. padding: 0;
  90. page-break-after: auto;
  91. page-break-before: auto;
  92. page-break-inside: auto;
  93. perspective: none;
  94. perspective-origin: 50% 50%;
  95. position: static;
  96. right: auto;
  97. tab-size: 8;
  98. table-layout: auto;
  99. text-align: left;
  100. text-align-last: auto;
  101. text-decoration: none;
  102. text-indent: 0;
  103. text-shadow: none;
  104. text-transform: none;
  105. top: auto;
  106. transform: none;
  107. transform-origin: 50% 50% 0;
  108. transform-style: flat;
  109. transition: none 0s ease 0s;
  110. unicode-bidi: normal;
  111. vertical-align: baseline;
  112. visibility: visible;
  113. white-space: normal;
  114. widows: 2;
  115. width: auto;
  116. word-spacing: normal;
  117. z-index: auto;
  118. // all: initial;
  119. }
  120. // Inputs
  121. .uppy-c-textInput {
  122. border: 1px solid rgba($color-gray, 0.5);
  123. border-radius: 4px;
  124. font-size: 13px;
  125. line-height: 1.5;
  126. padding: 6px 8px;
  127. }
  128. .uppy-size--md .uppy-c-textInput {
  129. font-size: 15px;
  130. line-height: 1.8;
  131. padding: 8px 12px;
  132. }
  133. .uppy-c-textInput:focus {
  134. border-color: $color-cornflower-blue;
  135. outline: none;
  136. box-shadow: 0 0 1px 1px rgba($color-cornflower-blue, 0.5);
  137. }
  138. // Buttons
  139. .uppy-c-btn {
  140. display: inline-block;
  141. text-align: center;
  142. white-space: nowrap;
  143. vertical-align: middle;
  144. font-family: inherit;
  145. font-size: 16px;
  146. line-height: 1;
  147. font-weight: 500;
  148. transition: background-color 0.3s;
  149. user-select: none;
  150. }
  151. .uppy-c-btn:not(:disabled):not(.disabled) {
  152. cursor: pointer;
  153. }
  154. .uppy-c-btn-primary {
  155. font-size: 13px;
  156. padding: 10px 18px;
  157. border-radius: 4px;
  158. background-color: $color-cornflower-blue;
  159. color: $color-white;
  160. }
  161. .uppy-size--md .uppy-c-btn-primary {
  162. font-size: 15px;
  163. padding: 13px 22px;
  164. }
  165. .uppy-c-btn-primary:hover {
  166. background-color: darken($color-cornflower-blue, 10%);
  167. }
  168. .uppy-c-btn-primary:focus {
  169. outline: none;
  170. box-shadow: 0 0 0 3px rgba($color-cornflower-blue, 0.5);
  171. }
  172. .uppy-c-btn-link {
  173. font-size: 13px;
  174. line-height: 1;
  175. padding: 10px 18px;
  176. border-radius: 4px;
  177. background-color: transparent;
  178. color: $color-black;
  179. }
  180. .uppy-size--md .uppy-c-btn-link {
  181. font-size: 15px;
  182. padding: 13px 28px;
  183. // border-radius: 4px;
  184. }
  185. .uppy-c-btn-link:hover {
  186. text-decoration: underline;
  187. }
  188. .uppy-c-btn-link:focus {
  189. outline: none;
  190. box-shadow: 0 0 0 0.2rem rgba($color-cornflower-blue, 0.5);
  191. }
  192. .uppy-c-btn--small {
  193. font-size: 0.9em;
  194. padding: 7px 16px;
  195. border-radius: 2px;
  196. }
  197. .uppy-size--md .uppy-c-btn--small {
  198. padding: 8px 10px;
  199. border-radius: 2px;
  200. }