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..c77b9dfb --- /dev/null +++ b/_lib/solid-components/_popovers.scss @@ -0,0 +1,144 @@ +// +// Popovers +// -------------------------------------------------- +$background-caret-size: .625rem; +$foreground-caret-size: .5625rem; + +.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 popover + &: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 popover + border-color: transparent; + border-width: $background-caret-size; + } + &:after { // background caret styles for right, left, bottom, & top popover + border-color: transparent; + border-width: $foreground-caret-size; + } +} + +.popover-right, .popover-left { + &:before { + 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 popover + } +} + +.popover-right { + &:before, &:after { // caret styles for the right popover + 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 popover + 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 popover + } + &:after { + margin-left: -($foreground-caret-size); // background caret styles shared between top and bottom popover + } +} + +.popover-top { + &:before, &:after { // caret styles for the top popover + 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 popover + 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 %} +
    + +