diff --git a/components/04_Molecules/_molecules.styl b/components/04_Molecules/_molecules.styl index 02b4b4e..92b5044 100644 --- a/components/04_Molecules/_molecules.styl +++ b/components/04_Molecules/_molecules.styl @@ -1 +1,2 @@ -@import 'elementList/_elementList' \ No newline at end of file +@import 'elementList/_elementList' +@import 'overlayButton/_overlayButton' \ No newline at end of file diff --git a/components/04_Molecules/overlayButton/_overlayButton.styl b/components/04_Molecules/overlayButton/_overlayButton.styl new file mode 100644 index 0000000..e44dc55 --- /dev/null +++ b/components/04_Molecules/overlayButton/_overlayButton.styl @@ -0,0 +1,100 @@ + +RV-OverlayButton__Item() + position relative + &:hover > * + opacity 1 + +RV-OverlayButton__Button--circle() + border-radius 50% + +RV-OverlayButton__Button--topRight() + right 0 + top 0 + +RV-OverlayButton__Button--bottomLeft() + bottom 0 + left 0 + +RV-OverlayButton__Button--bottomRight() + bottom 0 + right 0 + +RV-OverlayButton__Button--small() + width 3*spacing-small + height 3*spacing-small + font-size 1.5*spacing-small + line-height 1.5*spacing-small + +RV-OverlayButton__Button--medium() + width 2*spacing-medium + height 2*spacing-medium + font-size spacing-medium + line-height spacing-medium + +RV-OverlayButton__Button--large() + width 2*spacing-large + height 2*spacing-large + font-size spacing-large + line-height spacing-large + +RV-OverlayButton__Row() + RV-Alignment--center() + RV-Spacing__Inner--medium() + RV-FlexRow__Container() + + position absolute + bottom 0 + height 4em + opacity .2 + width 100% + justify-content center + background-color alpha(white, .5) + padding-left 0 + padding-right 0 + + * + position initial + opacity initial + margin 0 + padding 0 + +RV-OverlayButton__Button() + text-align center + display inline-block + position absolute + background-color beige + margin spacing-small + opacity .2 + border-radius spacing-small + text-decoration none + + RV-Alignment--center() + + RV-OverlayButton__Button--medium() + + &--circle + RV-OverlayButton__Button--circle() + + &--topRight + RV-OverlayButton__Button--topRight() + + &--small + RV-OverlayButton__Button--small() + + &--medium + RV-OverlayButton__Button--medium() + + &--large + RV-OverlayButton__Button--large() +RV-OverlayButton() + &__Item + RV-OverlayButton__Item() + + &__Button + RV-OverlayButton__Button() + + &__Row + RV-OverlayButton__Row() + +.RV-OverlayButton + RV-OverlayButton() \ No newline at end of file diff --git a/components/04_Molecules/overlayButton/overlayButton.config.json b/components/04_Molecules/overlayButton/overlayButton.config.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/components/04_Molecules/overlayButton/overlayButton.config.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/components/04_Molecules/overlayButton/overlayButton.hbs b/components/04_Molecules/overlayButton/overlayButton.hbs new file mode 100644 index 0000000..58bb3bd --- /dev/null +++ b/components/04_Molecules/overlayButton/overlayButton.hbs @@ -0,0 +1,12 @@ +
+ X + X + +
+ X + X + X +
+ +

some content

+
\ No newline at end of file