Merge pull request #160 from picturepan2/feature/0.2.8

Feature/0.2.8
picturepan2 · Mar 10, 2017 · b8401cd · b8401cd
2 parents 1c7685d + ecf1af8
commit b8401cd
Show file tree

Hide file tree

Showing 31 changed files with 621 additions and 338 deletions.
diff --git a/README.md b/README.md
@@ -59,8 +59,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [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
-- [Dropdowns](http://picturepan2.github.io/spectre/components.html#dropdowns) - combination of buttons and menus
-- [Menus](http://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation
+- [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
 - [Steps](http://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "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
@@ -51,15 +51,17 @@
 }
 .calendar .calendar-body .calendar-date {
   border: 0;
-  overflow: hidden;
-  padding: .5rem;
+  padding: .6rem;
 }
 .calendar .calendar-body .calendar-date .date-item {
   color: #666;
 }
 .calendar .calendar-body .calendar-date.prev-month .date-item,
-.calendar .calendar-body .calendar-date.next-month .date-item {
+.calendar .calendar-body .calendar-date.next-month .date-item,
+.calendar .calendar-body .calendar-date .date-item:disabled {
+  cursor: default;
   opacity: .25;
+  pointer-events: none;
 }
 .calendar .calendar-body .date-item {
   -webkit-appearance: none;
@@ -134,8 +136,15 @@
 .calendar.calendar-lg .calendar-body .calendar-date {
   border-bottom: .1rem solid #efefef;
   border-right: .1rem solid #efefef;
-  height: 10rem;
-  text-align: right;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 11rem;
+  overflow: hidden;
+  padding: 0;
 }
 .calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) {
   border-right: 0;
@@ -144,13 +153,21 @@
   border-bottom: 0;
 }
 .calendar.calendar-lg .calendar-body .date-item {
+  -webkit-align-self: flex-end;
+  align-self: flex-end;
+  -webkit-flex: 0 0 2.4rem;
+  -ms-flex: 0 0 2.4rem;
+  flex: 0 0 2.4rem;
+  -ms-flex-item-align: end;
   height: 2.4rem;
+  margin-right: .5rem;
+  margin-top: .5rem;
   padding: .1rem;
   width: 2.4rem;
 }
 .calendar.calendar-lg .calendar-body .date-item.badge::after {
-  right: .25rem;
-  top: .25rem;
+  right: .2rem;
+  top: .2rem;
 }
 .calendar.calendar-lg .calendar-body .calendar-range .date-item::before {
   height: 2.4rem;
@@ -167,14 +184,20 @@
   right: 1.7rem;
   width: auto;
 }
+.calendar.calendar-lg .calendar-events {
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  -ms-flex-positive: 1;
+  line-height: 1;
+  overflow-y: auto;
+  padding: .5rem;
+}
 .calendar.calendar-lg .calendar-event {
   background: #eff1fa;
   border-radius: .2rem;
   color: #5764c6;
-  display: inline-block;
   display: block;
   font-size: 1.2rem;
-  line-height: 1;
   margin: .2rem auto;
   overflow: hidden;
   padding: .3rem .4rem;
@@ -207,8 +230,29 @@
   top: 0;
   width: 100%;
 }
-.carousel .carousel-locator {
-  display: none;
+.carousel .carousel-container .carousel-item:hover .item-prev,
+.carousel .carousel-container .carousel-item:hover .item-next {
+  opacity: 1;
+}
+.carousel .carousel-container .item-prev,
+.carousel .carousel-container .item-next {
+  background: rgba(204, 204, 204, .25);
+  border-color: rgba(204, 204, 204, .5);
+  color: #ccc;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  transition: all .4s ease;
+  z-index: 99;
+}
+.carousel .carousel-container .item-prev {
+  left: 2rem;
+}
+.carousel .carousel-container .item-next {
+  right: 2rem;
 }
 .carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
 .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
@@ -268,50 +312,6 @@
     width: 100%;
   }
 }
-@-webkit-keyframes carousel-autoplay {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  25% {
-    -webkit-transform: translateX(-25%);
-    transform: translateX(-25%);
-  }
-  50% {
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-  75% {
-    -webkit-transform: translateX(-75%);
-    transform: translateX(-75%);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-@keyframes carousel-autoplay {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  25% {
-    -webkit-transform: translateX(-25%);
-    transform: translateX(-25%);
-  }
-  50% {
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-  75% {
-    -webkit-transform: translateX(-75%);
-    transform: translateX(-75%);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
 @-webkit-keyframes carousel-slidein {
   0% {
     -webkit-transform: translateX(100%);
@@ -588,6 +588,23 @@
   -ms-transform: scale(1.25);
   transform: scale(1.25);
 }
+.slider:disabled::-webkit-slider-thumb,
+.slider.disabled::-webkit-slider-thumb {
+  background: #ccc;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
+.slider:disabled::-moz-range-thumb,
+.slider.disabled::-moz-range-thumb {
+  background: #ccc;
+  transform: scale(1);
+}
+.slider:disabled::-ms-thumb,
+.slider.disabled::-ms-thumb {
+  background: #ccc;
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
 .slider::-webkit-slider-runnable-track {
   background: #efefef;
   border-radius: .2rem;

diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css
diff --git a/dist/spectre.css b/dist/spectre.css
@@ -412,12 +412,6 @@ a.active {
   box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
   outline: 0;
 }
-[disabled],
-.disabled {
-  cursor: default;
-  opacity: .5;
-  pointer-events: none;
-}
 .btn .icon,
 .toast .icon,
 .menu .icon {
@@ -644,6 +638,13 @@ abbr[title] {
   border-color: #3b49af;
   color: #fff;
 }
+.btn[disabled],
+.btn:disabled,
+.btn.disabled {
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
+}
 .btn.btn-primary {
   background: #5764c6;
   border-color: #4452c0;
@@ -790,9 +791,6 @@ abbr[title] {
 .form-input:focus {
   border-color: #5764c6;
 }
-.form-input[disabled] {
-  background: #f8f8f8;
-}
 .form-input.input-sm {
   font-size: 1.2rem;
   height: 2.4rem;
@@ -1093,6 +1091,26 @@ textarea.form-input {
   display: -ms-inline-flexbox;
   display: -webkit-inline-flex;
 }
+.form-input:disabled,
+.form-select:disabled,
+.form-input.disabled,
+.form-select.disabled {
+  background-color: #f0f0f0;
+  cursor: default;
+  opacity: .5;
+}
+input:disabled + .form-icon,
+input.disabled + .form-icon {
+  background: #f0f0f0;
+  border-color: #ccc;
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
+}
+.form-switch input:disabled + .form-icon::after,
+.form-switch input.disabled + .form-icon::after {
+  background: #fff;
+}
 .form-horizontal {
   padding: 1rem;
 }
@@ -1709,10 +1727,16 @@ code {
   font-size: 1;
   padding: .1em 0;
 }
+.form-autocomplete .menu {
+  left: 0;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+}
 .avatar {
   background: #5764c6;
   border-radius: 50%;
-  color: #fff;
+  color: rgba(255, 255, 255, .75);
   display: inline-block;
   font-size: 1.4rem;
   font-weight: 300;
@@ -1928,8 +1952,8 @@ code {
   position: relative;
 }
 .dropdown .menu {
-  -webkit-animation: slide-down .2s;
-  animation: slide-down .2s;
+  -webkit-animation: slide-down .2s 1;
+  animation: slide-down .2s 1;
   display: none;
   left: 0;
   position: absolute;
@@ -2189,6 +2213,12 @@ code {
 .pagination .page-item a:hover {
   color: #5764c6;
 }
+.pagination .page-item a[disabled],
+.pagination .page-item a.disabled {
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
+}
 .pagination .page-item.active a {
   background: #5764c6;
   color: #fff;

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