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"