From d50c2f980cad2f300f7e58bcccc67c5f0aaecb6f Mon Sep 17 00:00:00 2001 From: EmilyBrick Date: Wed, 12 Jul 2017 15:08:59 -0400 Subject: [PATCH 1/2] added popover folder --- _lib/_solid-components.scss | 1 + _lib/solid-components/_popovers.scss | 155 +++++++++++++++++++++++++++ docs/_includes/nav.html | 6 +- docs/_layouts/default.html | 2 +- favicon.ico => docs/favicon.ico | Bin docs/popovers.html | 46 ++++++++ 6 files changed, 208 insertions(+), 2 deletions(-) create mode 100644 _lib/solid-components/_popovers.scss rename favicon.ico => docs/favicon.ico (100%) create mode 100644 docs/popovers.html diff --git a/_lib/_solid-components.scss b/_lib/_solid-components.scss index 4e88b6d7..e9e01f5a 100644 --- a/_lib/_solid-components.scss +++ b/_lib/_solid-components.scss @@ -12,3 +12,4 @@ @import "solid-components/tags"; @import "solid-components/cards"; @import "solid-components/pagination"; +@import "solid-components/popovers"; diff --git a/_lib/solid-components/_popovers.scss b/_lib/solid-components/_popovers.scss new file mode 100644 index 00000000..45f61bad --- /dev/null +++ b/_lib/solid-components/_popovers.scss @@ -0,0 +1,155 @@ +// +// Popovers +// -------------------------------------------------- +$background-caret-size: .625rem; +$foreground-caret-size: .5625rem; +// End Tooltip Specific Variables // + +// Center contents of the Pen +body { + display: flex; + align-items: center; + justify-content: center; + margin: 5rem; + background-color: $fill-gray-lighter; +} + +// Tooltip +.popover-right, .popover-left, .popover-bottom, .popover-top { + width: 100%; + position: relative; + padding: $space-2; + + // shared styles between right, left, bottom, and top caret for the tooltip + &:before, &:after { + content: " "; + pointer-events: none; + position: absolute; + height: 0; + width: 0; + border: solid transparent; + right: 100%; + } + &:before { //foreground caret styles for right, left, bottom, & top tooltip + border-color: transparent; + border-width: $background-caret-size; + } + &:after { // background caret styles for right, left, bottom, & top tooltip + border-color: transparent; + border-width: $foreground-caret-size; + } +} + +.popover-right, .popover-left { + &:before { + margin-top: -($background-caret-size); //foreground caret styles for right & left tooltip + } + &:after { + margin-top: -($foreground-caret-size); //background caret styles for between right & left tooltip + } +} + +.popover-right { + &:before, &:after { // caret styles for the right tooltip + right: 100%; + top: 50%; + } + &:before { + border-right-color: lighten($fill-gray, 20%); + } + &:after { + border-right-color: $fill-white; + } + &--gray { + background-color: darken($fill-gray, 20%); + border: none; + color: white; + &:before { + border-right-color: darken($fill-gray, 20%); + } + &:after { + border-right-color: darken($fill-gray, 20%); + } + } +} + +.popover-left { + &:before, &:after { // caret styles for the left tooltip + left: 100%; + top: 50%; + } + &:before { + border-left-color: lighten($fill-gray, 20%); + } + &:after { + border-left-color: $fill-white; + } + &--gray { + background-color: darken($fill-gray, 20%); + border: none; + color: white; + &:before { + border-left-color: darken($fill-gray, 20%); + } + &:after { + border-left-color: darken($fill-gray, 20%); + } + } +} + +.popover-top, .popover-bottom { + &:before { + margin-left: -($background-caret-size); // foreground caret styles shared between top and bottom tooltip + } + &:after { + margin-left: -($foreground-caret-size); // background caret styles shared between top and bottom tooltip + } +} + +.popover-top { + &:before, &:after { // caret styles for the top tooltip + left: 50%; + bottom: 100%; + } + &:before { + border-bottom-color: lighten($fill-gray, 20%); + } + &:after { + border-bottom-color: $fill-white; + } + &--gray { + background-color: darken($fill-gray, 20%); + border: none; + color: white; + &:before { + border-bottom-color: darken($fill-gray, 20%); + } + &:after { + border-bottom-color: darken($fill-gray, 20%); + } + } +} + +.popover-bottom { + &:before, &:after { // caret styles for the bottom tooltip + left: 50%; + top: 100%; + } + &:before { + border-top-color: lighten($fill-gray, 20%); + } + &:after { + border-top-color: $fill-white; + } + &--gray { + background-color: darken($fill-gray, 20%); + border: none; + color: white; + &:before { + border-top-color: darken($fill-gray, 20%); + } + &:after { + border-top-color: darken($fill-gray, 20%); + } + } +} diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html index efc430d9..22e978b3 100644 --- a/docs/_includes/nav.html +++ b/docs/_includes/nav.html @@ -160,7 +160,7 @@

