Merge pull request #157 from picturepan2/hotfix/a-number-of-fixes

Hotfix/a number of fixes
picturepan2 · Mar 6, 2017 · 1c7685d · 1c7685d
2 parents 7caa884 + 7404b2b
commit 1c7685d
Show file tree

Hide file tree

Showing 27 changed files with 882 additions and 115 deletions.
diff --git a/README.md b/README.md
@@ -74,11 +74,11 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 
 ### 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:
-- Chrome (last three)
-- Microsoft Edge (last three)
-- Firefox (last three)
-- Safari (last three)
-- Opera (last three)
+- Chrome (last 4)
+- Microsoft Edge (last 4)
+- Firefox (last 4)
+- Safari (last 4)
+- Opera (last 4)
 - Internet Explorer 10+
 
 Designed and built with ♥ by [Yan Zhu](https://twitter.com/picturepan2). Feel free to submit a pull request. Help is always appreciated.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "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
@@ -1,4 +1,188 @@
 /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
+.calendar {
+  border: .1rem solid #efefef;
+  border-radius: .2rem;
+  display: block;
+  text-align: center;
+}
+.calendar .calendar-nav {
+  -webkit-align-content: space-between;
+  align-content: space-between;
+  -webkit-align-items: center;
+  align-items: center;
+  background: #f8f8f8;
+  border-top-left-radius: .2rem;
+  border-top-right-radius: .2rem;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -ms-flex-align: center;
+  -ms-flex-line-pack: justify;
+  font-size: 2rem;
+  padding: 1rem;
+}
+.calendar .calendar-header,
+.calendar .calendar-body {
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -ms-flex-pack: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-justify-content: center;
+  justify-content: center;
+  padding: 1rem 0;
+}
+.calendar .calendar-header .calendar-date,
+.calendar .calendar-body .calendar-date {
+  -webkit-flex: 0 0 14.28%;
+  -ms-flex: 0 0 14.28%;
+  flex: 0 0 14.28%;
+}
+.calendar .calendar-header {
+  background: #f8f8f8;
+  border-bottom: .1rem solid #efefef;
+  color: #999;
+  font-size: 1.2rem;
+}
+.calendar .calendar-body {
+  color: #666;
+}
+.calendar .calendar-body .calendar-date {
+  border: 0;
+  overflow: hidden;
+  padding: .5rem;
+}
+.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 {
+  opacity: .25;
+}
+.calendar .calendar-body .date-item {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: .1rem solid transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  display: inline-block;
+  height: 3.2rem;
+  line-height: 2rem;
+  padding: .5rem;
+  text-align: center;
+  text-decoration: none;
+  transition: all .2s ease;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 3.2rem;
+}
+.calendar .calendar-body .date-item.date-today {
+  background: #eff1fa;
+  color: #5764c6;
+}
+.calendar .calendar-body .date-item:focus,
+.calendar .calendar-body .date-item:hover {
+  background: #f7f8fc;
+  border-color: #dcdff3;
+  color: #5764c6;
+  text-decoration: none;
+}
+.calendar .calendar-body .date-item:active,
+.calendar .calendar-body .date-item.active {
+  background: #4452c0;
+  border-color: #3b49af;
+  color: #fff;
+}
+.calendar .calendar-body .date-item.badge::after {
+  position: absolute;
+  right: .4rem;
+  top: .4rem;
+  -webkit-transform: translate(50%, -50%);
+  -ms-transform: translate(50%, -50%);
+  transform: translate(50%, -50%);
+}
+.calendar .calendar-range {
+  position: relative;
+}
+.calendar .calendar-range .date-item::before {
+  background: #eff1fa;
+  content: "";
+  height: 3.2rem;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 50%;
+  z-index: -9;
+}
+.calendar .calendar-range + .calendar-range .date-item::before {
+  left: 0;
+  width: 100%;
+}
+.calendar .calendar-range + .calendar-range .date-item.active::before {
+  width: 50%;
+}
+.calendar.calendar-lg .calendar-body {
+  padding: 0;
+}
+.calendar.calendar-lg .calendar-body .calendar-date {
+  border-bottom: .1rem solid #efefef;
+  border-right: .1rem solid #efefef;
+  height: 10rem;
+  text-align: right;
+}
+.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) {
+  border-right: 0;
+}
+.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7) {
+  border-bottom: 0;
+}
+.calendar.calendar-lg .calendar-body .date-item {
+  height: 2.4rem;
+  padding: .1rem;
+  width: 2.4rem;
+}
+.calendar.calendar-lg .calendar-body .date-item.badge::after {
+  right: .25rem;
+  top: .25rem;
+}
+.calendar.calendar-lg .calendar-body .calendar-range .date-item::before {
+  height: 2.4rem;
+  left: auto;
+  right: 0;
+  top: 1.7rem;
+  width: 2.2rem;
+}
+.calendar.calendar-lg .calendar-body .calendar-range + .calendar-range .date-item::before {
+  left: 0;
+  width: 100%;
+}
+.calendar.calendar-lg .calendar-body .calendar-range + .calendar-range .date-item.active::before {
+  right: 1.7rem;
+  width: auto;
+}
+.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;
+  text-align: left;
+  text-overflow: ellipsis;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
 .carousel {
   background: #f8f8f8;
   display: block;

diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css
diff --git a/dist/spectre.css b/dist/spectre.css
@@ -651,18 +651,18 @@ abbr[title] {
 }
 .btn.btn-primary:focus {
   background: #4452c0;
-  border-color: #3b49af;
+  border-color: #3f4eba;
   color: #fff;
 }
 .btn.btn-primary:hover {
   background: #3f4eba;
-  border-color: #3b49af;
+  border-color: #3946a7;
   color: #fff;
 }
 .btn.btn-primary:active,
 .btn.btn-primary.active {
   background: #3d4ab3;
-  border-color: #3946a7;
+  border-color: #36429f;
   color: #fff;
 }
 .btn.btn-primary.loading::after {
@@ -812,22 +812,6 @@ textarea.form-input {
   height: auto;
   line-height: 2rem;
 }
-.has-success .form-input,
-.form-input.is-success {
-  border-color: #32b643;
-}
-.has-success .form-input:focus,
-.form-input.is-success:focus {
-  box-shadow: 0 0 0 .2rem rgba(50, 182, 67, .15);
-}
-.has-danger .form-input,
-.form-input.is-danger {
-  border-color: #e85600;
-}
-.has-danger .form-input:focus,
-.form-input.is-danger:focus {
-  box-shadow: 0 0 0 .2rem rgba(232, 86, 0, .15);
-}
 .form-input[type=file] {
   height: auto;
 }
@@ -885,14 +869,30 @@ textarea.form-input {
   height: 4rem;
   padding: .9rem 2.4rem .9rem .8rem;
 }
+.has-success .form-input,
 .has-success .form-select,
+.form-input.is-success,
 .form-select.is-success {
   border-color: #32b643;
 }
+.has-success .form-input:focus,
+.has-success .form-select:focus,
+.form-input.is-success:focus,
+.form-select.is-success:focus {
+  box-shadow: 0 0 0 .2rem rgba(50, 182, 67, .15);
+}
+.has-danger .form-input,
 .has-danger .form-select,
+.form-input.is-danger,
 .form-select.is-danger {
   border-color: #e85600;
 }
+.has-danger .form-input:focus,
+.has-danger .form-select:focus,
+.form-input.is-danger:focus,
+.form-select.is-danger:focus {
+  box-shadow: 0 0 0 .2rem rgba(232, 86, 0, .15);
+}
 .form-checkbox input,
 .form-radio input,
 .form-switch input {
@@ -1225,6 +1225,9 @@ code {
 .container.grid-960 {
   max-width: 98rem;
 }
+.container.grid-480 {
+  max-width: 50rem;
+}
 .columns {
   display: flex;
   display: -ms-flexbox;
@@ -1981,7 +1984,7 @@ code {
 .menu .menu-item > a:active,
 .menu .menu-item > a.active {
   background: #f7f8fc;
-  color: #3b49af;
+  color: #5764c6;
 }
 .menu .menu-header {
   color: #ccc;

diff --git a/dist/spectre.min.css b/dist/spectre.min.css
diff --git a/docs/components.html b/docs/components.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="robots" content="index, follow" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Components - Spectre.css</title>
@@ -688,7 +688,7 @@
           </div>
           <section class="notes">
             <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
-            <p>Add a container element with the class <code>dropdown</code>. And add a focusable element with the classname <code>dropdown-toggle</code> for the button and a <code>menu</code> component right next to it. If the dropdown is close to the right edge of the browser, you can add the class <code>dropdown-right</code> to the container to prevent it appearing off screen.</p>
+            <p>Add a container element with the class <code>dropdown</code>. And add a focusable element with the classname <code>dropdown-toggle</code> for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable. If the dropdown is close to the right edge of the browser, you can add the class <code>dropdown-right</code> to the container to prevent it appearing off screen.</p>
           </section>
           <section class="notes">
             <p>Also, you can implement your JS to interact with the dropdown menus by adding the class <code>active</code> to the <code>dropdown</code>.</p>

diff --git a/docs/css/docs.css b/docs/css/docs.css
@@ -1,7 +1,7 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 /* Spectre version */
 .version::after {
-  content: "0.2.6";
+  content: "0.2.7";
 }
 /* Spectre docs style */
 .bg-gray {
@@ -99,6 +99,9 @@
   padding: 1rem;
   width: 100%;
 }
+.docs-content {
+  padding-top: 0;
+}
 .docs-content .container {
   padding: 1rem;
 }
@@ -116,9 +119,8 @@
 }
 .docs-content .docs-dot {
   border-radius: 50%;
-  display: block;
+  display: inline-block;
   height: 1rem;
-  margin: auto;
   padding: 0;
   width: 1rem;
 }
@@ -172,7 +174,7 @@
     padding: 0 .5rem;
   }
   .docs-sidebar {
-    padding: 6rem 1rem;
+    padding: 7rem 1rem;
   }
   .docs-sidebar .docs-nav {
     position: relative;
@@ -181,7 +183,7 @@
     .docs-sidebar .docs-nav {
       position: sticky;
       position: -webkit-sticky;
-      top: 9rem;
+      top: 8rem;
     }
     .docs-sidebar .docs-nav .nav-item a:focus {
       box-shadow: none;