From c0c8a70eef9aaa83185cd276fbac35b7953c07a2 Mon Sep 17 00:00:00 2001 From: Matt Fannin Date: Sat, 20 Apr 2024 21:21:19 +1200 Subject: [PATCH] Update to Bulma v1 Update Bulma list to do away with using Bulma's internal sass variables in favour of new css variables. Created a matching set of css variables for Bulma list so people can choose to keep using the old sass ones for customisation in their project, or switch to the newer css variables ( prefixed with be- for 'bulma extension' to help differentiate them in the browser devtools as there are a lot of these in Bulma v1! Updates the documentation slightly to better match the style of Bulma's updated docs. --- .github/workflows/npm-publish.yml | 6 +- .ruby-version | 1 + Gemfile.lock | 121 ++++++--- README.md | 4 +- build/bulma-list.sass | 4 - css/bulma-list.css | 2 +- css/bulma-list.css.map | 2 +- docs/_includes/components/hero.html | 16 +- docs/_includes/elements/improve-page.html | 2 +- docs/_includes/elements/snippet.html | 2 +- docs/_includes/global/head.html | 4 +- docs/_layouts/default.html | 7 +- docs/_layouts/documentation.html | 106 +++++--- docs/css/bulma-list.css | 120 +-------- docs/css/bulma-list.css.map | 2 +- docs/index.html | 292 ++++++++++++++++++++-- package.json | 10 +- sass/bulma-list.sass | 86 ------- sass/bulma-list.scss | 135 ++++++++++ yarn.lock | 19 +- 20 files changed, 617 insertions(+), 324 deletions(-) create mode 100644 .ruby-version delete mode 100644 build/bulma-list.sass delete mode 100644 sass/bulma-list.sass create mode 100644 sass/bulma-list.scss diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index cd1c484..3296492 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -16,8 +16,8 @@ jobs: with: node-version: 16 registry-url: https://registry.npmjs.org/ - - run: npm ci - - run: npm build - - run: npm publish + - run: yarn install + - run: yarn build + - run: yarn publish env: NODE_AUTH_TOKEN: ${{secrets.npm_token}} diff --git a/.ruby-version b/.ruby-version new file mode 100644 index 0000000..acf9bf0 --- /dev/null +++ b/.ruby-version @@ -0,0 +1 @@ +3.2.2 \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock index c2e5128..0fcca22 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,67 +1,128 @@ GEM remote: https://rubygems.org/ specs: - addressable (2.8.0) - public_suffix (>= 2.0.2, < 5.0) + addressable (2.8.6) + public_suffix (>= 2.0.2, < 6.0) colorator (1.1.0) - concurrent-ruby (1.1.9) - em-websocket (0.5.2) + concurrent-ruby (1.2.3) + em-websocket (0.5.3) eventmachine (>= 0.12.9) - http_parser.rb (~> 0.6.0) + http_parser.rb (~> 0) eventmachine (1.2.7) - ffi (1.15.4) + ffi (1.16.3) forwardable-extended (2.6.0) - http_parser.rb (0.6.0) - i18n (1.8.10) + google-protobuf (4.26.0) + rake (>= 13) + google-protobuf (4.26.0-aarch64-linux) + rake (>= 13) + google-protobuf (4.26.0-arm64-darwin) + rake (>= 13) + google-protobuf (4.26.0-x86-linux) + rake (>= 13) + google-protobuf (4.26.0-x86_64-darwin) + rake (>= 13) + google-protobuf (4.26.0-x86_64-linux) + rake (>= 13) + http_parser.rb (0.8.0) + i18n (1.14.4) concurrent-ruby (~> 1.0) - jekyll (4.2.0) + jekyll (4.3.3) addressable (~> 2.4) colorator (~> 1.0) em-websocket (~> 0.5) i18n (~> 1.0) - jekyll-sass-converter (~> 2.0) + jekyll-sass-converter (>= 2.0, < 4.0) jekyll-watch (~> 2.0) - kramdown (~> 2.3) + kramdown (~> 2.3, >= 2.3.1) kramdown-parser-gfm (~> 1.0) liquid (~> 4.0) - mercenary (~> 0.4.0) + mercenary (>= 0.3.6, < 0.5) pathutil (~> 0.9) - rouge (~> 3.0) + rouge (>= 3.0, < 5.0) safe_yaml (~> 1.0) - terminal-table (~> 2.0) - jekyll-sass-converter (2.1.0) - sassc (> 2.0.1, < 3.0) + terminal-table (>= 1.8, < 4.0) + webrick (~> 1.7) + jekyll-sass-converter (3.0.0) + sass-embedded (~> 1.54) jekyll-watch (2.2.1) listen (~> 3.0) - kramdown (2.3.1) + kramdown (2.4.0) rexml kramdown-parser-gfm (1.1.0) kramdown (~> 2.0) - liquid (4.0.3) - listen (3.7.0) + liquid (4.0.4) + listen (3.9.0) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) mercenary (0.4.0) pathutil (0.16.2) forwardable-extended (~> 2.6) - public_suffix (4.0.6) - rb-fsevent (0.11.0) + public_suffix (5.0.4) + rake (13.1.0) + rb-fsevent (0.11.2) rb-inotify (0.10.1) ffi (~> 1.0) - rexml (3.2.5) - rouge (3.26.0) + rexml (3.2.6) + rouge (4.2.1) safe_yaml (1.0.5) - sassc (2.4.0) - ffi (~> 1.9) - terminal-table (2.0.0) - unicode-display_width (~> 1.1, >= 1.1.1) - unicode-display_width (1.8.0) + sass-embedded (1.72.0) + google-protobuf (>= 3.25, < 5.0) + rake (>= 13.0.0) + sass-embedded (1.72.0-aarch64-linux-android) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-aarch64-linux-gnu) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-aarch64-linux-musl) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-arm-linux-androideabi) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-arm-linux-gnueabihf) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-arm-linux-musleabihf) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-arm64-darwin) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-x86-linux-android) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-x86-linux-gnu) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-x86-linux-musl) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-x86_64-darwin) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-x86_64-linux-android) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-x86_64-linux-gnu) + google-protobuf (>= 3.25, < 5.0) + sass-embedded (1.72.0-x86_64-linux-musl) + google-protobuf (>= 3.25, < 5.0) + terminal-table (3.0.2) + unicode-display_width (>= 1.1.1, < 3) + unicode-display_width (2.5.0) + webrick (1.8.1) PLATFORMS - x86_64-darwin-20 + aarch64-linux + aarch64-linux-android + aarch64-linux-gnu + aarch64-linux-musl + arm-linux-androideabi + arm-linux-gnueabihf + arm-linux-musleabihf + arm64-darwin + ruby + x86-linux + x86-linux-android + x86-linux-gnu + x86-linux-musl + x86_64-darwin + x86_64-linux + x86_64-linux-android + x86_64-linux-gnu + x86_64-linux-musl DEPENDENCIES jekyll BUNDLED WITH - 2.2.27 + 2.5.7 diff --git a/README.md b/README.md index 683a645..35193ec 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # bulma-list -A simple list component extension for [Bulma](https://bulma.io). +A simple list component extension for [Bulma](https://bulma.io) (requires Bulma v1)). The list component is a simple vertical pattern for displaying data related to a single topic. Inspired by similair patterns in [Ant](https://ant.design/components/list), [Material](https://material.io/components/lists), and [Ionic](https://ionicframework.com/docs/api/list). @@ -30,7 +30,7 @@ The documentation is built using a copy of Bulma's own Jekyll based system to ke [Documentation & examples](https://bluefantail.github.io/bulma-list/) -## Figma libraries (new) +## Figma libraries You or your team designing in Figma? I've published complete community libraries for both Bulma and Bulma list. diff --git a/build/bulma-list.sass b/build/bulma-list.sass deleted file mode 100644 index 9a7f32d..0000000 --- a/build/bulma-list.sass +++ /dev/null @@ -1,4 +0,0 @@ -// Includes bulma variables needed to build static css files. Don't use this in -// your project directly — use sass/bulma-list instead. -@import "~bulma/sass/utilities/mixins" -@import "sass/bulma-list" diff --git a/css/bulma-list.css b/css/bulma-list.css index eb5e3af..909944b 100644 --- a/css/bulma-list.css +++ b/css/bulma-list.css @@ -1,2 +1,2 @@ -.list{color:#4a4a4a;flex-direction:column;display:flex}.list.has-hidden-images .list-item-image{display:none}.list.has-hoverable-list-items .list-item:hover{background-color:#fafafa}.list.has-overflow-ellipsis .list-item-content{min-width:0;max-width:calc(var(--length)*1ch)}.list.has-overflow-ellipsis .list-item-content>*{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (hover:hover){.list:not(.has-visible-pointer-controls) .list-item-controls{opacity:0;visibility:hidden}}.list-item{align-items:center;transition:background-color .125s ease-out;display:flex;position:relative}@media (hover:hover){.list-item:hover .list-item-controls,.list-item:focus-within .list-item-controls{opacity:initial;visibility:initial}}.list-item:not(.box){padding:.75em}.list-item:not(:last-child):not(.box){border-bottom:1px solid #dbdbdb}@media screen and (max-width:768px){.list:not(.has-overflow-ellipsis) .list-item{flex-wrap:wrap}}.list-item-image{flex-shrink:0;margin-right:.75em}@media screen and (max-width:768px){.list-item-image{padding:.5rem 0}}.list-item-content{flex-direction:column;flex-grow:1;display:flex}@media screen and (max-width:768px){.list-item-content{padding:.5rem 0}}.list-item-title{color:#363636;font-weight:600}.list-item-description{color:#7a7a7a}.list-item-controls{flex-shrink:0;transition:opacity .125s ease-out}@media screen and (max-width:768px){.list-item-controls{flex-wrap:wrap;padding:.5rem 0}}@media screen and (min-width:769px),print{.list-item-controls{padding-left:.75em}.list:not(.has-visible-pointer-controls) .list-item-controls{height:100%;align-items:center;padding-right:.75em;display:flex;position:absolute;right:0}} +.list{--be-list-color:var(--bulma-text);--be-list-item-description-color:var(--bulma-text-50);--be-list-item-divider-color:var(--bulma-border);--be-list-item-hover-color:var(--bulma-scheme-main-bis);--be-list-item-image-margin:.75em;--be-list-item-padding:.75em;--be-list-item-title-color:var(--bulma-text-strong);--be-list-item-title-weight:var(--bulma-weight-semibold);color:var(--be-list-color);flex-direction:column;display:flex}.list.has-hidden-images .list-item-image{display:none}.list.has-hoverable-list-items .list-item:hover{background-color:var(--be-list-item-hover-color)}.list.has-overflow-ellipsis .list-item-content{min-width:0;max-width:calc(var(--length)*1ch)}.list.has-overflow-ellipsis .list-item-content>*{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (hover:hover){.list:not(.has-visible-pointer-controls) .list-item-controls{opacity:0;visibility:hidden}}.list .list-item{align-items:center;transition:background-color .125s ease-out;display:flex;position:relative}@media (hover:hover){.list .list-item:hover .list-item-controls,.list .list-item:focus-within .list-item-controls{opacity:initial;visibility:initial}}.list .list-item:not(.box){padding:var(--be-list-item-padding)}.list .list-item:not(:last-child):not(.box){border-bottom:1px solid var(--be-list-item-divider-color)}@media screen and (max-width:768px){.list:not(.has-overflow-ellipsis) .list .list-item{flex-wrap:wrap}}.list .list-item-image{margin-right:var(--be-list-item-image-margin);flex-shrink:0}@media screen and (max-width:768px){.list .list-item-image{padding:.5rem 0}}.list .list-item-content{flex-direction:column;flex-grow:1;display:flex}@media screen and (max-width:768px){.list .list-item-content{padding:.5rem 0}}.list .list-item-title{color:var(--be-list-item-title-color);font-weight:var(--be-list-item-title-weight)}.list .list-item-description{color:var(--be-list-item-description-color)}.list .list-item-controls{flex-shrink:0;transition:opacity .125s ease-out}@media screen and (max-width:768px){.list .list-item-controls{flex-wrap:wrap;padding:.5rem 0}}@media screen and (min-width:769px),print{.list .list-item-controls{padding-left:var(--be-list-item-padding)}.list:not(.has-visible-pointer-controls) .list .list-item-controls{height:100%;padding-right:var(--be-list-item-padding);align-items:center;display:flex;position:absolute;right:0}} /*# sourceMappingURL=bulma-list.css.map */ diff --git a/css/bulma-list.css.map b/css/bulma-list.css.map index 40d177d..816ef9d 100644 --- a/css/bulma-list.css.map +++ b/css/bulma-list.css.map @@ -1 +1 @@ -{"mappings":"AEaA,uDAIE,sDAEA,yEAEA,6FAGE,2GAdF,qBAkBA,0FAKF,wGAvBE,qBA4BA,qHAKA,mCAEA,sEEgDA,oCF7CE,6DAGJ,kDE0CE,oCF1CF,kCAMA,kEEoCE,oCFpCF,oCAOA,+CAIA,qCAGA,oEEsBE,oCFtBF,oDE0BE,0CF1BF,uCAQI","sources":["bulma-list.css","build/bulma-list.sass","sass/bulma-list.sass","node_modules/bulma/sass/utilities/initial-variables.sass","node_modules/bulma/sass/utilities/mixins.sass"],"sourcesContent":[".list {\n color: #4a4a4a;\n flex-direction: column;\n display: flex;\n}\n\n.list.has-hidden-images .list-item-image {\n display: none;\n}\n\n.list.has-hoverable-list-items .list-item:hover {\n background-color: #fafafa;\n}\n\n.list.has-overflow-ellipsis .list-item-content {\n min-width: 0;\n max-width: calc(var(--length) * 1ch);\n}\n\n.list.has-overflow-ellipsis .list-item-content > * {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n@media (hover: hover) {\n .list:not(.has-visible-pointer-controls) .list-item-controls {\n opacity: 0;\n visibility: hidden;\n }\n}\n\n.list-item {\n align-items: center;\n transition: background-color .125s ease-out;\n display: flex;\n position: relative;\n}\n\n@media (hover: hover) {\n .list-item:hover .list-item-controls, .list-item:focus-within .list-item-controls {\n opacity: initial;\n visibility: initial;\n }\n}\n\n.list-item:not(.box) {\n padding: .75em;\n}\n\n.list-item:not(:last-child):not(.box) {\n border-bottom: 1px solid #dbdbdb;\n}\n\n@media screen and (max-width: 768px) {\n .list:not(.has-overflow-ellipsis) .list-item {\n flex-wrap: wrap;\n }\n}\n\n.list-item-image {\n flex-shrink: 0;\n margin-right: .75em;\n}\n\n@media screen and (max-width: 768px) {\n .list-item-image {\n padding: .5rem 0;\n }\n}\n\n.list-item-content {\n flex-direction: column;\n flex-grow: 1;\n display: flex;\n}\n\n@media screen and (max-width: 768px) {\n .list-item-content {\n padding: .5rem 0;\n }\n}\n\n.list-item-title {\n color: #363636;\n font-weight: 600;\n}\n\n.list-item-description {\n color: #7a7a7a;\n}\n\n.list-item-controls {\n flex-shrink: 0;\n transition: opacity .125s ease-out;\n}\n\n@media screen and (max-width: 768px) {\n .list-item-controls {\n flex-wrap: wrap;\n padding: .5rem 0;\n }\n}\n\n@media screen and (min-width: 769px), print {\n .list-item-controls {\n padding-left: .75em;\n }\n\n .list:not(.has-visible-pointer-controls) .list-item-controls {\n height: 100%;\n align-items: center;\n padding-right: .75em;\n display: flex;\n position: absolute;\n right: 0;\n }\n}\n\n/*# sourceMappingURL=bulma-list.css.map */\n","// Includes bulma variables needed to build static css files. Don't use this in\n// your project directly — use sass/bulma-list instead.\n@import \"~bulma/sass/utilities/mixins\"\n@import \"sass/bulma-list\"\n","$list-color: $text !default\n$list-item-description-color: $text-light !default\n$list-item-divider-color: $border !default\n$list-item-hover-color: $scheme-main-bis !default\n$list-item-image-margin: 0.75em !default\n$list-item-padding: 0.75em !default\n$list-item-title-color: $text-strong !default\n$list-item-title-weight: $weight-semibold !default\n\n=has-mouse-pointer\n @media (hover: hover)\n @content\n\n.list\n color: $list-color\n display: flex\n flex-direction: column\n &.has-hidden-images .list-item-image\n display: none\n &.has-hoverable-list-items .list-item:hover\n background-color: $list-item-hover-color\n &.has-overflow-ellipsis .list-item-content\n min-width: 0\n max-width: calc(var(--length) * 1ch)\n & > *\n overflow: hidden\n text-overflow: ellipsis\n white-space: nowrap\n &:not(.has-visible-pointer-controls) .list-item-controls\n +has-mouse-pointer\n opacity: 0\n visibility: hidden\n\n.list-item\n align-items: center\n display: flex\n position: relative\n transition: background-color ease-out 0.125s\n &:hover .list-item-controls,\n &:focus-within .list-item-controls\n +has-mouse-pointer\n opacity: initial\n visibility: initial\n &:not(.box)\n padding: $list-item-padding\n &:not(:last-child):not(.box)\n border-bottom: 1px solid $list-item-divider-color\n +mobile\n .list:not(.has-overflow-ellipsis) &\n flex-wrap: wrap\n\n.list-item-image\n flex-shrink: 0\n margin-right: $list-item-image-margin\n +mobile\n padding: 0.5rem 0\n\n.list-item-content\n display: flex\n flex-direction: column\n flex-grow: 1\n +mobile\n padding: 0.5rem 0\n\n.list-item-title\n color: $list-item-title-color\n font-weight: $list-item-title-weight\n\n.list-item-description\n color: $list-item-description-color\n\n.list-item-controls\n flex-shrink: 0\n transition: opacity ease-out 0.125s\n +mobile\n padding: 0.5rem 0\n flex-wrap: wrap\n +tablet\n padding-left: $list-item-padding\n .list:not(.has-visible-pointer-controls) &\n align-items: center\n display: flex\n height: 100%\n padding-right: $list-item-padding\n position: absolute\n right: 0\n","// Colors\n\n$black: hsl(0, 0%, 4%) !default\n$black-bis: hsl(0, 0%, 7%) !default\n$black-ter: hsl(0, 0%, 14%) !default\n\n$grey-darker: hsl(0, 0%, 21%) !default\n$grey-dark: hsl(0, 0%, 29%) !default\n$grey: hsl(0, 0%, 48%) !default\n$grey-light: hsl(0, 0%, 71%) !default\n$grey-lighter: hsl(0, 0%, 86%) !default\n$grey-lightest: hsl(0, 0%, 93%) !default\n\n$white-ter: hsl(0, 0%, 96%) !default\n$white-bis: hsl(0, 0%, 98%) !default\n$white: hsl(0, 0%, 100%) !default\n\n$orange: hsl(14, 100%, 53%) !default\n$yellow: hsl(44, 100%, 77%) !default\n$green: hsl(153, 53%, 53%) !default\n$turquoise: hsl(171, 100%, 41%) !default\n$cyan: hsl(207, 61%, 53%) !default\n$blue: hsl(229, 53%, 53%) !default\n$purple: hsl(271, 100%, 71%) !default\n$red: hsl(348, 86%, 61%) !default\n\n// Typography\n\n$family-sans-serif: BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif !default\n$family-monospace: monospace !default\n$render-mode: optimizeLegibility !default\n\n$size-1: 3rem !default\n$size-2: 2.5rem !default\n$size-3: 2rem !default\n$size-4: 1.5rem !default\n$size-5: 1.25rem !default\n$size-6: 1rem !default\n$size-7: 0.75rem !default\n\n$weight-light: 300 !default\n$weight-normal: 400 !default\n$weight-medium: 500 !default\n$weight-semibold: 600 !default\n$weight-bold: 700 !default\n\n// Spacing\n\n$block-spacing: 1.5rem !default\n\n// Responsiveness\n\n// The container horizontal gap, which acts as the offset for breakpoints\n$gap: 32px !default\n// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16\n$tablet: 769px !default\n// 960px container + 4rem\n$desktop: 960px + (2 * $gap) !default\n// 1152px container + 4rem\n$widescreen: 1152px + (2 * $gap) !default\n$widescreen-enabled: true !default\n// 1344px container + 4rem\n$fullhd: 1344px + (2 * $gap) !default\n$fullhd-enabled: true !default\n\n// Miscellaneous\n\n$easing: ease-out !default\n$radius-small: 2px !default\n$radius: 4px !default\n$radius-large: 6px !default\n$radius-rounded: 9999px !default\n$speed: 86ms !default\n\n// Flags\n\n$variable-columns: true !default\n$rtl: false !default\n","@import \"derived-variables\"\n\n=clearfix\n &::after\n clear: both\n content: \" \"\n display: table\n\n=center($width, $height: 0)\n position: absolute\n @if $height != 0\n left: calc(50% - (#{$width} * 0.5))\n top: calc(50% - (#{$height} * 0.5))\n @else\n left: calc(50% - (#{$width} * 0.5))\n top: calc(50% - (#{$width} * 0.5))\n\n=fa($size, $dimensions)\n display: inline-block\n font-size: $size\n height: $dimensions\n line-height: $dimensions\n text-align: center\n vertical-align: top\n width: $dimensions\n\n=hamburger($dimensions)\n cursor: pointer\n display: block\n height: $dimensions\n position: relative\n width: $dimensions\n span\n background-color: currentColor\n display: block\n height: 1px\n left: calc(50% - 8px)\n position: absolute\n transform-origin: center\n transition-duration: $speed\n transition-property: background-color, opacity, transform\n transition-timing-function: $easing\n width: 16px\n &:nth-child(1)\n top: calc(50% - 6px)\n &:nth-child(2)\n top: calc(50% - 1px)\n &:nth-child(3)\n top: calc(50% + 4px)\n &:hover\n background-color: bulmaRgba(black, 0.05)\n // Modifers\n &.is-active\n span\n &:nth-child(1)\n transform: translateY(5px) rotate(45deg)\n &:nth-child(2)\n opacity: 0\n &:nth-child(3)\n transform: translateY(-5px) rotate(-45deg)\n\n=overflow-touch\n -webkit-overflow-scrolling: touch\n\n=placeholder\n $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'\n @each $placeholder in $placeholders\n &:#{$placeholder}-placeholder\n @content\n\n=reset\n -moz-appearance: none\n -webkit-appearance: none\n appearance: none\n background: none\n border: none\n color: currentColor\n font-family: inherit\n font-size: 1em\n margin: 0\n padding: 0\n\n// Responsiveness\n\n=from($device)\n @media screen and (min-width: $device)\n @content\n\n=until($device)\n @media screen and (max-width: $device - 1px)\n @content\n\n=mobile\n @media screen and (max-width: $tablet - 1px)\n @content\n\n=tablet\n @media screen and (min-width: $tablet), print\n @content\n\n=tablet-only\n @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)\n @content\n\n=touch\n @media screen and (max-width: $desktop - 1px)\n @content\n\n=desktop\n @media screen and (min-width: $desktop)\n @content\n\n=desktop-only\n @if $widescreen-enabled\n @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)\n @content\n\n=until-widescreen\n @if $widescreen-enabled\n @media screen and (max-width: $widescreen - 1px)\n @content\n\n=widescreen\n @if $widescreen-enabled\n @media screen and (min-width: $widescreen)\n @content\n\n=widescreen-only\n @if $widescreen-enabled and $fullhd-enabled\n @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)\n @content\n\n=until-fullhd\n @if $fullhd-enabled\n @media screen and (max-width: $fullhd - 1px)\n @content\n\n=fullhd\n @if $fullhd-enabled\n @media screen and (min-width: $fullhd)\n @content\n\n=ltr\n @if not $rtl\n @content\n\n=rtl\n @if $rtl\n @content\n\n=ltr-property($property, $spacing, $right: true)\n $normal: if($right, \"right\", \"left\")\n $opposite: if($right, \"left\", \"right\")\n @if $rtl\n #{$property}-#{$opposite}: $spacing\n @else\n #{$property}-#{$normal}: $spacing\n\n=ltr-position($spacing, $right: true)\n $normal: if($right, \"right\", \"left\")\n $opposite: if($right, \"left\", \"right\")\n @if $rtl\n #{$opposite}: $spacing\n @else\n #{$normal}: $spacing\n\n// Placeholders\n\n=unselectable\n -webkit-touch-callout: none\n -webkit-user-select: none\n -moz-user-select: none\n -ms-user-select: none\n user-select: none\n\n=arrow($color: transparent)\n border: 3px solid $color\n border-radius: 2px\n border-right: 0\n border-top: 0\n content: \" \"\n display: block\n height: 0.625em\n margin-top: -0.4375em\n pointer-events: none\n position: absolute\n top: 50%\n transform: rotate(-45deg)\n transform-origin: center\n width: 0.625em\n\n=block($spacing: $block-spacing)\n &:not(:last-child)\n margin-bottom: $spacing\n\n=delete\n +unselectable\n -moz-appearance: none\n -webkit-appearance: none\n background-color: bulmaRgba($scheme-invert, 0.2)\n border: none\n border-radius: $radius-rounded\n cursor: pointer\n pointer-events: auto\n display: inline-block\n flex-grow: 0\n flex-shrink: 0\n font-size: 0\n height: 20px\n max-height: 20px\n max-width: 20px\n min-height: 20px\n min-width: 20px\n outline: none\n position: relative\n vertical-align: top\n width: 20px\n &::before,\n &::after\n background-color: $scheme-main\n content: \"\"\n display: block\n left: 50%\n position: absolute\n top: 50%\n transform: translateX(-50%) translateY(-50%) rotate(45deg)\n transform-origin: center center\n &::before\n height: 2px\n width: 50%\n &::after\n height: 50%\n width: 2px\n &:hover,\n &:focus\n background-color: bulmaRgba($scheme-invert, 0.3)\n &:active\n background-color: bulmaRgba($scheme-invert, 0.4)\n // Sizes\n &.is-small\n height: 16px\n max-height: 16px\n max-width: 16px\n min-height: 16px\n min-width: 16px\n width: 16px\n &.is-medium\n height: 24px\n max-height: 24px\n max-width: 24px\n min-height: 24px\n min-width: 24px\n width: 24px\n &.is-large\n height: 32px\n max-height: 32px\n max-width: 32px\n min-height: 32px\n min-width: 32px\n width: 32px\n\n=loader\n animation: spinAround 500ms infinite linear\n border: 2px solid $grey-lighter\n border-radius: $radius-rounded\n border-right-color: transparent\n border-top-color: transparent\n content: \"\"\n display: block\n height: 1em\n position: relative\n width: 1em\n\n=overlay($offset: 0)\n bottom: $offset\n left: $offset\n position: absolute\n right: $offset\n top: $offset\n\n"],"names":[],"version":3,"file":"bulma-list.css.map"} \ No newline at end of file +{"mappings":"ACQA,ibAuBE,sDAIA,iGAIA,6FAGE,2GAvCF,qBA8CA,0FAOA,8GArDA,qBA2DE,iIAQA,+DAIA,sGCkNF,oCD7MI,mEAMJ,mFCuMA,oCDvMA,wCASA,wEC8LA,oCD9LA,0CAUA,0GAKA,yEAIA,0EC2KA,oCD3KA,0DCiLA,0CDjLA,mEAWI","sources":["bulma-list.css","sass/bulma-list.scss","node_modules/bulma/sass/utilities/mixins.scss"],"sourcesContent":[".list {\n --be-list-color: var(--bulma-text);\n --be-list-item-description-color: var(--bulma-text-50);\n --be-list-item-divider-color: var(--bulma-border);\n --be-list-item-hover-color: var(--bulma-scheme-main-bis);\n --be-list-item-image-margin: .75em;\n --be-list-item-padding: .75em;\n --be-list-item-title-color: var(--bulma-text-strong);\n --be-list-item-title-weight: var(--bulma-weight-semibold);\n color: var(--be-list-color);\n flex-direction: column;\n display: flex;\n}\n\n.list.has-hidden-images .list-item-image {\n display: none;\n}\n\n.list.has-hoverable-list-items .list-item:hover {\n background-color: var(--be-list-item-hover-color);\n}\n\n.list.has-overflow-ellipsis .list-item-content {\n min-width: 0;\n max-width: calc(var(--length) * 1ch);\n}\n\n.list.has-overflow-ellipsis .list-item-content > * {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n@media (hover: hover) {\n .list:not(.has-visible-pointer-controls) .list-item-controls {\n opacity: 0;\n visibility: hidden;\n }\n}\n\n.list .list-item {\n align-items: center;\n transition: background-color .125s ease-out;\n display: flex;\n position: relative;\n}\n\n@media (hover: hover) {\n .list .list-item:hover .list-item-controls, .list .list-item:focus-within .list-item-controls {\n opacity: initial;\n visibility: initial;\n }\n}\n\n.list .list-item:not(.box) {\n padding: var(--be-list-item-padding);\n}\n\n.list .list-item:not(:last-child):not(.box) {\n border-bottom: 1px solid var(--be-list-item-divider-color);\n}\n\n@media screen and (max-width: 768px) {\n .list:not(.has-overflow-ellipsis) .list .list-item {\n flex-wrap: wrap;\n }\n}\n\n.list .list-item-image {\n margin-right: var(--be-list-item-image-margin);\n flex-shrink: 0;\n}\n\n@media screen and (max-width: 768px) {\n .list .list-item-image {\n padding: .5rem 0;\n }\n}\n\n.list .list-item-content {\n flex-direction: column;\n flex-grow: 1;\n display: flex;\n}\n\n@media screen and (max-width: 768px) {\n .list .list-item-content {\n padding: .5rem 0;\n }\n}\n\n.list .list-item-title {\n color: var(--be-list-item-title-color);\n font-weight: var(--be-list-item-title-weight);\n}\n\n.list .list-item-description {\n color: var(--be-list-item-description-color);\n}\n\n.list .list-item-controls {\n flex-shrink: 0;\n transition: opacity .125s ease-out;\n}\n\n@media screen and (max-width: 768px) {\n .list .list-item-controls {\n flex-wrap: wrap;\n padding: .5rem 0;\n }\n}\n\n@media screen and (min-width: 769px), print {\n .list .list-item-controls {\n padding-left: var(--be-list-item-padding);\n }\n\n .list:not(.has-visible-pointer-controls) .list .list-item-controls {\n height: 100%;\n padding-right: var(--be-list-item-padding);\n align-items: center;\n display: flex;\n position: absolute;\n right: 0;\n }\n}\n\n/*# sourceMappingURL=bulma-list.css.map */\n","@use \"node_modules/bulma/sass/utilities/mixins\" as mixins;\n\n@mixin has-mouse-pointer {\n @media (hover: hover) {\n @content;\n }\n}\n\n.list {\n --be-list-color: var(--bulma-text);\n --be-list-item-description-color: var(--bulma-text-50);\n --be-list-item-divider-color: var(--bulma-border);\n --be-list-item-hover-color: var(--bulma-scheme-main-bis);\n --be-list-item-image-margin: 0.75em;\n --be-list-item-padding: 0.75em;\n --be-list-item-title-color: var(--bulma-text-strong);\n --be-list-item-title-weight: var(--bulma-weight-semibold);\n\n $list-color: var(--be-list-color) !default;\n $list-item-description-color: var(--be-list-item-description-color) !default;\n $list-item-divider-color: var(--be-list-item-divider-color) !default;\n $list-item-hover-color: var(--be-list-item-hover-color) !default;\n $list-item-image-margin: var(--be-list-item-image-margin) !default;\n $list-item-padding: var(--be-list-item-padding) !default;\n $list-item-title-color: var(--be-list-item-title-color) !default;\n $list-item-title-weight: var(--be-list-item-title-weight) !default;\n\n color: $list-color;\n display: flex;\n flex-direction: column;\n\n &.has-hidden-images .list-item-image {\n display: none;\n }\n\n &.has-hoverable-list-items .list-item:hover {\n background-color: $list-item-hover-color;\n }\n\n &.has-overflow-ellipsis .list-item-content {\n min-width: 0;\n max-width: calc(var(--length) * 1ch);\n & > * {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n\n &:not(.has-visible-pointer-controls) .list-item-controls {\n @include has-mouse-pointer {\n opacity: 0;\n visibility: hidden;\n }\n }\n\n .list-item {\n align-items: center;\n display: flex;\n position: relative;\n transition: background-color ease-out 0.125s;\n\n &:hover .list-item-controls,\n &:focus-within .list-item-controls {\n @include has-mouse-pointer {\n opacity: initial;\n visibility: initial;\n }\n }\n\n &:not(.box) {\n padding: $list-item-padding;\n }\n\n &:not(:last-child):not(.box) {\n border-bottom: 1px solid $list-item-divider-color;\n }\n\n @include mixins.mobile {\n .list:not(.has-overflow-ellipsis) & {\n flex-wrap: wrap;\n }\n }\n }\n\n .list-item-image {\n flex-shrink: 0;\n margin-right: $list-item-image-margin;\n\n @include mixins.mobile {\n padding: 0.5rem 0;\n }\n }\n\n .list-item-content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n @include mixins.mobile {\n padding: 0.5rem 0;\n }\n }\n\n .list-item-title {\n color: $list-item-title-color;\n font-weight: $list-item-title-weight;\n }\n\n .list-item-description {\n color: $list-item-description-color;\n }\n\n .list-item-controls {\n flex-shrink: 0;\n transition: opacity ease-out 0.125s;\n\n @include mixins.mobile {\n padding: 0.5rem 0;\n flex-wrap: wrap;\n }\n\n @include mixins.tablet {\n padding-left: $list-item-padding;\n .list:not(.has-visible-pointer-controls) & {\n align-items: center;\n display: flex;\n height: 100%;\n padding-right: $list-item-padding;\n position: absolute;\n right: 0;\n }\n }\n }\n}\n","@use \"initial-variables\" as iv;\n@use \"css-variables\" as cv;\n\n@mixin arrow($color: #{cv.getVar(\"link\")}) {\n border: 0.125em solid $color;\n border-right: 0;\n border-top: 0;\n content: \" \";\n display: block;\n height: 0.625em;\n margin-top: -0.4375em;\n pointer-events: none;\n position: absolute;\n top: 50%;\n transform: rotate(-45deg);\n transform-origin: center;\n transition-duration: cv.getVar(\"duration\");\n transition-property: border-color;\n width: 0.625em;\n}\n\n@mixin block($spacing: cv.getVar(\"block-spacing\")) {\n &:not(:last-child) {\n margin-bottom: $spacing;\n }\n}\n\n@mixin center($width, $height: 0) {\n position: absolute;\n @if $height != 0 {\n left: calc(50% - (#{$width} * 0.5));\n top: calc(50% - (#{$height} * 0.5));\n } @else {\n left: calc(50% - (#{$width} * 0.5));\n top: calc(50% - (#{$width} * 0.5));\n }\n}\n\n@mixin clearfix {\n &::after {\n clear: both;\n content: \" \";\n display: table;\n }\n}\n\n@mixin delete {\n @include cv.register-vars(\n (\n \"delete-dimensions\": 1.25rem,\n \"delete-background-l\": 0%,\n \"delete-background-alpha\": 0.5,\n \"delete-color\": #{cv.getVar(\"white\")},\n )\n );\n\n appearance: none;\n background-color: hsla(\n #{cv.getVar(\"scheme-h\")},\n #{cv.getVar(\"scheme-s\")},\n #{cv.getVar(\"delete-background-l\")},\n #{cv.getVar(\"delete-background-alpha\")}\n );\n border: none;\n border-radius: cv.getVar(\"radius-rounded\");\n cursor: pointer;\n pointer-events: auto;\n display: inline-flex;\n flex-grow: 0;\n flex-shrink: 0;\n font-size: 1em;\n height: cv.getVar(\"delete-dimensions\");\n max-height: cv.getVar(\"delete-dimensions\");\n max-width: cv.getVar(\"delete-dimensions\");\n min-height: cv.getVar(\"delete-dimensions\");\n min-width: cv.getVar(\"delete-dimensions\");\n outline: none;\n position: relative;\n vertical-align: top;\n width: cv.getVar(\"delete-dimensions\");\n\n &::before,\n &::after {\n background-color: cv.getVar(\"delete-color\");\n content: \"\";\n display: block;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n transform-origin: center center;\n }\n\n &::before {\n height: 2px;\n width: 50%;\n }\n\n &::after {\n height: 50%;\n width: 2px;\n }\n\n &:hover,\n &:focus {\n @include cv.register-var(\"delete-background-alpha\", 0.4);\n }\n\n &:active {\n @include cv.register-var(\"delete-background-alpha\", 0.5);\n }\n\n // Sizes\n &.#{iv.$class-prefix}is-small {\n @include cv.register-var(\"delete-dimensions\", 1rem);\n }\n\n &.#{iv.$class-prefix}is-medium {\n @include cv.register-var(\"delete-dimensions\", 1.5rem);\n }\n\n &.#{iv.$class-prefix}is-large {\n @include cv.register-var(\"delete-dimensions\", 2rem);\n }\n}\n\n@mixin fa($size, $dimensions) {\n display: inline-block;\n font-size: $size;\n height: $dimensions;\n line-height: $dimensions;\n text-align: center;\n vertical-align: top;\n width: $dimensions;\n}\n\n@mixin burger($dimensions) {\n align-items: center;\n appearance: none;\n background: none;\n border: none;\n border-radius: cv.getVar(\"burger-border-radius\");\n color: hsl(\n cv.getVar(\"burger-h\"),\n cv.getVar(\"burger-s\"),\n cv.getVar(\"burger-l\")\n );\n cursor: pointer;\n display: inline-flex;\n flex-direction: column;\n flex-shrink: 0;\n height: $dimensions;\n justify-content: center;\n position: relative;\n vertical-align: top;\n width: $dimensions;\n\n span {\n background-color: currentColor;\n display: block;\n height: cv.getVar(\"burger-item-height\");\n left: calc(50% - calc(#{cv.getVar(\"burger-item-width\")}) / 2);\n position: absolute;\n transform-origin: center;\n transition-duration: cv.getVar(\"duration\");\n transition-property: background-color, color, opacity, transform;\n transition-timing-function: cv.getVar(\"easing\");\n width: cv.getVar(\"burger-item-width\");\n\n &:nth-child(1),\n &:nth-child(2) {\n top: calc(50% - calc(#{cv.getVar(\"burger-item-height\")}) / 2);\n }\n\n &:nth-child(3) {\n bottom: calc(50% + #{cv.getVar(\"burger-gap\")});\n }\n\n &:nth-child(4) {\n top: calc(50% + #{cv.getVar(\"burger-gap\")});\n }\n }\n\n &:hover {\n background-color: hsla(\n cv.getVar(\"burger-h\"),\n cv.getVar(\"burger-s\"),\n cv.getVar(\"burger-l\"),\n 0.1\n );\n }\n\n &:active {\n background-color: hsla(\n cv.getVar(\"burger-h\"),\n cv.getVar(\"burger-s\"),\n cv.getVar(\"burger-l\"),\n 0.2\n );\n }\n\n // Modifers\n &.#{iv.$class-prefix}is-active {\n span {\n &:nth-child(1) {\n transform: rotate(-45deg);\n }\n\n &:nth-child(2) {\n transform: rotate(45deg);\n }\n\n &:nth-child(3),\n &:nth-child(4) {\n opacity: 0;\n }\n }\n }\n}\n\n@mixin overflow-touch {\n -webkit-overflow-scrolling: touch;\n}\n\n@mixin placeholder {\n $placeholders: \":-moz\" \":-webkit-input\" \"-moz\" \"-ms-input\";\n\n @each $placeholder in $placeholders {\n &:#{$placeholder}-placeholder {\n @content;\n }\n }\n}\n\n@mixin reset {\n appearance: none;\n background: none;\n border: none;\n color: inherit;\n font-family: inherit;\n font-size: 1em;\n margin: 0;\n padding: 0;\n}\n\n@mixin selection($current-selector: false) {\n @if $current-selector {\n &::-moz-selection {\n @content;\n }\n &::selection {\n @content;\n }\n } @else {\n ::-moz-selection {\n @content;\n }\n ::selection {\n @content;\n }\n }\n}\n\n// Responsiveness\n\n@mixin from($device) {\n @media screen and (min-width: $device) {\n @content;\n }\n}\n\n@mixin until($device) {\n @media screen and (max-width: ($device - 1px)) {\n @content;\n }\n}\n\n@mixin between($from, $until) {\n @media screen and (min-width: $from) and (max-width: ($until - 1px)) {\n @content;\n }\n}\n\n@mixin mobile {\n @media screen and (max-width: (iv.$tablet - 1px)) {\n @content;\n }\n}\n\n@mixin tablet {\n @media screen and (min-width: iv.$tablet), print {\n @content;\n }\n}\n\n@mixin tablet-only {\n @media screen and (min-width: iv.$tablet) and (max-width: (iv.$desktop - 1px)) {\n @content;\n }\n}\n\n@mixin touch {\n @media screen and (max-width: (iv.$desktop - 1px)) {\n @content;\n }\n}\n\n@mixin desktop {\n @media screen and (min-width: iv.$desktop) {\n @content;\n }\n}\n\n@mixin desktop-only {\n @if iv.$widescreen-enabled {\n @media screen and (min-width: iv.$desktop) and (max-width: (iv.$widescreen - 1px)) {\n @content;\n }\n }\n}\n\n@mixin until-widescreen {\n @if iv.$widescreen-enabled {\n @media screen and (max-width: (iv.$widescreen - 1px)) {\n @content;\n }\n }\n}\n\n@mixin widescreen {\n @if iv.$widescreen-enabled {\n @media screen and (min-width: iv.$widescreen) {\n @content;\n }\n }\n}\n\n@mixin widescreen-only {\n @if iv.$widescreen-enabled and iv.$fullhd-enabled {\n @media screen and (min-width: iv.$widescreen) and (max-width: (iv.$fullhd - 1px)) {\n @content;\n }\n }\n}\n\n@mixin until-fullhd {\n @if iv.$fullhd-enabled {\n @media screen and (max-width: (iv.$fullhd - 1px)) {\n @content;\n }\n }\n}\n\n@mixin fullhd {\n @if iv.$fullhd-enabled {\n @media screen and (min-width: iv.$fullhd) {\n @content;\n }\n }\n}\n\n@mixin breakpoint($name) {\n $breakpoint: map-get(iv.$breakpoints, $name);\n\n @if $breakpoint {\n $from: map-get($breakpoint, \"from\");\n $until: map-get($breakpoint, \"until\");\n\n @if $from and $until {\n @include between($from, $until) {\n @content;\n }\n } @else if $from {\n @include from($from) {\n @content;\n }\n } @else if $until {\n @include until($until) {\n @content;\n }\n }\n }\n}\n\n@mixin container-from($name, $width) {\n @container #{$name} (min-width: #{$width}) {\n @content;\n }\n}\n\n@mixin container-until($name, $width) {\n @container #{$name} (max-width: #{$width - 1px}) {\n @content;\n }\n}\n\n@mixin ltr {\n @if not iv.$rtl {\n @content;\n }\n}\n\n@mixin rtl {\n @if iv.$rtl {\n @content;\n }\n}\n\n@mixin ltr-property($property, $spacing, $right: true) {\n $normal: if($right, \"right\", \"left\");\n $opposite: if($right, \"left\", \"right\");\n\n @if iv.$rtl {\n #{$property}-#{$opposite}: $spacing;\n } @else {\n #{$property}-#{$normal}: $spacing;\n }\n}\n\n@mixin ltr-position($spacing, $right: true) {\n $normal: if($right, \"right\", \"left\");\n $opposite: if($right, \"left\", \"right\");\n\n @if iv.$rtl {\n #{$opposite}: $spacing;\n } @else {\n #{$normal}: $spacing;\n }\n}\n\n// Placeholders\n\n@mixin unselectable {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n@mixin loader {\n animation: spinAround 500ms infinite linear;\n border: 2px solid cv.getVar(\"loading-color\");\n border-radius: cv.getVar(\"radius-rounded\");\n border-right-color: transparent;\n border-top-color: transparent;\n content: \"\";\n display: block;\n height: 1em;\n position: relative;\n width: 1em;\n}\n\n@mixin overlay($offset: 0) {\n bottom: $offset;\n left: $offset;\n position: absolute;\n right: $offset;\n top: $offset;\n}\n"],"names":[],"version":3,"file":"bulma-list.css.map"} \ No newline at end of file diff --git a/docs/_includes/components/hero.html b/docs/_includes/components/hero.html index fa1bf59..5203e7b 100644 --- a/docs/_includes/components/hero.html +++ b/docs/_includes/components/hero.html @@ -17,14 +17,14 @@

