From fcc8b6aaabe7df427038d485b3b1a07cf94fd193 Mon Sep 17 00:00:00 2001 From: Vivianne Langdon Date: Sat, 26 Feb 2022 18:19:12 -0800 Subject: [PATCH] Move to sass --- bookwyrm/static/css/bookwyrm.css | 1319 ----------------- bookwyrm/static/css/bookwyrm/_all.scss | 1 + .../css/bookwyrm/components/_barcode.scss | 14 + 3 files changed, 15 insertions(+), 1319 deletions(-) delete mode 100644 bookwyrm/static/css/bookwyrm.css create mode 100644 bookwyrm/static/css/bookwyrm/components/_barcode.scss diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css deleted file mode 100644 index f1faf30c1..000000000 --- a/bookwyrm/static/css/bookwyrm.css +++ /dev/null @@ -1,1319 +0,0 @@ -html { - scroll-behavior: smooth; -} - -body { - min-height: 100vh; - display: flex; - flex-direction: column; -} - -button { - border: none; - margin: 0; - padding: 0; - width: auto; - overflow: visible; - background: transparent; - - /* inherit font, color & alignment from ancestor */ - color: inherit; - font: inherit; - text-align: inherit; - - /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */ - line-height: normal; - - /* Corrects font smoothing for webkit */ - -webkit-font-smoothing: inherit; - -moz-osx-font-smoothing: inherit; - - /* Corrects inability to style clickable `input` types in iOS */ - -webkit-appearance: none; - - /* Generalizes pointer cursor */ - cursor: pointer; -} - -button::-moz-focus-inner { - /* Remove excess padding and border in Firefox 4+ */ - border: 0; - padding: 0; -} - -/* Better accessibility for keyboard users */ -*:focus-visible { - outline-style: auto !important; -} - -.image { - overflow: hidden; -} - -.navbar .logo { - max-height: 50px; -} - -.card { - overflow: visible; -} - -.card.has-border { - border: 1px solid #eee; -} - -.scroll-x { - overflow: hidden; - overflow-x: auto; -} - -.modal-card { - pointer-events: none; -} - -.modal-card > * { - pointer-events: all; -} - -/* stylelint-disable no-descending-specificity */ -.modal-card:focus { - outline-style: auto; -} - -.modal-card:focus:not(:focus-visible) { - outline-style: initial; -} - -.modal-card:focus-visible { - outline-style: auto; -} -/* stylelint-enable no-descending-specificity */ - -.modal-card.is-fullwidth { - min-width: 75% !important; -} - -@media only screen and (min-width: 769px) { - .modal-card.is-thin { - width: 350px !important; - } -} - -.modal-card-body { - max-height: 70vh; -} - -.clip-text { - max-height: 35em; - overflow: hidden; -} - -/** Utilities not covered by Bulma - ******************************************************************************/ - -@media only screen and (max-width: 768px) { - .is-sr-only-mobile { - border: none !important; - clip: rect(0, 0, 0, 0) !important; - height: 0.01em !important; - overflow: hidden !important; - padding: 0 !important; - position: absolute !important; - white-space: nowrap !important; - width: 0.01em !important; - } - - .m-0-mobile { - margin: 0 !important; - } - - .card-footer.is-stacked-mobile { - flex-direction: column; - } - - .card-footer.is-stacked-mobile .card-footer-item:not(:last-child) { - border-bottom: 1px solid #ededed; - border-right: 0; - } - - .is-flex-direction-row-mobile { - flex-direction: row !important; - } - - .is-flex-direction-column-mobile { - flex-direction: column !important; - } -} - -.tag.is-small { - height: auto; -} - -.button.is-transparent { - background-color: transparent; -} - -.card.is-stretchable { - display: flex; - flex-direction: column; - height: 100%; -} - -.card.is-stretchable .card-content { - flex-grow: 1; -} - -.preserve-whitespace p { - white-space: pre-wrap !important; -} - -.display-inline p { - display: inline !important; -} - -button .button-invisible-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 1rem; - box-sizing: border-box; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - background: rgba(0, 0, 0, 66%); - color: white; - opacity: 0; - transition: opacity 0.2s ease; -} - -button:hover .button-invisible-overlay, -button:active .button-invisible-overlay, -button:focus-visible .button-invisible-overlay { - opacity: 1; -} - -/** File input styles - ******************************************************************************/ - -input[type="file"]::file-selector-button { - -moz-appearance: none; - -webkit-appearance: none; - background-color: #fff; - border-radius: 4px; - border: 1px solid #dbdbdb; - box-shadow: none; - color: #363636; - cursor: pointer; - font-size: 1rem; - height: 2.5em; - justify-content: center; - line-height: 1.5; - padding-bottom: calc(0.5em - 1px); - padding-left: 1em; - padding-right: 1em; - padding-top: calc(0.5em - 1px); - text-align: center; - white-space: nowrap; -} - -input[type="file"]::file-selector-button:hover { - border-color: #b5b5b5; - color: #363636; -} - -/** General `details` element styles - ******************************************************************************/ - -details summary { - cursor: pointer; -} - -summary::-webkit-details-marker { - display: none; -} - -details summary::marker { - content: none; -} - -details.detail-pinned-button summary { - position: absolute; - right: 0; -} - -details.detail-pinned-button form { - float: left; - width: 100%; - margin-top: 1em; -} - -/** Dropdown w/ Details element - ******************************************************************************/ - -details.dropdown[open] summary.dropdown-trigger::before { - content: ""; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; -} - -details.dropdown .dropdown-menu { - display: block !important; -} - -details.dropdown .dropdown-menu button { - /* Fix weird Safari defaults */ - box-sizing: border-box; -} - -details.dropdown .dropdown-menu button:focus-visible, -details.dropdown .dropdown-menu a:focus-visible { - outline-style: auto; - outline-offset: -2px; -} - -@media only screen and (max-width: 768px) { - details.dropdown[open] summary.dropdown-trigger::before { - background-color: rgba(0, 0, 0, 50%); - z-index: 30; - } - - details .dropdown-menu { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex !important; - align-items: center; - justify-content: center; - pointer-events: none; - z-index: 100; - } - - details .dropdown-menu > * { - pointer-events: all; - } -} - -/** Details panel - ******************************************************************************/ - -details.details-panel { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 10%); - transition: box-shadow 0.2s ease; - padding: 0.75rem; -} - -details[open].details-panel, -details.details-panel:hover { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 20%); -} - -details.details-panel summary { - position: relative; -} - -details.details-panel summary .details-close { - position: absolute; - right: 0; - top: 0; - transform: rotate(45deg); - transition: transform 0.2s ease; -} - -details[open].details-panel summary .details-close { - transform: rotate(0deg); -} - -@media only screen and (min-width: 769px) { - .details-panel .filters-field:not(:last-child) { - border-right: 1px solid rgba(0, 0, 0, 10%); - margin-top: 0.75rem; - margin-bottom: 0.75rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - } -} - -/** Shelving - ******************************************************************************/ - -/** @todo Replace icons with SVG symbols. - @see https://www.youtube.com/watch?v=9xXBYcWgCHA */ -.shelf-option:disabled > *::after { - font-family: icomoon; /* stylelint-disable font-family-no-missing-generic-family-keyword */ - content: "\e919"; /* icon-check */ - margin-left: 0.5em; -} - -/** Toggles - ******************************************************************************/ - -.toggle-button[aria-pressed="true"], -.toggle-button[aria-pressed="true"]:hover { - background-color: hsl(171deg, 100%, 41%); - color: white; -} - -.hide-active[aria-pressed="true"], -.hide-inactive[aria-pressed="false"] { - display: none; -} - -.transition-x.is-hidden, -.transition-y.is-hidden { - display: block !important; - visibility: hidden !important; - height: 0 !important; - width: 0 !important; - margin: 0 !important; - padding: 0 !important; - overflow: auto; -} - -.transition-x, -.transition-y { - transition-duration: 0.5s; - transition-timing-function: ease; -} - -.transition-x { - transition-property: width, margin-left, margin-right, padding-left, padding-right; -} - -.transition-y { - transition-property: height, margin-top, margin-bottom, padding-top, padding-bottom; -} - -@media (prefers-reduced-motion: reduce) { - .transition-x, - .transition-y { - transition-duration: 0.001ms !important; - } -} - -/** Stars - ******************************************************************************/ - -.stars { - white-space: nowrap; -} - -/** Stars in a review form - * - * Specificity makes hovering taking over checked inputs. - * - * \e9d9: filled star - * \e9d7: empty star; - * -------------------------------------------------------------------------- */ - -.form-rate-stars { - width: max-content; -} - -/* All stars are visually filled by default. */ -.form-rate-stars .icon::before { - content: "\e9d9"; /* icon-star-full */ -} - -/* Icons directly following half star inputs are marked as half */ -.form-rate-stars input.half:checked ~ .icon::before { - content: "\e9d8"; /* icon-star-half */ -} - -/* stylelint-disable no-descending-specificity */ -.form-rate-stars input.half:checked + input + .icon:hover::before { - content: "\e9d8" !important; /* icon-star-half */ -} - -/* Icons directly following half check inputs that follow the checked input are emptied. */ -.form-rate-stars input.half:checked + input + .icon ~ .icon::before { - content: "\e9d7"; /* icon-star-empty */ -} - -/* Icons directly following inputs that follow the checked input are emptied. */ -.form-rate-stars input:checked ~ input + .icon::before { - content: "\e9d7"; /* icon-star-empty */ -} - -/* When a label is hovered, repeat the fill-all-then-empty-following pattern. */ -.form-rate-stars:hover .icon.icon::before { - content: "\e9d9" !important; /* icon-star-full */ -} - -.form-rate-stars .icon:hover ~ .icon::before { - content: "\e9d7" !important; /* icon-star-empty */ -} - -/** Book covers - * - * - .is-cover gives the behaviour of the cover and its surrounding. (optional) - * - .cover-container gives the dimensions and position (for borders, image and other elements). - * - .book-cover is positioned and sized based on its container. - * - * To have the cover within specific dimensions, specify a width or height for - * standard bulma’s named breapoints: - * - * `is-(w|h)-(auto|xs|s|m|l|xl|xxl)[-(mobile|tablet|desktop)]` - * - * The cover will be centered horizontally and vertically within those dimensions. - * - * When using `.column.is-N`, add `.is-w-auto` to the container so that the flex - * calculations are not biased by the default `max-content`. - ******************************************************************************/ - -.column.is-cover { - flex-grow: 0 !important; -} - -.column.is-cover, -.column.is-cover + .column { - flex-basis: auto !important; -} - -.cover-container { - display: flex; - justify-content: center; - align-items: center; - position: relative; - width: max-content; - max-width: 100%; - overflow: hidden; -} - -/* Book cover - * -------------------------------------------------------------------------- */ - -.book-cover { - display: block; - max-width: 100%; - max-height: 100%; - - /* Useful when stretching under-sized images. */ - image-rendering: optimizequality; - image-rendering: smooth; -} - -/* Cover caption - * -------------------------------------------------------------------------- */ - -.no-cover .cover-caption { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - padding: 0.5em; - font-size: 0.75em; - color: white; - background-color: #002549; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 1em; - white-space: initial; - text-align: center; -} - -/** Avatars - ******************************************************************************/ - -.avatar { - vertical-align: middle; - display: inline; -} - -/** Statuses: Quotes - * - * \e906: icon-quote-open - * \e905: icon-quote-close - * - * The `content` class on the blockquote allows to apply styles to markdown - * generated HTML in the quote: https://bulma.io/documentation/elements/content/ - * - * ```html - *
- *
- * User generated quote in markdown… - *
- * - *

— Book Title by Author

- *
- * ``` - ******************************************************************************/ - -.quote > blockquote { - position: relative; - padding-left: 2em; -} - -.quote > blockquote::before, -.quote > blockquote::after { - font-family: icomoon; - position: absolute; -} - -.quote > blockquote::before { - content: "\e907"; /* icon-quote-open */ - top: 0; - left: 0; -} - -.quote > blockquote::after { - content: "\e906"; /* icon-quote-close */ - right: 0; -} - -/** Animations and transitions - ******************************************************************************/ - -@keyframes turning { - from { transform: rotateZ(0deg); } - to { transform: rotateZ(360deg); } -} - -.is-processing .icon-spinner::before { - animation: turning 1.5s infinite linear; -} - -.icon-spinner { - display: none; -} - -.is-processing .icon-spinner { - display: flex; -} - -@media (prefers-reduced-motion: reduce) { - .is-processing .icon::before { - transition-duration: 0.001ms !important; - } -} - -/** Transient notification - ******************************************************************************/ - -#live-messages { - position: fixed; - bottom: 1em; - right: 1em; -} - -/** Tooltips - ******************************************************************************/ - -.tooltip { - width: 100%; -} - -/** States - ******************************************************************************/ - -/* "disabled" for non-buttons */ - -.is-disabled { - background-color: #dbdbdb; - border-color: #dbdbdb; - box-shadow: none; - color: #7a7a7a; - opacity: 0.5; - cursor: not-allowed; -} - -/* Book preview table - ******************************************************************************/ - -.book-preview td { - vertical-align: middle; -} - -@media only screen and (max-width: 768px) { - table.is-mobile, - table.is-mobile tbody { - display: block; - } - - table.is-mobile tr { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - border-top: 1px solid #dbdbdb; - } - - table.is-mobile td { - display: block; - box-sizing: border-box; - flex: 1 0 100%; - order: 2; - border-bottom: 0; - } - - table.is-mobile td.book-preview-top-row { - order: 1; - flex-basis: auto; - } - - table.is-mobile td[data-title]:not(:empty)::before { - content: attr(data-title); - display: block; - font-size: 0.75em; - font-weight: bold; - } - - table.is-mobile td:empty { - padding: 0; - } - - table.is-mobile th, - table.is-mobile thead { - display: none; - } -} - -/* Book list - ******************************************************************************/ - -ol.ordered-list { - list-style: none; - counter-reset: list-counter; -} - -ol.ordered-list li { - counter-increment: list-counter; -} - -ol.ordered-list li::before { - content: counter(list-counter); - position: absolute; - left: -20px; - width: 20px; - height: 24px; - background-color: #fff; - border: 1px solid #dbdbdb; - border-right: 0; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - display: flex; - justify-content: center; - align-items: center; - color: #888; - font-size: 0.8em; - font-weight: bold; -} - -@media only screen and (max-width: 768px) { - ol.ordered-list li::before { - left: 0; - z-index: 1; - border: 0; - border-right: 1px solid #dbdbdb; - border-bottom: 1px solid #dbdbdb; - border-radius: 0; - border-bottom-right-radius: 2px; - } -} - -.overflow-wrap-anywhere { - overflow-wrap: anywhere; - min-width: 10em; -} - -/* Threads - ******************************************************************************/ - -.thread .is-main .card { - box-shadow: 0 0.5em 1em -0.125em rgb(50 115 220 / 35%), 0 0 0 1px rgb(50 115 220 / 2%); -} - -.thread::after { - content: ""; - position: absolute; - z-index: -1; - top: 0; - bottom: 0; - left: 2.5em; - border-left: 2px solid #e0e0e0; -} - -/* Breadcrumbs - ******************************************************************************/ - -.breadcrumb li:first-child * { - padding-left: 0; -} - -.breadcrumb li > * { - align-items: center; - display: flex; - justify-content: center; - padding: 0 0.75em; -} - -/* Notifications page - ******************************************************************************/ - -.notification a.icon { - text-decoration: none !important; -} - -/* Breadcrumbs - ******************************************************************************/ - -.books-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1rem; - align-items: end; - justify-items: stretch; -} - -.books-grid > .is-big { - grid-column: span 2; - grid-row: span 2; - justify-self: stretch; -} - -.books-grid .book-cover { - width: 100%; -} - -.books-grid .book-title { - --height-basis: 1.35rem; - - display: block; - margin-top: 0.5rem; - line-height: var(--height-basis); - min-height: calc(2 * var(--height-basis)); -} - -@media only screen and (min-width: 769px) { - .books-grid { - gap: 1.5rem; - grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); - } -} - -/* Copy - ******************************************************************************/ - -.horizontal-copy { - display: flex; - flex-direction: row; - align-items: center; - gap: 0.75rem; -} - -.horizontal-copy textarea { - min-width: initial; - white-space: nowrap; -} - -.horizontal-copy button { - align-self: stretch; - height: unset; -} - -.vertical-copy { - display: flex; - flex-direction: column; - align-items: stretch; - gap: 0.75rem; -} - -.vertical-copy button { - width: 100%; -} - -/* Dimensions - * @todo These could be in rem. - ******************************************************************************/ - -.is-32x32 { - min-width: 32px !important; - min-height: 32px !important; -} - -.is-96x96 { - min-width: 96px !important; - min-height: 96px !important; -} - -.is-w-auto { - width: auto !important; -} - -.is-w-xs { - width: 80px !important; -} - -.is-w-s { - width: 100px !important; -} - -.is-w-m { - width: 150px !important; -} - -.is-w-l { - width: 200px !important; -} - -.is-w-xl { - width: 250px !important; -} - -.is-w-xxl { - width: 500px !important; -} - -.is-h-xs { - height: 80px !important; -} - -.is-h-s { - height: 100px !important; -} - -.is-h-m { - height: 150px !important; -} - -.is-h-l { - height: 200px !important; -} - -.is-h-xl { - height: 250px !important; -} - -.is-h-xxl { - height: 500px !important; -} - -@media only screen and (max-width: 768px) { - .is-w-auto-mobile { - width: auto !important; - } - - .is-w-xs-mobile { - width: 80px !important; - } - - .is-w-s-mobile { - width: 100px !important; - } - - .is-w-m-mobile { - width: 150px !important; - } - - .is-w-l-mobile { - width: 200px !important; - } - - .is-w-xl-mobile { - width: 250px !important; - } - - .is-w-xxl-mobile { - width: 500px !important; - } - - .is-h-xs-mobile { - height: 80px !important; - } - - .is-h-s-mobile { - height: 100px !important; - } - - .is-h-m-mobile { - height: 150px !important; - } - - .is-h-l-mobile { - height: 200px !important; - } - - .is-h-xl-mobile { - height: 250px !important; - } - - .is-h-xxl-mobile { - height: 500px !important; - } -} - -@media only screen and (min-width: 769px) { - .is-w-auto-tablet { - width: auto !important; - } - - .is-w-xs-tablet { - width: 80px !important; - } - - .is-w-s-tablet { - width: 100px !important; - } - - .is-w-m-tablet { - width: 150px !important; - } - - .is-w-l-tablet { - width: 200px !important; - } - - .is-w-xl-tablet { - width: 250px !important; - } - - .is-w-xxl-tablet { - width: 500px !important; - } - - .is-h-xs-tablet { - height: 80px !important; - } - - .is-h-s-tablet { - height: 100px !important; - } - - .is-h-m-tablet { - height: 150px !important; - } - - .is-h-l-tablet { - height: 200px !important; - } - - .is-h-xl-tablet { - height: 250px !important; - } - - .is-h-xxl-tablet { - height: 500px !important; - } -} - -@media only screen and (min-width: 1024px) { - .is-w-auto-desktop { - width: auto !important; - } - - .is-w-xs-desktop { - width: 80px !important; - } - - .is-w-s-desktop { - width: 100px !important; - } - - .is-w-m-desktop { - width: 150px !important; - } - - .is-w-l-desktop { - width: 200px !important; - } - - .is-w-xl-desktop { - width: 250px !important; - } - - .is-w-xxl-desktop { - width: 500px !important; - } - - .is-h-xs-desktop { - height: 80px !important; - } - - .is-h-s-desktop { - height: 100px !important; - } - - .is-h-m-desktop { - height: 150px !important; - } - - .is-h-l-desktop { - height: 200px !important; - } - - .is-h-xl-desktop { - height: 250px !important; - } - - .is-h-xxl-desktop { - height: 500px !important; - } -} - -/* Alignments - * - * Use them with `.align.to-(c|t|r|b|l)[-(mobile|tablet)]` - ******************************************************************************/ - -/* Flex item position - * -------------------------------------------------------------------------- */ - -.align { - display: flex !important; - flex-direction: row !important; -} - -.align.to-c { - justify-content: center !important; -} - -.align.to-t { - align-items: flex-start !important; -} - -.align.to-r { - justify-content: flex-end !important; -} - -.align.to-b { - align-items: flex-end !important; -} - -.align.to-l { - justify-content: flex-start !important; -} - -@media screen and (max-width: 768px) { - .align.to-c-mobile { - justify-content: center !important; - } - - .align.to-t-mobile { - align-items: flex-start !important; - } - - .align.to-r-mobile { - justify-content: flex-end !important; - } - - .align.to-b-mobile { - align-items: flex-end !important; - } - - .align.to-l-mobile { - justify-content: flex-start !important; - } -} - -@media screen and (min-width: 769px) { - .align.to-c-tablet { - justify-content: center !important; - } - - .align.to-t-tablet { - align-items: flex-start !important; - } - - .align.to-r-tablet { - justify-content: flex-end !important; - } - - .align.to-b-tablet { - align-items: flex-end !important; - } - - .align.to-l-tablet { - justify-content: flex-start !important; - } -} - -/* Spacings - * - * Those are supplementary rules to Bulma’s. They follow the same conventions. - * Add those you’ll need. - ******************************************************************************/ - -.mr-auto { - margin-right: auto !important; -} - -.ml-auto { - margin-left: auto !important; -} - -@media screen and (max-width: 768px) { - .m-0-mobile { - margin: 0 !important; - } - - .mr-auto-mobile { - margin-right: auto !important; - } - - .ml-auto-mobile { - margin-left: auto !important; - } - - .mt-3-mobile { - margin-top: 0.75rem !important; - } - - .ml-3-mobile { - margin-left: 0.75rem !important; - } - - .mx-3-mobile { - margin-right: 0.75rem !important; - margin-left: 0.75rem !important; - } - - .my-3-mobile { - margin-top: 0.75rem !important; - margin-bottom: 0.75rem !important; - } -} - -@media screen and (min-width: 769px) { - .m-0-tablet { - margin: 0 !important; - } - - .mr-auto-tablet { - margin-right: auto !important; - } - - .ml-auto-tablet { - margin-left: auto !important; - } - - .mt-3-tablet { - margin-top: 0.75rem !important; - } - - .ml-3-tablet { - margin-left: 0.75rem !important; - } - - .mx-3-tablet { - margin-right: 0.75rem !important; - margin-left: 0.75rem !important; - } - - .my-3-tablet { - margin-top: 0.75rem !important; - margin-bottom: 0.75rem !important; - } -} - -/* Gaps (for Flexbox and Grid) - * - * Those are supplementary rules to Bulma’s. They follow the same conventions. - * Add those you’ll need. - ******************************************************************************/ - -.is-gap-0 { - gap: 0; -} - -.is-gap-1 { - gap: 0.25rem; -} - -.is-gap-2 { - gap: 0.5rem; -} - -.is-gap-3 { - gap: 0.75rem; -} - -.is-gap-4 { - gap: 1rem; -} - -.is-gap-5 { - gap: 1.5rem; -} - -.is-gap-6 { - gap: 3rem; -} - -.is-row-gap-0 { - row-gap: 0; -} - -.is-row-gap-1 { - row-gap: 0.25rem; -} - -.is-row-gap-2 { - row-gap: 0.5rem; -} - -.is-row-gap-3 { - row-gap: 0.75rem; -} - -.is-row-gap-4 { - row-gap: 1rem; -} - -.is-row-gap-5 { - row-gap: 1.5rem; -} - -.is-row-gap-6 { - row-gap: 3rem; -} - -.is-column-gap-0 { - column-gap: 0; -} - -.is-column-gap-1 { - column-gap: 0.25rem; -} - -.is-column-gap-2 { - column-gap: 0.5rem; -} - -.is-column-gap-3 { - column-gap: 0.75rem; -} - -.is-column-gap-4 { - column-gap: 1rem; -} - -.is-column-gap-5 { - column-gap: 1.5rem; -} - -.is-column-gap-6 { - column-gap: 3rem; -} - -/* Barcode scanner CSS */ -#barcode-scanner { - position: relative; - min-height: 200px; -} - -#barcode-scanner .drawingBuffer { - position: absolute; - top: 0; - left: 0; - height: auto; - width: 100%; -} diff --git a/bookwyrm/static/css/bookwyrm/_all.scss b/bookwyrm/static/css/bookwyrm/_all.scss index 11d7e403d..e9333bd19 100644 --- a/bookwyrm/static/css/bookwyrm/_all.scss +++ b/bookwyrm/static/css/bookwyrm/_all.scss @@ -1,6 +1,7 @@ /** Imports ******************************************************************************/ @import "components/avatar"; +@import "components/barcode"; @import "components/book_cover"; @import "components/book_grid"; @import "components/book_list"; diff --git a/bookwyrm/static/css/bookwyrm/components/_barcode.scss b/bookwyrm/static/css/bookwyrm/components/_barcode.scss new file mode 100644 index 000000000..da1aa721c --- /dev/null +++ b/bookwyrm/static/css/bookwyrm/components/_barcode.scss @@ -0,0 +1,14 @@ + +/* Barcode scanner CSS */ +#barcode-scanner { + position: relative; + min-height: 200px; + + .drawingBuffer { + position: absolute; + top: 0; + left: 0; + height: auto; + width: 100%; + } +}