From ef4f1867ec22d4d46908a1fb2aecfceabc3aa0c9 Mon Sep 17 00:00:00 2001 From: Andrei Popa Date: Tue, 12 May 2015 18:08:23 +0100 Subject: [PATCH 1/7] Add initial flip-panel component styles --- components/_flip-panel.scss | 184 ++++++++++++++++++++++++++++++++++++ paint.scss | 1 + 2 files changed, 185 insertions(+) create mode 100644 components/_flip-panel.scss diff --git a/components/_flip-panel.scss b/components/_flip-panel.scss new file mode 100644 index 0000000..a4138d7 --- /dev/null +++ b/components/_flip-panel.scss @@ -0,0 +1,184 @@ +$flip-panel-default-settings: ( + header-height: $h1-font-size + $column-gutter, + footer-height: $h1-font-size + $column-gutter / 2 +); + +@if global-variable-exists(flip-panel) { + $flip-panel: map-merge-settings($flip-panel-default-settings, $flip-panel); +} @else { + $flip-panel: $flip-panel-default-settings; +} + +$include-html-paint-flip-panel: true !default; + +@function flip-panel-settings($setting, $property: null) { + @if $property { + @return map-get(map-get($flip-panel, $setting), $property), + } @else { + @return map-get($flip-panel, $setting) + } +} + +@mixin flip-panel-scroll-content($with-header: true, $with-footer: false) { + @if $with-header { + top: flip-panel-settings(header-height); + } @else { + top: 0; + } + @if $with-footer { + bottom: flip-panel-settings(footer-height); + } @else { + bottom: 0; + } + + left: 0; + overflow-y: auto; + position: absolute; + right: 0; +} + +@mixin flip-panel( + $with-front-header: true, + $with-front-footer: true, + $with-back-header: true, + $with-back-footer: false, + $min-height: false) { + + @extend %grid-row; + + @if $min-height { + min-height: $min-height; + } + + perspective: 1000px; + position: relative; + transform-style: preserve-3d; + + .front, + .back { + @if $min-height { + position: absolute; + } @else { + position: relative; + } + + backface-visibility: hidden; + background-color: $white; + border-radius: $global-radius; + border: 1px solid $global-section-border-color; + bottom: 0; + left: 0; + overflow: hidden; + right: 0; + top: 0; + transform-style: preserve-3d; + transition: all .6s ease-in-out; + + > header, + > footer { + background-color: lighten($global-section-border-color, 5%); + } + + > header { + h1 { + color: $small-font-color; + font-size: $h4-font-size; + font-weight: $font-weight-bold; + line-height: flip-panel-settings(header-height); + margin: 0; + padding: 0 $column-gutter / 2; + } + } + + > footer { + @if $min-height { + bottom: 0; + left: 0; + position: absolute; + right: 0; + } + + span { + border-top: 1px solid $global-section-border-color; + display: block; + font-weight: $font-weight-bold; + line-height: flip-panel-settings(footer-height); + padding: 0 $column-gutter / 2; + } + } + + > .content { + > section { + @extend %grid-row; + + border-top: 1px solid $global-section-border-color; + padding: $column-gutter / 4 $column-gutter / 2; + } + } + } + + .front { + box-shadow: 0 1px 3px rgba(0,0,0,0.025); + transform: rotateX(0deg) rotateY(0deg); + z-index: 300; + + @if $min-height { + > .content { + @include flip-panel-scroll-content( + $with-header: $with-front-header, + $with-footer: $with-front-footer); + } + } + } + + .back { + position: absolute; + transform: rotateY(-180deg); + z-index: 200; + + > .content { + @include flip-panel-scroll-content( + $with-header: $with-back-header, + $with-footer: $with-back-footer); + } + } + + &.flipped { + .front, + .back { + box-shadow: 0 5px 10px rgba(0,0,0,0.075); + } + + .front { + z-index: 200; + transform: rotateY(180deg); + } + + .back { + z-index: 300; + transform: rotateX(0deg) rotateY(0deg); + } + } + + &.no-css-transform { + .back { + opacity: 0; + } + + &.flipped { + .front, + .back { + box-shadow:0; + opacity: 1; + } + } + } +} + +@include exports('paint-flip-panel') { + @if $include-html-paint-flip-panel { + .flip-panel { + @include flip-panel; + } + } +} diff --git a/paint.scss b/paint.scss index 55ee129..90f3fd6 100644 --- a/paint.scss +++ b/paint.scss @@ -22,3 +22,4 @@ @import 'components/form'; @import 'components/dropdown'; @import 'components/quick-jump'; +@import 'components/flip-panel'; From 22b61e244ac7a4c4aa2d0ef3df1362e3a9f21c3a Mon Sep 17 00:00:00 2001 From: Andrei Popa Date: Wed, 13 May 2015 10:11:43 +0100 Subject: [PATCH 2/7] Linter :cop: --- components/_flip-panel.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/_flip-panel.scss b/components/_flip-panel.scss index a4138d7..826d7f9 100644 --- a/components/_flip-panel.scss +++ b/components/_flip-panel.scss @@ -37,7 +37,7 @@ $include-html-paint-flip-panel: true !default; right: 0; } -@mixin flip-panel( +@mixin flip-panel ( $with-front-header: true, $with-front-footer: true, $with-back-header: true, @@ -64,8 +64,8 @@ $include-html-paint-flip-panel: true !default; backface-visibility: hidden; background-color: $white; - border-radius: $global-radius; border: 1px solid $global-section-border-color; + border-radius: $global-radius; bottom: 0; left: 0; overflow: hidden; @@ -118,13 +118,13 @@ $include-html-paint-flip-panel: true !default; } .front { - box-shadow: 0 1px 3px rgba(0,0,0,0.025); + box-shadow: 0 1px 3px rgba(0, 0, 0, .025); transform: rotateX(0deg) rotateY(0deg); z-index: 300; @if $min-height { > .content { - @include flip-panel-scroll-content( + @include flip-panel-scroll-content ( $with-header: $with-front-header, $with-footer: $with-front-footer); } @@ -146,17 +146,17 @@ $include-html-paint-flip-panel: true !default; &.flipped { .front, .back { - box-shadow: 0 5px 10px rgba(0,0,0,0.075); + box-shadow: 0 5px 10px rgba(0, 0, 0, .075); } .front { - z-index: 200; transform: rotateY(180deg); + z-index: 200; } .back { - z-index: 300; transform: rotateX(0deg) rotateY(0deg); + z-index: 300; } } @@ -168,7 +168,7 @@ $include-html-paint-flip-panel: true !default; &.flipped { .front, .back { - box-shadow:0; + box-shadow: 0; opacity: 1; } } From b131c13cd364fc87062ae7e9292d21df6ef993f9 Mon Sep 17 00:00:00 2001 From: Andrei Popa Date: Wed, 13 May 2015 12:10:05 +0100 Subject: [PATCH 3/7] Transition only properties that change during flipping for better performance --- components/_flip-panel.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/_flip-panel.scss b/components/_flip-panel.scss index 826d7f9..a4aff50 100644 --- a/components/_flip-panel.scss +++ b/components/_flip-panel.scss @@ -72,7 +72,9 @@ $include-html-paint-flip-panel: true !default; right: 0; top: 0; transform-style: preserve-3d; - transition: all .6s ease-in-out; + transition: + transform .6s ease-in-out, + box-shadow .6s ease-in-out; > header, > footer { From 6d7feca0cb8015b15fa0b2062915b388a0613061 Mon Sep 17 00:00:00 2001 From: Andrei Popa Date: Wed, 13 May 2015 12:10:38 +0100 Subject: [PATCH 4/7] Add default styles for header / footer link and icons --- components/_flip-panel.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/components/_flip-panel.scss b/components/_flip-panel.scss index a4aff50..d8b1450 100644 --- a/components/_flip-panel.scss +++ b/components/_flip-panel.scss @@ -79,6 +79,14 @@ $include-html-paint-flip-panel: true !default; > header, > footer { background-color: lighten($global-section-border-color, 5%); + + a { + font-weight: $font-weight-bold; + } + + i { + margin-right: $column-gutter / 4; + } } > header { From 515bfdb47fed80780fa14a29c9aee6b511f2dc37 Mon Sep 17 00:00:00 2001 From: Andrei Popa Date: Wed, 13 May 2015 12:28:25 +0100 Subject: [PATCH 5/7] Add mixin to generate flip-panel icons using the settings map --- components/_flip-panel.scss | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/components/_flip-panel.scss b/components/_flip-panel.scss index d8b1450..a9aa5b6 100644 --- a/components/_flip-panel.scss +++ b/components/_flip-panel.scss @@ -1,6 +1,10 @@ $flip-panel-default-settings: ( header-height: $h1-font-size + $column-gutter, - footer-height: $h1-font-size + $column-gutter / 2 + footer-height: $h1-font-size + $column-gutter / 2, + icons: ( + back: long-arrow-left, + forward: long-arrow-right + ) ); @if global-variable-exists(flip-panel) { @@ -19,6 +23,16 @@ $include-html-paint-flip-panel: true !default; } } +@mixin flip-panel-icons { + $flip-panel-icons: flip-panel-settings(icons); + + @each $name, $icon in $flip-panel-icons { + .#{$name}-icon { + @include icon($icon); + } + } +} + @mixin flip-panel-scroll-content($with-header: true, $with-footer: false) { @if $with-header { top: flip-panel-settings(header-height); @@ -189,6 +203,11 @@ $include-html-paint-flip-panel: true !default; @if $include-html-paint-flip-panel { .flip-panel { @include flip-panel; + + header, + footer { + @include flip-panel-icons; + } } } } From 1b4e9da8b9f785c1434b953395f1cc05b2dee4c9 Mon Sep 17 00:00:00 2001 From: Andrei Popa Date: Wed, 13 May 2015 12:37:22 +0100 Subject: [PATCH 6/7] Linter :cop: --- components/_flip-panel.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/_flip-panel.scss b/components/_flip-panel.scss index a9aa5b6..35cce8e 100644 --- a/components/_flip-panel.scss +++ b/components/_flip-panel.scss @@ -86,9 +86,7 @@ $include-html-paint-flip-panel: true !default; right: 0; top: 0; transform-style: preserve-3d; - transition: - transform .6s ease-in-out, - box-shadow .6s ease-in-out; + transition: transform .6s ease-in-out, box-shadow .6s ease-in-out; > header, > footer { From 9860ae4d87695fed5336f59d6fc240bc61a9af18 Mon Sep 17 00:00:00 2001 From: Andrei Popa Date: Wed, 13 May 2015 15:08:03 +0100 Subject: [PATCH 7/7] Bump version to 0.7.19 --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 041ac3f..c156642 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "paint", - "version": "0.7.18", + "version": "0.7.19", "homepage": "https://github.com/alphasights/paint", "authors": [ "Eugenio Depalo ",