Merge pull request #174 from picturepan2/feature/0.2.11

Feature/0.2.11
picturepan2 · Mar 29, 2017 · c4baa9b · c4baa9b
2 parents 6bee0bb + 136b112
commit c4baa9b
Show file tree

Hide file tree

Showing 49 changed files with 2,365 additions and 292 deletions.
diff --git a/README.md b/README.md
@@ -63,6 +63,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Menus](http://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation
 - [Modals](http://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts
 - [Navigation](http://picturepan2.github.io/spectre/components.html#navigation) - breadcrumb, tabs, pagination and navs
+- [Popovers](http://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers
 - [Steps](http://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps
 - [Tiles](http://picturepan2.github.io/spectre/components.html#tiles) - repeatable or embeddable information blocks
 - [Toasts](http://picturepan2.github.io/spectre/components.html#toasts) - showing alerts or notifications

diff --git a/dist/spectre-exp.css b/dist/spectre-exp.css
@@ -394,10 +394,10 @@
   width: auto;
 }
 .parallax .parallax-content {
-  box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, .45);
+  box-shadow: 0 2rem 4.2rem rgba(69, 77, 93, .3);
   height: auto;
-  -webkit-transform: perspective(50rem);
-  transform: perspective(50rem);
+  -webkit-transform: perspective(100rem);
+  transform: perspective(100rem);
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   transition: all .4s ease;
@@ -412,66 +412,105 @@
   top: 0;
   width: 100%;
 }
+.parallax .parallax-front {
+  -webkit-align-items: center;
+  align-items: center;
+  color: #fff;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  height: 100%;
+  -webkit-justify-content: center;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  text-align: center;
+  text-shadow: 0 0 3rem rgba(69, 77, 93, .95);
+  top: 0;
+  -webkit-transform: translateZ(10rem);
+  transform: translateZ(10rem);
+  transition: all .4s ease;
+  width: 100%;
+  z-index: 1;
+}
 .parallax .parallax-top-left {
   height: 50%;
   left: 0;
   position: absolute;
   top: 0;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-top-left:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
-  transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
+  -webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(3deg);
+  transform: perspective(100rem) rotateX(-3deg) rotateY(3deg);
 }
 .parallax .parallax-top-left:hover ~ .parallax-content::before {
   background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(-.65rem, -.65rem, 10rem);
+  transform: translate3d(-.65rem, -.65rem, 10rem);
+}
 .parallax .parallax-top-right {
   height: 50%;
   position: absolute;
   right: 0;
   top: 0;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-top-right:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
-  transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
+  -webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg);
+  transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg);
 }
 .parallax .parallax-top-right:hover ~ .parallax-content::before {
   background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(.65rem, -.65rem, 10rem);
+  transform: translate3d(.65rem, -.65rem, 10rem);
+}
 .parallax .parallax-bottom-left {
   bottom: 0;
   height: 50%;
   left: 0;
   position: absolute;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-bottom-left:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
-  transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
+  -webkit-transform: perspective(100rem) rotateX(3deg) rotateY(3deg);
+  transform: perspective(100rem) rotateX(3deg) rotateY(3deg);
 }
 .parallax .parallax-bottom-left:hover ~ .parallax-content::before {
   background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(-.65rem, .65rem, 10rem);
+  transform: translate3d(-.65rem, .65rem, 10rem);
+}
 .parallax .parallax-bottom-right {
   bottom: 0;
   height: 50%;
   position: absolute;
   right: 0;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-bottom-right:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
-  transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
+  -webkit-transform: perspective(100rem) rotateX(3deg) rotateY(-3deg);
+  transform: perspective(100rem) rotateX(3deg) rotateY(-3deg);
 }
 .parallax .parallax-bottom-right:hover ~ .parallax-content::before {
   background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(.65rem, .65rem, 10rem);
+  transform: translate3d(.65rem, .65rem, 10rem);
+}
 .progress {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -535,7 +574,7 @@
   border: 0;
   border-radius: 50%;
   height: 1.2rem;
-  margin-top: -.4rem;
+  margin-top: -.5rem;
   transition: transform .2s ease, -webkit-transform .2s ease;
   transition: transform .2s ease;
   transition: -webkit-transform .2s ease;
@@ -592,19 +631,19 @@
 .slider::-webkit-slider-runnable-track {
   background: #f0f1f4;
   border-radius: .2rem;
-  height: .4rem;
+  height: .2rem;
   width: 100%;
 }
 .slider::-moz-range-track {
   background: #f0f1f4;
   border-radius: .2rem;
-  height: .4rem;
+  height: .2rem;
   width: 100%;
 }
 .slider::-ms-track {
   background: #f0f1f4;
   border-radius: .2rem;
-  height: .4rem;
+  height: .2rem;
   width: 100%;
 }
 .slider::-ms-fill-lower {

diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css