From 5bbc99832d25e34032a86ab6cb748921c378156a Mon Sep 17 00:00:00 2001 From: ibsoln <52778946+ibsoln@users.noreply.github.com> Date: Thu, 11 Jun 2020 15:57:44 +0100 Subject: [PATCH] Create panes and frames css using sass --- preview-src/panes-usage-sample.adoc | 343 ++++++++++++++++++++++++++ src/css/panes.css | 370 ++++++++++++++++++++++++++++ src/css/site.css | 1 + src/scss/_panes__mixins.scss | 91 +++++++ src/scss/_panes__variables.scss | 62 +++++ src/scss/panes.scss | 160 ++++++++++++ 6 files changed, 1027 insertions(+) create mode 100644 preview-src/panes-usage-sample.adoc create mode 100644 src/css/panes.css create mode 100644 src/scss/_panes__mixins.scss create mode 100644 src/scss/_panes__variables.scss create mode 100644 src/scss/panes.scss diff --git a/preview-src/panes-usage-sample.adoc b/preview-src/panes-usage-sample.adoc new file mode 100644 index 00000000..51c8734c --- /dev/null +++ b/preview-src/panes-usage-sample.adoc @@ -0,0 +1,343 @@ += Couchbase Lite +:page-status: beta +:page-role: panes +:sectanchors!: +:sectids!: + +== Features + +* Colored cards or frames (borders) with an auto-sequence of colors based on Couchbases's secondary color scheme. Feature triggered by class prior to H2, with cards/frames generated at H3 level or optionaly from unordered list items (for simple layouts). +* Default two-across +* Option to specify 3-across or 4-across +* Full-width banner option +* Option to conceal the H2 heading if it is solely there to trigger the cards/frames ([.no-title]) + + +[.pane__cards] +== By Default You Will Get a 2-across Display + +=== H3 Card 1 +Card 1 content + +=== H3 Card 2 +Card 2 content + + +[.pane__cards.cols-3] +== But there's an option to have 3-across ... +This shows the cards 3-across, with the fourth (in this case) full-width. +If there are more then they will wrap around in rows of three + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +[.pane__cards.cols-4] +== And Even 4-across ... +And yes of course you can also have four across. However, I think this is the practical limit for readable card content, so I stopped there. + +=== Auto four ignorable text +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +== Using panes frames in auto colors ... +Frames are also an option they work in exactly the same way as panes. + +[.pane__frames.cols-3.no-title] +== {empty} + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +[.pane__frames.cols-4] +== Using pane frames in auto colors ... + +=== Auto four ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +=== Auto old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + + +== Using panes with manually selected colors ... +If you wish, you can also set the colours of the cards manually this has to be done on a per card basis. + +[.pane__card.no-title.cols-3] +== {empty} + +[.pane__card--blue] +=== Any old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + +[.pane__card--green] +=== Any old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + +[.pane__frame--orange] +=== Any old ignorable text + +Release 2.7 adds support for Java (Desktop and Web Server) applications. +Read more: xref:java-platform.adoc[Java] + +The release also contains bug fixes and enhancements. +Find out more in the release notes: + + +== There is a banner option + +[.banner.no-title] +=== {empty} +*SDK Reference API:* Java | Java (Android) | .Net | Swift | xref:objc.adoc#release-notes[objective-C] + +[.pane__cards.cols-3] +== Using Lists as Cards 3 + +.Jim +* Pariatur pariatur velit veniam culpa ex laboris magna proident do. I +* In cillum qui laboris +** nostrud laboris dolor ad esse occaecat +** laboris elit minim sint non. +* Officia laboris nisi ipsum +* est deserunt do excepteur sint anim proident +* culpa laborum culpa +* Labore sint veniam cillum consectetur nulla +* In ex amet nostrud veniam. + +.Joe +* Aliqua veniam eiusmod sit occaecat magna cillum non tempor deserunt. +** Elit nostrud magna consequat incididunt dolore nisi excepteur. +** Pariatur ut consequat enim. + +.Fred +* Qui eiusmod quis pariatur aliqua Lorem esse proident sint tempor officia. +* Enim Lorem ipsum deserunt amet ipsum adipisicing occaecat +** aute exercitation ut. ++ +Exercitation culpa consectetur minim ad magna eu eiusmod anim deserunt. Dolore ipsum est commodo minim. Ipsum sit aliqua ea pariatur deserunt Lorem fugiat ex sint. Quis sint laborum laborum est est ullamco irure esse ea aliqua nostrud qui. + +[.pane__cards.cols-4] +== Test Card Lists Four + +.*Joey* +* fred <> +** fred +** fred <> +* fred +* fred <> +* fred + +.*Ross* +* fred <> +* fred +* fred <> +* fred +* fred <> +* fred + +.*Rachael* +* fred <> ++ +-- +** one +** two +** tres +-- + +.Phoebe +* fred +* fred <> +* fred +* fred <> +* fred + +[.pane__frames] +== Using Lists as Frames 2xCol + +.Frame 1 +* *Build a sample web app* + +** Set up my Couchbase Lite SDK +** Build a sample console app +** Pariatur pariatur velit veniam culpa ex laboris magna proident do. + +* In cillum qui laboris nostrud laboris dolor ad esse occaecat laboris elit minim sint non. +* Officia laboris nisi ipsum est deserunt do excepteur sint anim proident culpa laborum culpa. Labore sint veniam cillum consectetur nulla. + +.Frame 2 +* Set up my Couchbase Lite SDK +* Build a sample console app +** Pariatur pariatur velit veniam culpa ex laboris magna proident do. +*** Pariatur pariatur velit veniam culpa +*** Ex laboris magna proident do. +*** Pariatur pariatur velit veniam culpa +*** Ex laboris magna proident do. +** In cillum qui laboris nostrud laboris dolor ad esse occaecat laboris elit minim sint non. +* Officia laboris nisi ipsum est deserunt do excepteur sint anim proident culpa laborum culpa. +Labore sint veniam cillum consectetur nulla. +* In ex amet nostrud veniam. + +[.pane__frames.cols-3] +== list 3xcols + +.Hi One +* fred <> +* list-item in frame +** list-item in frame +** list-item in frame +** list-item in frame +* list-item in frame + +.Hi Two +* fred <> +* list-item in frame +** list-item in frame +** list-item in frame +** list-item in frame +* list-item in frame + +[.pane__frame--purple] +.Hi Three +* fred +* list-item in frame +** list-item in frame +** list-item in frame +** list-item in frame ++ +list-item in frame + +[.pane__frames.cols-4] +== list 4xcols + +.Another Frame +* fred <> +* fred +* fred +* fred + + +.And another +* fred +* list-item in frame +** list-item in frame + +.Yes Another +* list-item in frame +* list-item in frame +* list-item in frame + +.Last One +* fred +* fred <> +* fred +* fred + +[.pane__frames] +== list Unequal Frames + +[.pane__frame--orange] +.Long Frame +* fred <> +* Veniam Lorem consequat est ipsum magna nulla qui veniam minim. Ipsum adipisicing enim nisi ex non exercitation laboris qui. Velit sunt ipsum commodo duis labore consectetur. Ex dolor sunt velit adipisicing. + +** fred +** fred + +[.narrow] +.Short Frame +* fred +* list-item in frame +** list-item in frame + diff --git a/src/css/panes.css b/src/css/panes.css new file mode 100644 index 00000000..3d073a2c --- /dev/null +++ b/src/css/panes.css @@ -0,0 +1,370 @@ +@import "../css/vars.css"; +/* Panes and cards related vars */ +/* +$--pane-colors: ( + gray-card: var(--color-brand-silver), + red-card: var(--color-brand-red-tint), + orange-card: var(--color-brand-orange), + purple-card: var(--color-brand-purple-tint), + green-card: var(--color-brand-green), + pink-card: var(--color-brand-pink), + blue-card: var(--color-brand-light-blue), + white-card: var(--color-brand-white), + gray-frame: var(--color-brand-gray), + red-frame: var(--color-brand-red), + orange-frame: var(--color-brand-orange), + purple-frame: var(--color-brand-purple), + green-frame: var(--color-brand-green), + pink-frame: var(--color-brand-pink), + blue-frame: var(--color-brand-light-blue), + white-frame: var(--color-brand-white) +); +*/ +.pane__card > .sectionbody, .pane__frames > .sectionbody, .pane__cards > .sectionbody { + margin: 0; + padding: 0; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + justify-items: flex-start; + align-items: stretch; + align-content: space-between; +} + +.banner, .pane__frame--red, .pane__frame--purple, .pane__frame--orange, .pane__frame--blue, .pane__frame--green, .pane__frame--pink, .pane__card--red, .pane__card--purple, .pane__card--orange, .pane__card--blue, .pane__card--green, .pane__card--pink, .pane__frames > .sectionbody > .sect2, .pane__cards > .sectionbody > .sect2, .pane__frames > .sectionbody > .ulist, .pane__cards > .sectionbody > .ulist { + flex: 1 0 auto; + margin: 0.75rem 0.75rem 0 0; + padding: 1rem 0.75rem 0.75rem 0.75rem; + border-radius: 0.5rem; +} + +.pane__frames > .sectionbody > .ulist, .pane__cards > .sectionbody > .ulist { + margin: 0 0.5rem 0.75rem 0; + flex-basis: calc((100% - (2 * 1rem)) / 2); + list-style: square; + margin-top: 0 !important; +} + +.pane__cards > .sectionbody > .ulist { + flex-basis: calc((100% - (2 * 1rem)) / 2); +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 1) { + border: 0.125rem solid var(--color-brand-pink); + background-color: var(--color-brand-pink); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 1) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 2) { + border: 0.125rem solid var(--color-brand-green); + background-color: var(--color-brand-green); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 2) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 3) { + border: 0.125rem solid var(--color-brand-light-blue); + background-color: var(--color-brand-light-blue); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 3) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 4) { + border: 0.125rem solid var(--color-brand-orange); + background-color: var(--color-brand-orange); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 4) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 5) { + border: 0.125rem solid var(--color-brand-purple); + background-color: var(--color-brand-purple); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 5) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 6) { + border: 0.125rem solid var(--color-brand-red); + background-color: var(--color-brand-red); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .ulist:nth-of-type(4n + 6) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .ulist > ul { + list-style: none; + padding-left: 0rem; + margin-left: 0rem; +} +.pane__cards > .sectionbody > .ulist * ul { + list-style: square; + padding-left: 1rem; + margin-left: 0rem; +} +.pane__cards > .sectionbody > .sect2 { + flex-basis: calc((100% - (2 * 1rem)) / 2); +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+1) { + border: 0.125rem solid var(--color-brand-pink); + background-color: var(--color-brand-pink); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+1) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+2) { + border: 0.125rem solid var(--color-brand-green); + background-color: var(--color-brand-green); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+2) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+3) { + border: 0.125rem solid var(--color-brand-light-blue); + background-color: var(--color-brand-light-blue); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+3) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+4) { + border: 0.125rem solid var(--color-brand-orange); + background-color: var(--color-brand-orange); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+4) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+5) { + border: 0.125rem solid var(--color-brand-purple); + background-color: var(--color-brand-purple); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+5) a { + text-decoration: none; + color: lightgray; +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+6) { + border: 0.125rem solid var(--color-brand-red); + background-color: var(--color-brand-red); + color: var(--color-brand-white); +} +.pane__cards > .sectionbody > .sect2:nth-child(4n+6) a { + text-decoration: none; + color: lightgray; +} + +.pane__frames > .sectionbody > .ulist { + flex-basis: calc((100% - (2 * 1rem)) / 2); +} +.pane__frames > .sectionbody > .ulist:nth-of-type(4n + 1) { + border: 0.125rem solid var(--color-brand-pink); + background-color: transparent; +} +.pane__frames > .sectionbody > .ulist:nth-of-type(4n + 2) { + border: 0.125rem solid var(--color-brand-green); + background-color: transparent; +} +.pane__frames > .sectionbody > .ulist:nth-of-type(4n + 3) { + border: 0.125rem solid var(--color-brand-light-blue); + background-color: transparent; +} +.pane__frames > .sectionbody > .ulist:nth-of-type(4n + 4) { + border: 0.125rem solid var(--color-brand-orange); + background-color: transparent; +} +.pane__frames > .sectionbody > .ulist:nth-of-type(4n + 5) { + border: 0.125rem solid var(--color-brand-purple); + background-color: transparent; +} +.pane__frames > .sectionbody > .ulist:nth-of-type(4n + 6) { + border: 0.125rem solid var(--color-brand-red); + background-color: transparent; +} +.pane__frames > .sectionbody > .ulist > ul { + list-style: none; + padding-left: 0rem; + margin-left: 0rem; +} +.pane__frames > .sectionbody > .ulist * ul { + list-style: square; + padding-left: 1rem; + margin-left: 0rem; +} +.pane__frames > .sectionbody > .sect2 { + flex-basis: calc((100% - (2 * 1rem)) / 2); +} +.pane__frames > .sectionbody > .sect2:nth-child(4n+1) { + border: 0.125rem solid var(--color-brand-pink); + background-color: transparent; +} +.pane__frames > .sectionbody > .sect2:nth-child(4n+2) { + border: 0.125rem solid var(--color-brand-green); + background-color: transparent; +} +.pane__frames > .sectionbody > .sect2:nth-child(4n+3) { + border: 0.125rem solid var(--color-brand-light-blue); + background-color: transparent; +} +.pane__frames > .sectionbody > .sect2:nth-child(4n+4) { + border: 0.125rem solid var(--color-brand-orange); + background-color: transparent; +} +.pane__frames > .sectionbody > .sect2:nth-child(4n+5) { + border: 0.125rem solid var(--color-brand-purple); + background-color: transparent; +} +.pane__frames > .sectionbody > .sect2:nth-child(4n+6) { + border: 0.125rem solid var(--color-brand-red); + background-color: transparent; +} + +.pane__card--pink { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-pink); + background-color: var(--color-brand-pink) !important; + color: var(--color-brand-white); +} +.pane__card--pink a { + text-decoration: none; + color: lightgray; +} +.pane__card--green { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-green); + background-color: var(--color-brand-green) !important; + color: var(--color-brand-white); +} +.pane__card--green a { + text-decoration: none; + color: lightgray; +} +.pane__card--blue { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-light-blue); + background-color: var(--color-brand-light-blue) !important; + color: var(--color-brand-white); +} +.pane__card--blue a { + text-decoration: none; + color: lightgray; +} +.pane__card--orange { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-orange); + background-color: var(--color-brand-orange) !important; + color: var(--color-brand-white); +} +.pane__card--orange a { + text-decoration: none; + color: lightgray; +} +.pane__card--purple { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-purple); + background-color: var(--color-brand-purple) !important; + color: var(--color-brand-white); +} +.pane__card--purple a { + text-decoration: none; + color: lightgray; +} +.pane__card--red { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-red); + background-color: var(--color-brand-red) !important; + color: var(--color-brand-white); +} +.pane__card--red a { + text-decoration: none; + color: lightgray; +} + +.pane__frame--pink { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-pink) !important; + background-color: transparent; +} +.pane__frame--green { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-green) !important; + background-color: transparent; +} +.pane__frame--blue { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-light-blue) !important; + background-color: transparent; +} +.pane__frame--orange { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-orange) !important; + background-color: transparent; +} +.pane__frame--purple { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-purple) !important; + background-color: transparent; +} +.pane__frame--red { + flex-basis: calc((100% - (2 * 1rem)) / 2); + border: 0.125rem solid var(--color-brand-red) !important; + background-color: transparent; +} + +.cols-3 > .sectionbody > .ulist, +.pane__cards.cols-3 .sect2, +.pane__card.cols-3 .sect2, +.pane__frames.cols-3 .sect2 { + flex-basis: calc((100% - (3 * 1rem)) / 3); +} + +.cols-4 > .sectionbody > .ulist, +.pane__cards.cols-4 .sect2, +.pane__card.cols-4 .sect2, +.pane__frames.cols-4 .sect2 { + flex-basis: calc((100% - (4 * 1rem)) / 4); +} + +.banner { + border: 0.125rem solid var(--color-brand-red); + background-color: transparent; + flex-basis: 100%; +} + +.wide { + flex: 2 0 auto !important; +} + +.narrow { + flex: 0 0 auto !important; +} + +.no-color { + background-color: transparent !important; + border: transparent !important; +} + +.no-title h2 { + max-height: none; + visibility: hidden; + padding-top: 0rem; + margin-top: 0rem; +} + +/*# sourceMappingURL=panes.css.map */ diff --git a/src/css/site.css b/src/css/site.css index 1df4b82e..16f0fc05 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -17,3 +17,4 @@ @import "optanon.css"; @import "highlight.css"; @import "feedback.css"; +@import "panes.css"; diff --git a/src/scss/_panes__mixins.scss b/src/scss/_panes__mixins.scss new file mode 100644 index 00000000..b7e23719 --- /dev/null +++ b/src/scss/_panes__mixins.scss @@ -0,0 +1,91 @@ +// Global Mixins + +@mixin setColorCard($key, $override: "") { + border: $--bdr-panes-stdWidth $--bdr-panes-stdType getColor(#{$key}/*-card*/); + background-color: getColor(#{$key}/*-card*/) #{$override}; + color: var($--color-font-light); + @include definePaneLinks +}; + +@mixin setColorFrame($key, $override: "") { + border: $--bdr-panes-stdWidth $--bdr-panes-stdType getColor(#{$key}/*-frame*/) #{$override}; + background-color: transparent; +}; +@mixin definePanesContainer($dir) { + @include resetMargins(); + width: 100%; + display: flex; + flex-flow: #{$dir} wrap; + justify-content: space-between; + justify-items: flex-start; + align-items: stretch; + align-content: space-between; +} + +@mixin definePaneLinks { + a { + text-decoration: none; + color: lightgray + } +} + +@mixin defineChildElements( $type: card, $element: nth-of-type) { + $i: 0; + @each $col, $colvar in $--pane-colors { + $i: $i + 1; + &:#{$element}(4n + #{$i}) { + @if $type=="card" { + @include setColorCard( #{$col} ) + } @else { + @include setColorFrame( #{$col} ) + } + } + } +} + +@mixin defineListBulleting() { + // Suppress bullet symbol on top list-level - to give impression of standard para + > ul { // child of + list-style: none; + padding-left: 0rem; + margin-left: 0rem; + } + + // Add bullet symbol on subsequent list-levels - to give a bulleted list within a list frame or card + * ul { // anything other than the child of + list-style: square; + padding-left: 1rem; + margin-left: 0rem; + } +} + + +@mixin resetMargins { + margin: 0; + padding: 0; +} + +@mixin setColumns($cols) { + flex-basis: calc((100% - (#{$cols} * 1rem)) / #{$cols}); +} + +@mixin setPaneListMargin { + margin: $--mgn-panes-std-ulist +} + +@function getColor($key) { + @if map-has-key($--pane-colors, $key) { + @return map-get($--pane-colors, $key); + } + @warn "Unknown `#{$key}` in $colors."; + @return null; +}; + +@function setFontColor($key) { + @if lightness($key)>70 { + @return var($--color-font-light); + } @else { + @return var($--color-font-dark); + } +} + diff --git a/src/scss/_panes__variables.scss b/src/scss/_panes__variables.scss new file mode 100644 index 00000000..11bef86c --- /dev/null +++ b/src/scss/_panes__variables.scss @@ -0,0 +1,62 @@ + +/* Panes and cards related vars */ + +$--color-font-light: --color-brand-white; +$--color-font-dark: --color-brand-gray; +/* +$--pane-colors: ( + gray-card: var(--color-brand-silver), + red-card: var(--color-brand-red-tint), + orange-card: var(--color-brand-orange), + purple-card: var(--color-brand-purple-tint), + green-card: var(--color-brand-green), + pink-card: var(--color-brand-pink), + blue-card: var(--color-brand-light-blue), + white-card: var(--color-brand-white), + gray-frame: var(--color-brand-gray), + red-frame: var(--color-brand-red), + orange-frame: var(--color-brand-orange), + purple-frame: var(--color-brand-purple), + green-frame: var(--color-brand-green), + pink-frame: var(--color-brand-pink), + blue-frame: var(--color-brand-light-blue), + white-frame: var(--color-brand-white) +); +*/ + +$--pane-colors: ( + "pink": var(--color-brand-pink), + "green": var(--color-brand-green), + "blue": var(--color-brand-light-blue), + "orange": var(--color-brand-orange), + "purple": var(--color-brand-purple), + "red": var(--color-brand-red) +); + + + +$--pane-radius: 0.5rem; +$--card-radius: 0.5rem; +$--pane-border-width: 0.125rem; +$--halves: 47%; +$--thirds: 32%; +$--quarters: 23%; +$--fifths: 15%; +$--line-height-normal: 1.5rem; +$--font-size-normal: 1rem; +$--horizontal-gap: 1.75rem; +$--vertical-gap: 0.75rem; + +$--std-margins: 0.5rem 0.75rem 1rem 0.75rem; +$--std-flexbox-margin: 0.5rem; +$--card-decor-margin: 0.25rem 0 1rem 0; +$--card-decor-line: 0.15rem solid currentColor; + +$--mgn-panes-std: 0.75rem 0.75rem 0 0; +$--mgn-panes-std-ulist: 0 0.5rem 0.75rem 0; +$--pad-panes-std: 1rem 0.75rem 0.75rem 0.75rem; +$--rad-panes-std: 0.5rem; +$--bdr-panes-stdWidth: 0.125rem; +$--bdr-panes-stdType: solid; +$--bdr-panes-stdColor: --color-brand-silver; + diff --git a/src/scss/panes.scss b/src/scss/panes.scss new file mode 100644 index 00000000..7cc96cba --- /dev/null +++ b/src/scss/panes.scss @@ -0,0 +1,160 @@ +@import "../css/vars.css"; +@import "./panes__mixins"; +@import "./panes__variables"; + +@function getColor($key) { + @if map-has-key($--pane-colors, $key) { + @return map-get($--pane-colors, $key); + } + @warn "Unknown `#{$key}` in $colors."; + @return null; +}; + +@function setFontColor($key) { + @if lightness($key)>70 { + @return var($--color-font-light); + } @else { + @return var($--color-font-dark); + } +} + +%paneContainer { + @include resetMargins(); + display: flex; + flex-flow: row wrap; + justify-content: space-between; + justify-items: flex-start; + align-items: stretch; + align-content: space-between; +} + +%pane { + flex: 1 0 auto; + margin: $--mgn-panes-std; + padding: $--pad-panes-std; + border-radius: $--rad-panes-std +} + +%list__pane { + @extend %pane; + @include setPaneListMargin; + @include setColumns(2); + list-style: square; + margin-top: 0 !important +} + +.pane__cards { + +// Define Container Properties +> .sectionbody { + @extend %paneContainer; + + // Define Card Properties for Lists + > .ulist { + @extend %list__pane; + @include setColumns(2); + @include defineChildElements("card","nth-of-type"); + @include defineListBulleting(); + + } + + // Define Card Properties for H3 + > .sect2 { + @extend %pane; + @include setColumns(2); + @include defineChildElements("card","nth-child") + } + } +} + +.pane__frames { + +// Define Container Properties for Lists + > .sectionbody { + @extend %paneContainer; + + // Define Frame Properties for Lists + > .ulist { + @extend %list__pane; + @include setColumns(2); + @include defineChildElements("frame","nth-of-type"); + @include defineListBulleting(); + } + + // Define Frame Properties for H3 + > .sect2 { + @extend %pane; + @include setColumns(2); + @include defineChildElements("frame","nth-child") + } + } +} + +.pane__card{ + + > .sectionbody { + @extend %paneContainer; + } + @each $col, $colvar in $--pane-colors { + &--#{$col} { + @extend %pane; + @include setColumns(2); + @include setColorCard( #{$col}, !important ); + } + } +} + +.pane__frame{ + > .sectionbody { + @extend %paneContainer; + } + @each $col, $colvar in $--pane-colors { + &--#{$col} { + @extend %pane; + @include setColumns(2); + @include setColorFrame( #{$col}, !important); + } + } +} + +.cols-3 > .sectionbody > .ulist, +.pane__cards.cols-3 .sect2, +.pane__card.cols-3 .sect2, +.pane__frames.cols-3 .sect2, +.pane__frame.cols-3 .sect2 { + @include setColumns(3) +} + +.cols-4 > .sectionbody > .ulist, +.pane__cards.cols-4 .sect2, +.pane__card.cols-4 .sect2, +.pane__frames.cols-4 .sect2, +.pane__frame.cols-4 .sect2 { + @include setColumns(4) +} + +.banner { + @extend %pane; + @include setColorFrame(red); + flex-basis: 100% +} + +.wide { + flex: 2 0 auto !important +} + +.narrow { + flex: 0 0 auto !important +} + +.no-color { + background-color: transparent !important; + border: transparent !important; +} + +.no-title h2 { + max-height: none; + visibility: hidden; + padding-top: 0rem; + margin-top: 0rem; +} \ No newline at end of file