{% endif %} - +
  • Tables @@ -302,6 +302,10 @@

    Tags

    • +
  • + Popovers +
    • + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 2b170308..9f2b4c81 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -7,7 +7,7 @@ - + {% include nav.html %} diff --git a/favicon.ico b/docs/favicon.ico similarity index 100% rename from favicon.ico rename to docs/favicon.ico diff --git a/docs/popovers.html b/docs/popovers.html new file mode 100644 index 00000000..c2d45a4e --- /dev/null +++ b/docs/popovers.html @@ -0,0 +1,46 @@ +--- +layout: default +title: Popovers +--- + +
    + + +

    Popovers

    +

    Popovers are useful for uncovering helpful information or hints when using a product. Use the ..popover .popover--right classes to incorporate a popover into your project.

    + + +
    +
    +

    Cassoulet is a rich, slow-cooked casserole originating in the south of France, containing meat, pork skin and white beans.

    +
    +
    +

    Cassoulet is a rich, slow-cooked casserole originating in the south of France, containing meat, pork skin and white beans.

    +
    +
    +

    Cassoulet is a rich, slow-cooked casserole originating in the south of France, containing meat, pork skin and white beans.

    +
    +
    +

    Cassoulet is a rich, slow-cooked casserole originating in the south of France, containing meat, pork skin and white beans.

    +
    +
    +

    Cassoulet is a rich, slow-cooked casserole originating in the south of France, containing meat, pork skin and white beans.

    +
    +
    +

    Cassoulet is a rich, slow-cooked casserole originating in the south of France, containing meat, pork skin and white beans.

    +
    +
    +

    Cassoulet is a rich, slow-cooked casserole originating in the south of France, containing meat, pork skin and white beans.

    +
    +
    +

    Cassoulet is a rich, slow-cooked casserole originating in the south of France, containing meat, pork skin and white beans.

    +
    +
    + +
    +{% highlight html %} + +{% endhighlight %} +
    + +
    From 9f5ccfd6192dbf2ee35a5666d1a9bca2e3ba3a6f Mon Sep 17 00:00:00 2001 From: EmilyBrick Date: Wed, 12 Jul 2017 15:39:01 -0400 Subject: [PATCH 2/2] added popovers to the component structure --- _lib/solid-components/_popovers.scss | 33 ++++++++++------------------ 1 file changed, 11 insertions(+), 22 deletions(-) diff --git a/_lib/solid-components/_popovers.scss b/_lib/solid-components/_popovers.scss index 45f61bad..c77b9dfb 100644 --- a/_lib/solid-components/_popovers.scss +++ b/_lib/solid-components/_popovers.scss @@ -3,24 +3,13 @@ // -------------------------------------------------- $background-caret-size: .625rem; $foreground-caret-size: .5625rem; -// End Tooltip Specific Variables // -// Center contents of the Pen -body { - display: flex; - align-items: center; - justify-content: center; - margin: 5rem; - background-color: $fill-gray-lighter; -} - -// Tooltip .popover-right, .popover-left, .popover-bottom, .popover-top { width: 100%; position: relative; padding: $space-2; - // shared styles between right, left, bottom, and top caret for the tooltip + // shared styles between right, left, bottom, and top caret for the popover &:before, &:after { content: " "; pointer-events: none; @@ -30,11 +19,11 @@ body { border: solid transparent; right: 100%; } - &:before { //foreground caret styles for right, left, bottom, & top tooltip + &:before { //foreground caret styles for right, left, bottom, & top popover border-color: transparent; border-width: $background-caret-size; } - &:after { // background caret styles for right, left, bottom, & top tooltip + &:after { // background caret styles for right, left, bottom, & top popover border-color: transparent; border-width: $foreground-caret-size; } @@ -42,15 +31,15 @@ body { .popover-right, .popover-left { &:before { - margin-top: -($background-caret-size); //foreground caret styles for right & left tooltip + margin-top: -($background-caret-size); //foreground caret styles for right & left popover } &:after { - margin-top: -($foreground-caret-size); //background caret styles for between right & left tooltip + margin-top: -($foreground-caret-size); //background caret styles for between right & left popover } } .popover-right { - &:before, &:after { // caret styles for the right tooltip + &:before, &:after { // caret styles for the right popover right: 100%; top: 50%; } @@ -74,7 +63,7 @@ body { } .popover-left { - &:before, &:after { // caret styles for the left tooltip + &:before, &:after { // caret styles for the left popover left: 100%; top: 50%; } @@ -99,15 +88,15 @@ body { .popover-top, .popover-bottom { &:before { - margin-left: -($background-caret-size); // foreground caret styles shared between top and bottom tooltip + margin-left: -($background-caret-size); // foreground caret styles shared between top and bottom popover } &:after { - margin-left: -($foreground-caret-size); // background caret styles shared between top and bottom tooltip + margin-left: -($foreground-caret-size); // background caret styles shared between top and bottom popover } } .popover-top { - &:before, &:after { // caret styles for the top tooltip + &:before, &:after { // caret styles for the top popover left: 50%; bottom: 100%; } @@ -131,7 +120,7 @@ body { } .popover-bottom { - &:before, &:after { // caret styles for the bottom tooltip + &:before, &:after { // caret styles for the bottom popover left: 50%; top: 100%; }