{% endcapture %} -
+
- {% if page.fullwidth %} - {{ hero_body }} - {% else %} -
- {{ hero_body }} -
- {% endif %} +

Bulma list

+ +
+ +

+

A very simple list component extension for Bulma

+

diff --git a/docs/_includes/elements/improve-page.html b/docs/_includes/elements/improve-page.html index 4b50885..80228f1 100644 --- a/docs/_includes/elements/improve-page.html +++ b/docs/_includes/elements/improve-page.html @@ -1,4 +1,4 @@ -
+

diff --git a/docs/_includes/elements/snippet.html b/docs/_includes/elements/snippet.html index defd159..27b4b74 100644 --- a/docs/_includes/elements/snippet.html +++ b/docs/_includes/elements/snippet.html @@ -21,7 +21,7 @@

-
+

HTML

diff --git a/docs/_includes/global/head.html b/docs/_includes/global/head.html index 24862c1..fed8db7 100644 --- a/docs/_includes/global/head.html +++ b/docs/_includes/global/head.html @@ -7,8 +7,8 @@ Bulma list - - + + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index ec9a6cb..c90a234 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -5,10 +5,9 @@ {{ content }} - - - - + + + diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 19e2d99..fea2d2c 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -13,37 +13,83 @@ {% assign subtitle = page.subtitle %} {% endif %} -
- - - - -
+
+ + + -
-
+
+ + +
+ + + + + +
+
+ + +
+ +
+
+ +
+ {% include components/docs-body.html %} +
diff --git a/docs/css/bulma-list.css b/docs/css/bulma-list.css index bbe2c4f..909944b 100644 --- a/docs/css/bulma-list.css +++ b/docs/css/bulma-list.css @@ -1,120 +1,2 @@ -.list { - color: #4a4a4a; - flex-direction: column; - display: flex; -} - -.list.has-hidden-images .list-item-image { - display: none; -} - -.list.has-hoverable-list-items .list-item:hover { - background-color: #fafafa; -} - -.list.has-overflow-ellipsis .list-item-content { - min-width: 0; - max-width: calc(var(--length) * 1ch); -} - -.list.has-overflow-ellipsis .list-item-content > * { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -@media (hover: hover) { - .list:not(.has-visible-pointer-controls) .list-item-controls { - opacity: 0; - visibility: hidden; - } -} - -.list-item { - align-items: center; - transition: background-color .125s ease-out; - display: flex; - position: relative; -} - -@media (hover: hover) { - .list-item:hover .list-item-controls, .list-item:focus-within .list-item-controls { - opacity: initial; - visibility: initial; - } -} - -.list-item:not(.box) { - padding: .75em; -} - -.list-item:not(:last-child):not(.box) { - border-bottom: 1px solid #dbdbdb; -} - -@media screen and (max-width: 768px) { - .list:not(.has-overflow-ellipsis) .list-item { - flex-wrap: wrap; - } -} - -.list-item-image { - flex-shrink: 0; - margin-right: .75em; -} - -@media screen and (max-width: 768px) { - .list-item-image { - padding: .5rem 0; - } -} - -.list-item-content { - flex-direction: column; - flex-grow: 1; - display: flex; -} - -@media screen and (max-width: 768px) { - .list-item-content { - padding: .5rem 0; - } -} - -.list-item-title { - color: #363636; - font-weight: 600; -} - -.list-item-description { - color: #7a7a7a; -} - -.list-item-controls { - flex-shrink: 0; - transition: opacity .125s ease-out; -} - -@media screen and (max-width: 768px) { - .list-item-controls { - flex-wrap: wrap; - padding: .5rem 0; - } -} - -@media screen and (min-width: 769px), print { - .list-item-controls { - padding-left: .75em; - } - - .list:not(.has-visible-pointer-controls) .list-item-controls { - height: 100%; - align-items: center; - padding-right: .75em; - display: flex; - position: absolute; - right: 0; - } -} - +.list{--be-list-color:var(--bulma-text);--be-list-item-description-color:var(--bulma-text-50);--be-list-item-divider-color:var(--bulma-border);--be-list-item-hover-color:var(--bulma-scheme-main-bis);--be-list-item-image-margin:.75em;--be-list-item-padding:.75em;--be-list-item-title-color:var(--bulma-text-strong);--be-list-item-title-weight:var(--bulma-weight-semibold);color:var(--be-list-color);flex-direction:column;display:flex}.list.has-hidden-images .list-item-image{display:none}.list.has-hoverable-list-items .list-item:hover{background-color:var(--be-list-item-hover-color)}.list.has-overflow-ellipsis .list-item-content{min-width:0;max-width:calc(var(--length)*1ch)}.list.has-overflow-ellipsis .list-item-content>*{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (hover:hover){.list:not(.has-visible-pointer-controls) .list-item-controls{opacity:0;visibility:hidden}}.list .list-item{align-items:center;transition:background-color .125s ease-out;display:flex;position:relative}@media (hover:hover){.list .list-item:hover .list-item-controls,.list .list-item:focus-within .list-item-controls{opacity:initial;visibility:initial}}.list .list-item:not(.box){padding:var(--be-list-item-padding)}.list .list-item:not(:last-child):not(.box){border-bottom:1px solid var(--be-list-item-divider-color)}@media screen and (max-width:768px){.list:not(.has-overflow-ellipsis) .list .list-item{flex-wrap:wrap}}.list .list-item-image{margin-right:var(--be-list-item-image-margin);flex-shrink:0}@media screen and (max-width:768px){.list .list-item-image{padding:.5rem 0}}.list .list-item-content{flex-direction:column;flex-grow:1;display:flex}@media screen and (max-width:768px){.list .list-item-content{padding:.5rem 0}}.list .list-item-title{color:var(--be-list-item-title-color);font-weight:var(--be-list-item-title-weight)}.list .list-item-description{color:var(--be-list-item-description-color)}.list .list-item-controls{flex-shrink:0;transition:opacity .125s ease-out}@media screen and (max-width:768px){.list .list-item-controls{flex-wrap:wrap;padding:.5rem 0}}@media screen and (min-width:769px),print{.list .list-item-controls{padding-left:var(--be-list-item-padding)}.list:not(.has-visible-pointer-controls) .list .list-item-controls{height:100%;padding-right:var(--be-list-item-padding);align-items:center;display:flex;position:absolute;right:0}} /*# sourceMappingURL=bulma-list.css.map */ diff --git a/docs/css/bulma-list.css.map b/docs/css/bulma-list.css.map index d2cc018..816ef9d 100644 --- a/docs/css/bulma-list.css.map +++ b/docs/css/bulma-list.css.map @@ -1 +1 @@ -{"mappings":"ACaA;;;;;;AAIE;;;;AAEA;;;;AAEA;;;;;AAGE;;;;;;AAdF;EAkBA;;;;;;AAKF;;;;;;;AAvBE;EA4BA;;;;;;AAKA;;;;AAEA;;;;AEgDA;EF7CE;;;;;AAGJ;;;;;AE0CE;EF1CF;;;;;AAMA;;;;;;AEoCE;EFpCF;;;;;AAOA;;;;;AAIA;;;;AAGA;;;;;AEsBE;EFtBF;;;;;;AE0BE;EF1BF;;;;EAQI","sources":["build/bulma-list.sass","sass/bulma-list.sass","node_modules/bulma/sass/utilities/initial-variables.sass","node_modules/bulma/sass/utilities/mixins.sass"],"sourcesContent":["// Includes bulma variables needed to build static css files. Don't use this in\n// your project directly — use sass/bulma-list instead.\n@import \"~bulma/sass/utilities/mixins\"\n@import \"sass/bulma-list\"\n",null,null,null],"names":[],"version":3,"file":"bulma-list.css.map","sourceRoot":"../../"} \ No newline at end of file +{"mappings":"ACQA,ibAuBE,sDAIA,iGAIA,6FAGE,2GAvCF,qBA8CA,0FAOA,8GArDA,qBA2DE,iIAQA,+DAIA,sGCkNF,oCD7MI,mEAMJ,mFCuMA,oCDvMA,wCASA,wEC8LA,oCD9LA,0CAUA,0GAKA,yEAIA,0EC2KA,oCD3KA,0DCiLA,0CDjLA,mEAWI","sources":["bulma-list.css","sass/bulma-list.scss","node_modules/bulma/sass/utilities/mixins.scss"],"sourcesContent":[".list {\n --be-list-color: var(--bulma-text);\n --be-list-item-description-color: var(--bulma-text-50);\n --be-list-item-divider-color: var(--bulma-border);\n --be-list-item-hover-color: var(--bulma-scheme-main-bis);\n --be-list-item-image-margin: .75em;\n --be-list-item-padding: .75em;\n --be-list-item-title-color: var(--bulma-text-strong);\n --be-list-item-title-weight: var(--bulma-weight-semibold);\n color: var(--be-list-color);\n flex-direction: column;\n display: flex;\n}\n\n.list.has-hidden-images .list-item-image {\n display: none;\n}\n\n.list.has-hoverable-list-items .list-item:hover {\n background-color: var(--be-list-item-hover-color);\n}\n\n.list.has-overflow-ellipsis .list-item-content {\n min-width: 0;\n max-width: calc(var(--length) * 1ch);\n}\n\n.list.has-overflow-ellipsis .list-item-content > * {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n@media (hover: hover) {\n .list:not(.has-visible-pointer-controls) .list-item-controls {\n opacity: 0;\n visibility: hidden;\n }\n}\n\n.list .list-item {\n align-items: center;\n transition: background-color .125s ease-out;\n display: flex;\n position: relative;\n}\n\n@media (hover: hover) {\n .list .list-item:hover .list-item-controls, .list .list-item:focus-within .list-item-controls {\n opacity: initial;\n visibility: initial;\n }\n}\n\n.list .list-item:not(.box) {\n padding: var(--be-list-item-padding);\n}\n\n.list .list-item:not(:last-child):not(.box) {\n border-bottom: 1px solid var(--be-list-item-divider-color);\n}\n\n@media screen and (max-width: 768px) {\n .list:not(.has-overflow-ellipsis) .list .list-item {\n flex-wrap: wrap;\n }\n}\n\n.list .list-item-image {\n margin-right: var(--be-list-item-image-margin);\n flex-shrink: 0;\n}\n\n@media screen and (max-width: 768px) {\n .list .list-item-image {\n padding: .5rem 0;\n }\n}\n\n.list .list-item-content {\n flex-direction: column;\n flex-grow: 1;\n display: flex;\n}\n\n@media screen and (max-width: 768px) {\n .list .list-item-content {\n padding: .5rem 0;\n }\n}\n\n.list .list-item-title {\n color: var(--be-list-item-title-color);\n font-weight: var(--be-list-item-title-weight);\n}\n\n.list .list-item-description {\n color: var(--be-list-item-description-color);\n}\n\n.list .list-item-controls {\n flex-shrink: 0;\n transition: opacity .125s ease-out;\n}\n\n@media screen and (max-width: 768px) {\n .list .list-item-controls {\n flex-wrap: wrap;\n padding: .5rem 0;\n }\n}\n\n@media screen and (min-width: 769px), print {\n .list .list-item-controls {\n padding-left: var(--be-list-item-padding);\n }\n\n .list:not(.has-visible-pointer-controls) .list .list-item-controls {\n height: 100%;\n padding-right: var(--be-list-item-padding);\n align-items: center;\n display: flex;\n position: absolute;\n right: 0;\n }\n}\n\n/*# sourceMappingURL=bulma-list.css.map */\n","@use \"node_modules/bulma/sass/utilities/mixins\" as mixins;\n\n@mixin has-mouse-pointer {\n @media (hover: hover) {\n @content;\n }\n}\n\n.list {\n --be-list-color: var(--bulma-text);\n --be-list-item-description-color: var(--bulma-text-50);\n --be-list-item-divider-color: var(--bulma-border);\n --be-list-item-hover-color: var(--bulma-scheme-main-bis);\n --be-list-item-image-margin: 0.75em;\n --be-list-item-padding: 0.75em;\n --be-list-item-title-color: var(--bulma-text-strong);\n --be-list-item-title-weight: var(--bulma-weight-semibold);\n\n $list-color: var(--be-list-color) !default;\n $list-item-description-color: var(--be-list-item-description-color) !default;\n $list-item-divider-color: var(--be-list-item-divider-color) !default;\n $list-item-hover-color: var(--be-list-item-hover-color) !default;\n $list-item-image-margin: var(--be-list-item-image-margin) !default;\n $list-item-padding: var(--be-list-item-padding) !default;\n $list-item-title-color: var(--be-list-item-title-color) !default;\n $list-item-title-weight: var(--be-list-item-title-weight) !default;\n\n color: $list-color;\n display: flex;\n flex-direction: column;\n\n &.has-hidden-images .list-item-image {\n display: none;\n }\n\n &.has-hoverable-list-items .list-item:hover {\n background-color: $list-item-hover-color;\n }\n\n &.has-overflow-ellipsis .list-item-content {\n min-width: 0;\n max-width: calc(var(--length) * 1ch);\n & > * {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n\n &:not(.has-visible-pointer-controls) .list-item-controls {\n @include has-mouse-pointer {\n opacity: 0;\n visibility: hidden;\n }\n }\n\n .list-item {\n align-items: center;\n display: flex;\n position: relative;\n transition: background-color ease-out 0.125s;\n\n &:hover .list-item-controls,\n &:focus-within .list-item-controls {\n @include has-mouse-pointer {\n opacity: initial;\n visibility: initial;\n }\n }\n\n &:not(.box) {\n padding: $list-item-padding;\n }\n\n &:not(:last-child):not(.box) {\n border-bottom: 1px solid $list-item-divider-color;\n }\n\n @include mixins.mobile {\n .list:not(.has-overflow-ellipsis) & {\n flex-wrap: wrap;\n }\n }\n }\n\n .list-item-image {\n flex-shrink: 0;\n margin-right: $list-item-image-margin;\n\n @include mixins.mobile {\n padding: 0.5rem 0;\n }\n }\n\n .list-item-content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n @include mixins.mobile {\n padding: 0.5rem 0;\n }\n }\n\n .list-item-title {\n color: $list-item-title-color;\n font-weight: $list-item-title-weight;\n }\n\n .list-item-description {\n color: $list-item-description-color;\n }\n\n .list-item-controls {\n flex-shrink: 0;\n transition: opacity ease-out 0.125s;\n\n @include mixins.mobile {\n padding: 0.5rem 0;\n flex-wrap: wrap;\n }\n\n @include mixins.tablet {\n padding-left: $list-item-padding;\n .list:not(.has-visible-pointer-controls) & {\n align-items: center;\n display: flex;\n height: 100%;\n padding-right: $list-item-padding;\n position: absolute;\n right: 0;\n }\n }\n }\n}\n","@use \"initial-variables\" as iv;\n@use \"css-variables\" as cv;\n\n@mixin arrow($color: #{cv.getVar(\"link\")}) {\n border: 0.125em solid $color;\n border-right: 0;\n border-top: 0;\n content: \" \";\n display: block;\n height: 0.625em;\n margin-top: -0.4375em;\n pointer-events: none;\n position: absolute;\n top: 50%;\n transform: rotate(-45deg);\n transform-origin: center;\n transition-duration: cv.getVar(\"duration\");\n transition-property: border-color;\n width: 0.625em;\n}\n\n@mixin block($spacing: cv.getVar(\"block-spacing\")) {\n &:not(:last-child) {\n margin-bottom: $spacing;\n }\n}\n\n@mixin center($width, $height: 0) {\n position: absolute;\n @if $height != 0 {\n left: calc(50% - (#{$width} * 0.5));\n top: calc(50% - (#{$height} * 0.5));\n } @else {\n left: calc(50% - (#{$width} * 0.5));\n top: calc(50% - (#{$width} * 0.5));\n }\n}\n\n@mixin clearfix {\n &::after {\n clear: both;\n content: \" \";\n display: table;\n }\n}\n\n@mixin delete {\n @include cv.register-vars(\n (\n \"delete-dimensions\": 1.25rem,\n \"delete-background-l\": 0%,\n \"delete-background-alpha\": 0.5,\n \"delete-color\": #{cv.getVar(\"white\")},\n )\n );\n\n appearance: none;\n background-color: hsla(\n #{cv.getVar(\"scheme-h\")},\n #{cv.getVar(\"scheme-s\")},\n #{cv.getVar(\"delete-background-l\")},\n #{cv.getVar(\"delete-background-alpha\")}\n );\n border: none;\n border-radius: cv.getVar(\"radius-rounded\");\n cursor: pointer;\n pointer-events: auto;\n display: inline-flex;\n flex-grow: 0;\n flex-shrink: 0;\n font-size: 1em;\n height: cv.getVar(\"delete-dimensions\");\n max-height: cv.getVar(\"delete-dimensions\");\n max-width: cv.getVar(\"delete-dimensions\");\n min-height: cv.getVar(\"delete-dimensions\");\n min-width: cv.getVar(\"delete-dimensions\");\n outline: none;\n position: relative;\n vertical-align: top;\n width: cv.getVar(\"delete-dimensions\");\n\n &::before,\n &::after {\n background-color: cv.getVar(\"delete-color\");\n content: \"\";\n display: block;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n transform-origin: center center;\n }\n\n &::before {\n height: 2px;\n width: 50%;\n }\n\n &::after {\n height: 50%;\n width: 2px;\n }\n\n &:hover,\n &:focus {\n @include cv.register-var(\"delete-background-alpha\", 0.4);\n }\n\n &:active {\n @include cv.register-var(\"delete-background-alpha\", 0.5);\n }\n\n // Sizes\n &.#{iv.$class-prefix}is-small {\n @include cv.register-var(\"delete-dimensions\", 1rem);\n }\n\n &.#{iv.$class-prefix}is-medium {\n @include cv.register-var(\"delete-dimensions\", 1.5rem);\n }\n\n &.#{iv.$class-prefix}is-large {\n @include cv.register-var(\"delete-dimensions\", 2rem);\n }\n}\n\n@mixin fa($size, $dimensions) {\n display: inline-block;\n font-size: $size;\n height: $dimensions;\n line-height: $dimensions;\n text-align: center;\n vertical-align: top;\n width: $dimensions;\n}\n\n@mixin burger($dimensions) {\n align-items: center;\n appearance: none;\n background: none;\n border: none;\n border-radius: cv.getVar(\"burger-border-radius\");\n color: hsl(\n cv.getVar(\"burger-h\"),\n cv.getVar(\"burger-s\"),\n cv.getVar(\"burger-l\")\n );\n cursor: pointer;\n display: inline-flex;\n flex-direction: column;\n flex-shrink: 0;\n height: $dimensions;\n justify-content: center;\n position: relative;\n vertical-align: top;\n width: $dimensions;\n\n span {\n background-color: currentColor;\n display: block;\n height: cv.getVar(\"burger-item-height\");\n left: calc(50% - calc(#{cv.getVar(\"burger-item-width\")}) / 2);\n position: absolute;\n transform-origin: center;\n transition-duration: cv.getVar(\"duration\");\n transition-property: background-color, color, opacity, transform;\n transition-timing-function: cv.getVar(\"easing\");\n width: cv.getVar(\"burger-item-width\");\n\n &:nth-child(1),\n &:nth-child(2) {\n top: calc(50% - calc(#{cv.getVar(\"burger-item-height\")}) / 2);\n }\n\n &:nth-child(3) {\n bottom: calc(50% + #{cv.getVar(\"burger-gap\")});\n }\n\n &:nth-child(4) {\n top: calc(50% + #{cv.getVar(\"burger-gap\")});\n }\n }\n\n &:hover {\n background-color: hsla(\n cv.getVar(\"burger-h\"),\n cv.getVar(\"burger-s\"),\n cv.getVar(\"burger-l\"),\n 0.1\n );\n }\n\n &:active {\n background-color: hsla(\n cv.getVar(\"burger-h\"),\n cv.getVar(\"burger-s\"),\n cv.getVar(\"burger-l\"),\n 0.2\n );\n }\n\n // Modifers\n &.#{iv.$class-prefix}is-active {\n span {\n &:nth-child(1) {\n transform: rotate(-45deg);\n }\n\n &:nth-child(2) {\n transform: rotate(45deg);\n }\n\n &:nth-child(3),\n &:nth-child(4) {\n opacity: 0;\n }\n }\n }\n}\n\n@mixin overflow-touch {\n -webkit-overflow-scrolling: touch;\n}\n\n@mixin placeholder {\n $placeholders: \":-moz\" \":-webkit-input\" \"-moz\" \"-ms-input\";\n\n @each $placeholder in $placeholders {\n &:#{$placeholder}-placeholder {\n @content;\n }\n }\n}\n\n@mixin reset {\n appearance: none;\n background: none;\n border: none;\n color: inherit;\n font-family: inherit;\n font-size: 1em;\n margin: 0;\n padding: 0;\n}\n\n@mixin selection($current-selector: false) {\n @if $current-selector {\n &::-moz-selection {\n @content;\n }\n &::selection {\n @content;\n }\n } @else {\n ::-moz-selection {\n @content;\n }\n ::selection {\n @content;\n }\n }\n}\n\n// Responsiveness\n\n@mixin from($device) {\n @media screen and (min-width: $device) {\n @content;\n }\n}\n\n@mixin until($device) {\n @media screen and (max-width: ($device - 1px)) {\n @content;\n }\n}\n\n@mixin between($from, $until) {\n @media screen and (min-width: $from) and (max-width: ($until - 1px)) {\n @content;\n }\n}\n\n@mixin mobile {\n @media screen and (max-width: (iv.$tablet - 1px)) {\n @content;\n }\n}\n\n@mixin tablet {\n @media screen and (min-width: iv.$tablet), print {\n @content;\n }\n}\n\n@mixin tablet-only {\n @media screen and (min-width: iv.$tablet) and (max-width: (iv.$desktop - 1px)) {\n @content;\n }\n}\n\n@mixin touch {\n @media screen and (max-width: (iv.$desktop - 1px)) {\n @content;\n }\n}\n\n@mixin desktop {\n @media screen and (min-width: iv.$desktop) {\n @content;\n }\n}\n\n@mixin desktop-only {\n @if iv.$widescreen-enabled {\n @media screen and (min-width: iv.$desktop) and (max-width: (iv.$widescreen - 1px)) {\n @content;\n }\n }\n}\n\n@mixin until-widescreen {\n @if iv.$widescreen-enabled {\n @media screen and (max-width: (iv.$widescreen - 1px)) {\n @content;\n }\n }\n}\n\n@mixin widescreen {\n @if iv.$widescreen-enabled {\n @media screen and (min-width: iv.$widescreen) {\n @content;\n }\n }\n}\n\n@mixin widescreen-only {\n @if iv.$widescreen-enabled and iv.$fullhd-enabled {\n @media screen and (min-width: iv.$widescreen) and (max-width: (iv.$fullhd - 1px)) {\n @content;\n }\n }\n}\n\n@mixin until-fullhd {\n @if iv.$fullhd-enabled {\n @media screen and (max-width: (iv.$fullhd - 1px)) {\n @content;\n }\n }\n}\n\n@mixin fullhd {\n @if iv.$fullhd-enabled {\n @media screen and (min-width: iv.$fullhd) {\n @content;\n }\n }\n}\n\n@mixin breakpoint($name) {\n $breakpoint: map-get(iv.$breakpoints, $name);\n\n @if $breakpoint {\n $from: map-get($breakpoint, \"from\");\n $until: map-get($breakpoint, \"until\");\n\n @if $from and $until {\n @include between($from, $until) {\n @content;\n }\n } @else if $from {\n @include from($from) {\n @content;\n }\n } @else if $until {\n @include until($until) {\n @content;\n }\n }\n }\n}\n\n@mixin container-from($name, $width) {\n @container #{$name} (min-width: #{$width}) {\n @content;\n }\n}\n\n@mixin container-until($name, $width) {\n @container #{$name} (max-width: #{$width - 1px}) {\n @content;\n }\n}\n\n@mixin ltr {\n @if not iv.$rtl {\n @content;\n }\n}\n\n@mixin rtl {\n @if iv.$rtl {\n @content;\n }\n}\n\n@mixin ltr-property($property, $spacing, $right: true) {\n $normal: if($right, \"right\", \"left\");\n $opposite: if($right, \"left\", \"right\");\n\n @if iv.$rtl {\n #{$property}-#{$opposite}: $spacing;\n } @else {\n #{$property}-#{$normal}: $spacing;\n }\n}\n\n@mixin ltr-position($spacing, $right: true) {\n $normal: if($right, \"right\", \"left\");\n $opposite: if($right, \"left\", \"right\");\n\n @if iv.$rtl {\n #{$opposite}: $spacing;\n } @else {\n #{$normal}: $spacing;\n }\n}\n\n// Placeholders\n\n@mixin unselectable {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n@mixin loader {\n animation: spinAround 500ms infinite linear;\n border: 2px solid cv.getVar(\"loading-color\");\n border-radius: cv.getVar(\"radius-rounded\");\n border-right-color: transparent;\n border-top-color: transparent;\n content: \"\";\n display: block;\n height: 1em;\n position: relative;\n width: 1em;\n}\n\n@mixin overlay($offset: 0) {\n bottom: $offset;\n left: $offset;\n position: absolute;\n right: $offset;\n top: $offset;\n}\n"],"names":[],"version":3,"file":"bulma-list.css.map"} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 093f8fb..ceece88 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,9 +6,9 @@ doc-subtab: bulma-list route: index meta: - colors: false - sizes: false - variables: true +colors: false +sizes: false +variables: true --- {% capture list_example %} @@ -315,7 +315,8 @@
List item
-
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping
+
A very long description can have an ellipsis overflow if you want the text to + remain all on a single line without wrapping
@@ -328,7 +329,8 @@
List item
-
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping
+
A very long description can have an ellipsis overflow if you want the text to + remain all on a single line without wrapping
@@ -340,8 +342,10 @@
-
Very long titles will also have overflow hidden if they are wider than the container
-
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping
+
Very long titles will also have overflow hidden if they are wider than the container +
+
A very long description can have an ellipsis overflow if you want the text to + remain all on a single line without wrapping
@@ -358,7 +362,8 @@
List item
-
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping
+
A very long description can have an ellipsis overflow if you want the text to + remain all on a single line without wrapping
@@ -371,7 +376,8 @@
List item
-
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping
+
A very long description can have an ellipsis overflow if you want the text to + remain all on a single line without wrapping
@@ -383,8 +389,10 @@
-
Very long titles will also have overflow hidden if they are wider than the container
-
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping
+
Very long titles will also have overflow hidden if they are wider than the container +
+
A very long description can have an ellipsis overflow if you want the text to + remain all on a single line without wrapping
@@ -480,16 +488,19 @@
-

+

See the Pen - bulma-list examples by Matt Fannin (@bluefantail) - on CodePen. + bulma-list examples by Matt Fannin (@bluefantail) + on CodePen.

- View on codepen + View on codepen

@@ -519,11 +530,13 @@

- By default, list item controls will only show when hovered on devices with pointers, but will always be visible on touch devices. + By default, list item controls will only show when hovered on devices with pointers, but will always be visible on + touch devices.

- Controls remain in focus using when any of the list item's children are in focus meaning dropdowns can also be used inside list items. + Controls remain in focus using when any of the list item's children are in focus meaning dropdowns can also be used + inside list items.

@@ -533,7 +546,8 @@

- If you want a list item's controls to be visible all the time, the has-visible-pointer-controls modifier can be used. + If you want a list item's controls to be visible all the time, the + has-visible-pointer-controls modifier can be used.

@@ -549,7 +563,8 @@

- To stop text from wrapping and add an ellipsis overflow effect use has-overflow-ellipsis. + To stop text from wrapping and add an ellipsis overflow effect use + has-overflow-ellipsis.

@@ -557,7 +572,9 @@

- Sometimes you might want to control the truncation length. For that a custom property can be set on the element using an inline style tag style="--length: 25". The length uses the ch unit resulting in a width roughly equivalent to the value in characters. + Sometimes you might want to control the truncation length. For that a custom property can be set on + the element using an inline style tag style="--length: 25". The length uses the ch unit + resulting in a width roughly equivalent to the value in characters.

@@ -565,7 +582,8 @@

- Sometimes you might want to have images hidden by default when the page first loads for using with list display type toggles. You can use has-hidden-images for this. + Sometimes you might want to have images hidden by default when the page first loads for using with + list display type toggles. You can use has-hidden-images for this.

@@ -582,4 +600,234 @@ {% include elements/snippet.html content=list_item_with_box more=true %} -{% include components/variables.html type='component' %} \ No newline at end of file +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + Sass Variable +
+ 		+
+ + CSS Variable +
+ 		+
+ + Value +
+
+
+ 
$list-color
+
+ 		+
+ 
var(--be-list-color)
+
+ 		+
+ 
var(--bulma-text)
+
+
+
+ 
$list-item-description-color
+
+ 		+
+ 
var(--be-list-item-description-color)
+
+ 		+
+ 
var(--bulma-text-50)
+
+
+
+ 
$list-item-divider-color
+
+ 		+
+ 
var(--be-list-item-divider-color)
+
+ 		+
+ 
var(--bulma-border)
+
+
+
+ 
$list-item-hover-color
+
+ 		+
+ 
var(--be-list-item-hover-color)
+
+ 		+
+ 
var(--bulma-scheme-main-bis)
+
+
+
+ 
$list-item-image-margin
+
+ 		+
+ 
var(--be-list-item-image-margin)
+
+ 		+
+ 
0.75em
+
+
+
+ 
$list-item-padding
+
+ 		+
+ 
var(--be-list-item-padding)
+
+ 		+
+ 
0.75em
+
+
+
+ 
$list-item-title-color
+
+ 		+
+ 
var(--be-list-item-title-color)
+
+ 		+
+ 
var(--bulma-text-strong)
+
+
+
+ 
$list-item-title-weight
+
+ 		+
+ 
var(--be-list-item-title-weight)
+
+ 		+
+ 
var(--bulma-weight-semibold)
+
+
+
diff --git a/package.json b/package.json index 2976070..8104258 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bulma-list", - "version": "1.2.0", + "version": "2.0.0-beta", "author": { "name": "Matt Fannin", "email": "hello@mattfannin.nz", @@ -32,13 +32,13 @@ ], "devDependencies": { "@parcel/transformer-sass": "^2.0.0-rc.0", - "bulma": "^0.9.3", + "bulma": "^1.0.0", "parcel": "^2.0.0-rc.0", "sass": "^1.41.1" }, "scripts": { - "build": "parcel build build/bulma-list.sass --dist-dir css", - "build-docs": "parcel build build/bulma-list.sass --dist-dir docs/css", - "start-docs": "parcel watch build/bulma-list.sass --dist-dir docs/css" + "build": "parcel build sass/bulma-list.scss --dist-dir css", + "build-docs": "parcel build sass/bulma-list.scss --dist-dir docs/css", + "start-docs": "parcel watch sass/bulma-list.scss --dist-dir docs/css" } } diff --git a/sass/bulma-list.sass b/sass/bulma-list.sass deleted file mode 100644 index fdd676c..0000000 --- a/sass/bulma-list.sass +++ /dev/null @@ -1,86 +0,0 @@ -$list-color: $text !default -$list-item-description-color: $text-light !default -$list-item-divider-color: $border !default -$list-item-hover-color: $scheme-main-bis !default -$list-item-image-margin: 0.75em !default -$list-item-padding: 0.75em !default -$list-item-title-color: $text-strong !default -$list-item-title-weight: $weight-semibold !default - -=has-mouse-pointer - @media (hover: hover) - @content - -.list - color: $list-color - display: flex - flex-direction: column - &.has-hidden-images .list-item-image - display: none - &.has-hoverable-list-items .list-item:hover - background-color: $list-item-hover-color - &.has-overflow-ellipsis .list-item-content - min-width: 0 - max-width: calc(var(--length) * 1ch) - & > * - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - &:not(.has-visible-pointer-controls) .list-item-controls - +has-mouse-pointer - opacity: 0 - visibility: hidden - -.list-item - align-items: center - display: flex - position: relative - transition: background-color ease-out 0.125s - &:hover .list-item-controls, - &:focus-within .list-item-controls - +has-mouse-pointer - opacity: initial - visibility: initial - &:not(.box) - padding: $list-item-padding - &:not(:last-child):not(.box) - border-bottom: 1px solid $list-item-divider-color - +mobile - .list:not(.has-overflow-ellipsis) & - flex-wrap: wrap - -.list-item-image - flex-shrink: 0 - margin-right: $list-item-image-margin - +mobile - padding: 0.5rem 0 - -.list-item-content - display: flex - flex-direction: column - flex-grow: 1 - +mobile - padding: 0.5rem 0 - -.list-item-title - color: $list-item-title-color - font-weight: $list-item-title-weight - -.list-item-description - color: $list-item-description-color - -.list-item-controls - flex-shrink: 0 - transition: opacity ease-out 0.125s - +mobile - padding: 0.5rem 0 - flex-wrap: wrap - +tablet - padding-left: $list-item-padding - .list:not(.has-visible-pointer-controls) & - align-items: center - display: flex - height: 100% - padding-right: $list-item-padding - position: absolute - right: 0 diff --git a/sass/bulma-list.scss b/sass/bulma-list.scss new file mode 100644 index 0000000..289e792 --- /dev/null +++ b/sass/bulma-list.scss @@ -0,0 +1,135 @@ +@use "node_modules/bulma/sass/utilities/mixins" as mixins; + +@mixin has-mouse-pointer { + @media (hover: hover) { + @content; + } +} + +.list { + --be-list-color: var(--bulma-text); + --be-list-item-description-color: var(--bulma-text-50); + --be-list-item-divider-color: var(--bulma-border); + --be-list-item-hover-color: var(--bulma-scheme-main-bis); + --be-list-item-image-margin: 0.75em; + --be-list-item-padding: 0.75em; + --be-list-item-title-color: var(--bulma-text-strong); + --be-list-item-title-weight: var(--bulma-weight-semibold); + + $list-color: var(--be-list-color) !default; + $list-item-description-color: var(--be-list-item-description-color) !default; + $list-item-divider-color: var(--be-list-item-divider-color) !default; + $list-item-hover-color: var(--be-list-item-hover-color) !default; + $list-item-image-margin: var(--be-list-item-image-margin) !default; + $list-item-padding: var(--be-list-item-padding) !default; + $list-item-title-color: var(--be-list-item-title-color) !default; + $list-item-title-weight: var(--be-list-item-title-weight) !default; + + color: $list-color; + display: flex; + flex-direction: column; + + &.has-hidden-images .list-item-image { + display: none; + } + + &.has-hoverable-list-items .list-item:hover { + background-color: $list-item-hover-color; + } + + &.has-overflow-ellipsis .list-item-content { + min-width: 0; + max-width: calc(var(--length) * 1ch); + & > * { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + &:not(.has-visible-pointer-controls) .list-item-controls { + @include has-mouse-pointer { + opacity: 0; + visibility: hidden; + } + } + + .list-item { + align-items: center; + display: flex; + position: relative; + transition: background-color ease-out 0.125s; + + &:hover .list-item-controls, + &:focus-within .list-item-controls { + @include has-mouse-pointer { + opacity: initial; + visibility: initial; + } + } + + &:not(.box) { + padding: $list-item-padding; + } + + &:not(:last-child):not(.box) { + border-bottom: 1px solid $list-item-divider-color; + } + + @include mixins.mobile { + .list:not(.has-overflow-ellipsis) & { + flex-wrap: wrap; + } + } + } + + .list-item-image { + flex-shrink: 0; + margin-right: $list-item-image-margin; + + @include mixins.mobile { + padding: 0.5rem 0; + } + } + + .list-item-content { + display: flex; + flex-direction: column; + flex-grow: 1; + + @include mixins.mobile { + padding: 0.5rem 0; + } + } + + .list-item-title { + color: $list-item-title-color; + font-weight: $list-item-title-weight; + } + + .list-item-description { + color: $list-item-description-color; + } + + .list-item-controls { + flex-shrink: 0; + transition: opacity ease-out 0.125s; + + @include mixins.mobile { + padding: 0.5rem 0; + flex-wrap: wrap; + } + + @include mixins.tablet { + padding-left: $list-item-padding; + .list:not(.has-visible-pointer-controls) & { + align-items: center; + display: flex; + height: 100%; + padding-right: $list-item-padding; + position: absolute; + right: 0; + } + } + } +} diff --git a/yarn.lock b/yarn.lock index d4dcbf7..2fcfa51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -752,10 +752,12 @@ buffer-from@^1.0.0: resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5" integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ== -bulma@^0.9.3: - version "0.9.3" - resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243" - integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g== +bulma@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/bulma/-/bulma-1.0.0.tgz#95e8ffa4feb8d64aa1c54a4f0ac6da08e0260672" + integrity sha512-7n49v/gdHXaHcU9fVobqGXO2OguiCoMh6CLbeX7jq00XrZ5vOSE4LNS0S/0Q6rlBbckY6kk6W7LwqxS0nu4bug== + dependencies: + sass "^1.71.1" callsites@^3.0.0: version "3.1.0" @@ -1335,6 +1337,15 @@ sass@^1.38.0, sass@^1.41.1: immutable "^4.0.0" source-map-js ">=0.6.2 <2.0.0" +sass@^1.71.1: + version "1.72.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.72.0.tgz#5b9978943fcfb32b25a6a5acb102fc9dabbbf41c" + integrity sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + semver@^5.7.0, semver@^5.7.1: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"