Merge pull request #180 from picturepan2/feature/0.2.12

Feature/0.2.12
picturepan2 · Apr 5, 2017 · 8784804 · 8784804
2 parents c4baa9b + 9a7c233
commit 8784804
Show file tree

Hide file tree

Showing 48 changed files with 1,119 additions and 204 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ Spectre.css is a lightweight, responsive and modern CSS framework for faster and
 
 Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with LESS compiler.
 
-Read [the documentation](http://picturepan2.github.io/spectre/) to learn more.
+Read [the documentation](https://picturepan2.github.io/spectre/) to learn more.
 
 ### Getting started
 
@@ -31,47 +31,49 @@ And include it in your website or Web app &lt;head&gt; part.
 
 ### Compiling custom version
 
-You can compile your custom version of Spectre.css. Read [the documentation](http://picturepan2.github.io/spectre/index.html#compiling).
+You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/index.html#compiling).
 
 ### Documentation and demos
 
 #### Elements
 
-- [Typography](http://picturepan2.github.io/spectre/elements.html#typography) - headings, paragraphs, semantic text, blockquote, lists and code elements, optimized for east asian fonts
-- [Tables](http://picturepan2.github.io/spectre/elements.html#tables) - organize and display data
-- [Buttons](http://picturepan2.github.io/spectre/elements.html#buttons) - button styles in different types and sizes, and even button groups
-- [Forms](http://picturepan2.github.io/spectre/elements.html#forms) - input, radio, checkbox, switch and other form elements
-- [Labels](http://picturepan2.github.io/spectre/elements.html#labels) - formatted text tags for highlighted, informative information
-- [Codes](http://picturepan2.github.io/spectre/elements.html#codes) - inline and multiline code snippets
-- [Media](http://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video classes
-- [Experimentals](http://picturepan2.github.io/spectre/experimentals.html) - experimental elements and features, mostly are not yet ready for wide use
+- [Typography](https://picturepan2.github.io/spectre/elements.html#typography) - headings, paragraphs, semantic text, blockquote, lists and code elements, optimized for east asian fonts
+- [Tables](https://picturepan2.github.io/spectre/elements.html#tables) - organize and display data
+- [Buttons](https://picturepan2.github.io/spectre/elements.html#buttons) - button styles in different types and sizes, and even button groups
+- [Forms](https://picturepan2.github.io/spectre/elements.html#forms) - input, radio, checkbox, switch and other form elements
+- [Icons](https://picturepan2.github.io/spectre/elements.html#icons) - single-element, responsive and pure CSS icons
+- [Labels](https://picturepan2.github.io/spectre/elements.html#labels) - formatted text tags for highlighted, informative information
+- [Codes](https://picturepan2.github.io/spectre/elements.html#codes) - inline and multiline code snippets
+- [Media](https://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video classes
+- [Experimentals](https://picturepan2.github.io/spectre/experimentals.html) - experimental elements and features, mostly are not yet ready for wide use
 
 #### Layout
-- [Flexbox-grid](http://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system
-- [Responsive](http://picturepan2.github.io/spectre/layout.html#responsive) - responsive grid and utilities
-- [Navbar](http://picturepan2.github.io/spectre/layout.html#navbar) - layout container that appears in the header of apps and websites
-- [Panels](http://picturepan2.github.io/spectre/layout.html#panels) - flexible view container layout with auto-expand content section
-- [Empty states](http://picturepan2.github.io/spectre/layout.html#empty) - empty states/blank slates for first time use, empty data and error screens
+- [Flexbox-grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system
+- [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive) - responsive grid and utilities
+- [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) - layout container that appears in the header of apps and websites
+- [Panels](https://picturepan2.github.io/spectre/layout.html#panels) - flexible view container layout with auto-expand content section
+- [Empty states](https://picturepan2.github.io/spectre/layout.html#empty) - empty states/blank slates for first time use, empty data and error screens
 
 #### Components
 
-- [Autocomplete](http://picturepan2.github.io/spectre/components.html#autocomplete) - form component provides suggestions while you type
-- [Avatars](http://picturepan2.github.io/spectre/components.html#avatars) - user profile pictures or name initials rendered avatar
-- [Badges](http://picturepan2.github.io/spectre/components.html#badges) - unread number indicators
-- [Cards](http://picturepan2.github.io/spectre/components.html#cards) - flexible content containers
-- [Chips](http://picturepan2.github.io/spectre/components.html#chips) - complex entities in small blocks
-- [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
-- [Tooltips](http://picturepan2.github.io/spectre/components.html#tooltips) - simple tooltip built entirely in CSS
+- [Autocomplete](https://picturepan2.github.io/spectre/components.html#autocomplete) - form component provides suggestions while you type
+- [Avatars](https://picturepan2.github.io/spectre/components.html#avatars) - user profile pictures or name initials rendered avatar
+- [Badges](https://picturepan2.github.io/spectre/components.html#badges) - unread number indicators
+- [Bars](https://picturepan2.github.io/spectre/components.html#bars) - progress of a task or the value within the known range
+- [Cards](https://picturepan2.github.io/spectre/components.html#cards) - flexible content containers
+- [Chips](https://picturepan2.github.io/spectre/components.html#chips) - complex entities in small blocks
+- [Menus](https://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation
+- [Modals](https://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts
+- [Navigation](https://picturepan2.github.io/spectre/components.html#navigation) - breadcrumb, tabs, pagination and navs
+- [Popovers](https://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers
+- [Steps](https://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps
+- [Tiles](https://picturepan2.github.io/spectre/components.html#tiles) - repeatable or embeddable information blocks
+- [Toasts](https://picturepan2.github.io/spectre/components.html#toasts) - showing alerts or notifications
+- [Tooltips](https://picturepan2.github.io/spectre/components.html#tooltips) - simple tooltip built entirely in CSS
 
 #### Utilities
 
-- [Utilities](http://picturepan2.github.io/spectre/utilities.html) - layout, positions, display, text, shapes, loading things
+- [Utilities](https://picturepan2.github.io/spectre/utilities.html) - layout, positions, display, text, shapes, loading things
 
 ### Browser support
 Spectre uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
   "homepage": "http://picturepan2.github.io/spectre",
   "repository": "picturepan2/spectre",

diff --git a/dist/spectre-exp.css b/dist/spectre-exp.css
@@ -63,6 +63,7 @@
   cursor: pointer;
   height: 2.8rem;
   line-height: 2rem;
+  outline: none;
   padding: .3rem;
   position: relative;
   text-align: center;
@@ -76,6 +77,9 @@
   border-color: #e4e6f6;
   color: #5764c6;
 }
+.calendar .calendar-date .date-item:focus {
+  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+}
 .calendar .calendar-date .date-item:focus,
 .calendar .calendar-date .date-item:hover {
   background: #fbfbfe;
@@ -242,8 +246,8 @@
 .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
 .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
 .carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
-  -webkit-animation: carousel-slidein .75s ease-in 1;
-  animation: carousel-slidein .75s ease-in 1;
+  -webkit-animation: carousel-slidein .75s ease-in-out 1;
+  animation: carousel-slidein .75s ease-in-out 1;
   opacity: 1;
   z-index: 100;
 }
@@ -289,13 +293,6 @@
   top: 2rem;
   width: 100%;
 }
-@supports (object-fit: cover) {
-  .carousel-item img {
-    height: 100%;
-    object-fit: cover;
-    width: 100%;
-  }
-}
 @-webkit-keyframes carousel-slidein {
   0% {
     -webkit-transform: translateX(100%);
@@ -340,6 +337,159 @@
     transform: translateX(-50%);
   }
 }
+.comparison-slider {
+  height: 50vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.comparison-slider .comparison-before,
+.comparison-slider .comparison-after {
+  height: 100%;
+  left: 0;
+  margin: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+}
+.comparison-slider .comparison-before img,
+.comparison-slider .comparison-after img {
+  height: 100%;
+  object-fit: none;
+  object-position: left top;
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+}
+.comparison-slider .comparison-before {
+  width: 100%;
+}
+.comparison-slider .comparison-before .comparison-label {
+  right: 1.6rem;
+}
+.comparison-slider .comparison-after {
+  max-width: 100%;
+  min-width: 0;
+  z-index: 1;
+}
+.comparison-slider .comparison-after::before {
+  background: transparent;
+  content: "";
+  cursor: default;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 1.6rem;
+  top: 0;
+  z-index: 1;
+}
+.comparison-slider .comparison-after::after {
+  background: currentColor;
+  border-radius: 50%;
+  box-shadow: 0 -.5rem, 0 .5rem;
+  color: #fff;
+  content: "";
+  height: .3rem;
+  position: absolute;
+  right: .8rem;
+  top: 50%;
+  -webkit-transform: translate(50%, -50%);
+  -ms-transform: translate(50%, -50%);
+  transform: translate(50%, -50%);
+  width: .3rem;
+  z-index: -1;
+}
+.comparison-slider .comparison-after .comparison-label {
+  left: 1.6rem;
+}
+.comparison-slider .comparison-resizer {
+  -webkit-animation: first-run 1.5s 1 ease-in-out;
+  animation: first-run 1.5s 1 ease-in-out;
+  cursor: ew-resize;
+  height: 1.5rem;
+  left: 0;
+  max-width: 100%;
+  min-width: 1.6rem;
+  opacity: 0;
+  outline: none;
+  position: relative;
+  resize: horizontal;
+  top: 50%;
+  -webkit-transform: translateY(-50%) scaleY(30);
+  -ms-transform: translateY(-50%) scaleY(30);
+  transform: translateY(-50%) scaleY(30);
+  width: 0;
+}
+.comparison-slider .comparison-label {
+  background: rgba(69, 77, 93, .5);
+  bottom: 1.6rem;
+  color: #fff;
+  padding: .3rem .8rem;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+@-webkit-keyframes first-run {
+  0% {
+    width: 0;
+  }
+  25% {
+    width: 4.8rem;
+  }
+  50% {
+    width: 1.6rem;
+  }
+  75% {
+    width: 2.4rem;
+  }
+  100% {
+    width: 0;
+  }
+}
+@keyframes first-run {
+  0% {
+    width: 0;
+  }
+  25% {
+    width: 4.8rem;
+  }
+  50% {
+    width: 1.6rem;
+  }
+  75% {
+    width: 2.4rem;
+  }
+  100% {
+    width: 0;
+  }
+}
+.filter .filter-nav {
+  margin: 1rem 0;
+}
+.filter .filter-body {
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+.filter .filter-tag#tag-all:checked ~ .filter-nav .chip[for="tag-all"],
+.filter .filter-tag#tag-action:checked ~ .filter-nav .chip[for="tag-action"],
+.filter .filter-tag#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"],
+.filter .filter-tag#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"],
+.filter .filter-tag#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] {
+  background: #5764c6;
+  color: #fff;
+}
+.filter .filter-tag#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]),
+.filter .filter-tag#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]),
+.filter .filter-tag#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]),
+.filter .filter-tag#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) {
+  display: none;
+}
 .meter {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -568,6 +718,10 @@
   height: 2.4rem;
   width: 100%;
 }
+.slider:focus {
+  box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
+  outline: none;
+}
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   background: #5764c6;