+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -392,12 +425,12 @@
-
<input class ="slider" type ="range" min ="0" max ="100" value ="50" / >
diff --git a/docs/index.html b/docs/index.html
index 51e2cb105..0ffec22b7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -225,20 +225,32 @@ Install with Bower
+ March 2017
+
+
+ Carousels : slideshows for cycling images
+
+
+ Calendars : date or date range picker and events display
+
+
February 2017
New Documents experience NEW
- Bars : represent the progress of a task or the value within the known range NEW
+ Bars : represent the progress of a task or the value within the known range
+
+
+ Steps : progress indicators of a sequence of task steps
- Steps : progress indicators of a sequence of task steps NEW
+ Tiles : repeatable or embeddable information blocks
- Tiles : repeatable or embeddable information blocks NEW
+ Experimentals : experimental elements and features NEW
- Experimentals : experimental elements and features, mostly are not yet ready for wide use NEW
+ Meters , Parallax , Progress and Sliders
March 2016
diff --git a/docs/layout.html b/docs/layout.html
index d0d42a7ea..e6c9e92b8 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -4,7 +4,7 @@
Layout - Spectre.css
Utilities - Spectre.css
",
"description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
diff --git a/src/autocomplete.less b/src/autocomplete.less
index ce8b620e6..e3925811f 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -29,4 +29,11 @@
font-size: 1;
padding: .1em 0;
}
+
+ .menu {
+ left: 0;
+ position: absolute;
+ top: 100%;
+ width: 100%;
+ }
}
diff --git a/src/avatars.less b/src/avatars.less
index 8eb9e5ea0..88933b622 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -2,7 +2,7 @@
.avatar {
background: @primary-color;
border-radius: 50%;
- color: @light-color;
+ color: fade(@light-color, 75%);
display: inline-block;
font-size: 1.4rem;
font-weight: 300;
diff --git a/src/base.less b/src/base.less
index 904cb5def..3c80b1c36 100644
--- a/src/base.less
+++ b/src/base.less
@@ -40,14 +40,6 @@ a {
outline: 0;
}
-// Disabled state
-&[disabled],
-.disabled {
- cursor: default;
- opacity: .5;
- pointer-events: none;
-}
-
// Icons
.btn,
.toast,
diff --git a/src/buttons.less b/src/buttons.less
index 6ae9e5f1d..5e6fcb801 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -33,6 +33,13 @@
border-color: darken(@dark-primary-color, 5%);
color: @light-color;
}
+ &[disabled],
+ &:disabled,
+ &.disabled {
+ cursor: default;
+ opacity: .5;
+ pointer-events: none;
+ }
// Button Primary
&.btn-primary {
diff --git a/src/calendars.less b/src/calendars.less
index 0a1fc42e7..9494558a7 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -40,18 +40,18 @@
.calendar-date {
border: 0;
- overflow: hidden;
- padding: .5rem;
+ padding: .6rem;
.date-item {
color: @dark-gray-color;
}
- &.prev-month,
- &.next-month {
- .date-item {
- opacity: .25;
- }
+ &.prev-month .date-item,
+ &.next-month .date-item,
+ .date-item:disabled {
+ cursor: default;
+ opacity: .25;
+ pointer-events: none;
}
}
@@ -142,8 +142,11 @@
.calendar-date {
border-bottom: .1rem solid @border-color;
border-right: .1rem solid @border-color;
- height: 10rem;
- text-align: right;
+ display: flex;
+ flex-direction: column;
+ height: 11rem;
+ overflow: hidden;
+ padding: 0;
&:nth-child(7n) {
border-right: 0;
@@ -154,14 +157,18 @@
}
.date-item {
+ align-self: flex-end;
+ flex: 0 0 2.4rem;
height: 2.4rem;
+ margin-right: .5rem;
+ margin-top: .5rem;
padding: .1rem;
width: 2.4rem;
&.badge {
&::after {
- top: .25rem;
- right: .25rem;
+ top: .2rem;
+ right: .2rem;
}
}
}
@@ -194,16 +201,25 @@
}
}
+ .calendar-events {
+ flex-grow: 1;
+ line-height: 1;
+ overflow-y: auto;
+ padding: .5rem;
+ }
+
.calendar-event {
background: @secondary-color;
+ border-radius: @border-radius;
color: @primary-color;
- display: block;
font-size: 1.2rem;
- .label-base();
+ display: block;
margin: .2rem auto;
overflow: hidden;
+ padding: .3rem .4rem;
text-align: left;
text-overflow: ellipsis;
+ vertical-align: baseline;
white-space: nowrap;
}
}
diff --git a/src/carousels.less b/src/carousels.less
index e82684027..99b0a9c04 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -11,7 +11,6 @@
height: 100%;
left: 0;
position: relative;
- //animation: carousel-autoplay 15s infinite;
.carousel-item {
animation: carousel-slideout 1s 1;
@@ -22,12 +21,36 @@
position: absolute;
top: 0;
width: 100%;
+
+ &:hover {
+ .item-prev,
+ .item-next {
+ opacity: 1;
+ }
+ }
+ }
+
+ .item-prev,
+ .item-next {
+ background: fade(@light-gray-color, 25%);
+ border-color: fade(@light-gray-color, 50%);
+ color: @light-gray-color;
+ opacity: 0;
+ position: absolute;
+ top: 50%;
+ transition: all .4s ease;
+ transform: translateY(-50%);
+ z-index: 99;
+ }
+ .item-prev {
+ left: 2rem;
+ }
+ .item-next {
+ right: 2rem;
}
}
.carousel-locator {
- display: none;
-
&:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
&:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
&:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
@@ -74,6 +97,12 @@
}
}
}
+
+ &.carousel-autoplay {
+ .carousel-item {
+ //animation: carousel-autoplay .15s infinite;
+ }
+ }
}
@supports (object-fit: cover) {
@@ -86,23 +115,6 @@
}
}
-@keyframes carousel-autoplay {
- 0% {
- transform: translateX(0);
- }
- 25% {
- transform: translateX(-25%);
- }
- 50% {
- transform: translateX(-50%);
- }
- 75% {
- transform: translateX(-75%);
- }
- 100% {
- transform: translateX(0);
- }
-}
@keyframes carousel-slidein {
0% {
transform: translateX(100%);
@@ -111,6 +123,7 @@
transform: translateX(0);
}
}
+
@keyframes carousel-slideout {
0% {
opacity: 1;
diff --git a/src/dropdowns.less b/src/dropdowns.less
index 96ab055ad..229bda2e7 100644
--- a/src/dropdowns.less
+++ b/src/dropdowns.less
@@ -4,7 +4,7 @@
position: relative;
.menu {
- animation: slide-down .2s;
+ animation: slide-down .2s 1;
display: none;
left: 0;
position: absolute;
diff --git a/src/forms.less b/src/forms.less
index f9dc32844..226570a37 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -24,9 +24,6 @@
&:focus {
border-color: @primary-color;
}
- &[disabled] {
- background: @bg-color;
- }
// Input sizes
&.input-sm {
@@ -93,6 +90,7 @@
outline: 0;
padding: .5rem .8rem;
vertical-align: middle;
+
&[multiple] {
option {
padding: .2rem .4rem;
@@ -361,6 +359,41 @@
}
}
+// Form disabled
+.form-input,
+.form-select {
+ &:disabled,
+ &.disabled {
+ background-color: @dark-bg-color;
+ cursor: default;
+ opacity: .5;
+ }
+}
+
+input {
+ &:disabled,
+ &.disabled {
+ & + .form-icon {
+ background: @dark-bg-color;
+ border-color: @light-gray-color;
+ cursor: default;
+ opacity: .5;
+ pointer-events: none;
+ }
+ }
+}
+
+.form-switch {
+ input {
+ &:disabled,
+ &.disabled {
+ & + .form-icon::after {
+ background: @light-bg-color;
+ }
+ }
+ }
+}
+
// Form Horizontal
.form-horizontal {
padding: 1rem;
@@ -368,10 +401,12 @@
.form-group {
display: flex;
}
+
.form-label {
padding: .8rem .4rem;
margin-bottom: 0;
}
+
.form-checkbox,
.form-radio,
.form-switch {
diff --git a/src/mixins.less b/src/mixins.less
index d2c5c7ac0..b97ef4261 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -17,7 +17,7 @@
border-color: @color;
}
.label-base() {
- border-radius: .2rem;
+ border-radius: @border-radius;
display: inline-block;
line-height: 1;
padding: .3rem .4rem;
diff --git a/src/pagination.less b/src/pagination.less
index cdd2f12fe..055c528cb 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -20,6 +20,12 @@
&:hover {
color: @primary-color;
}
+ &[disabled],
+ &.disabled {
+ cursor: default;
+ opacity: .5;
+ pointer-events: none;
+ }
}
&.active {
diff --git a/src/sliders.less b/src/sliders.less
index 7093cab9a..19db56b78 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -47,6 +47,22 @@
}
}
+ &:disabled,
+ &.disabled {
+ &::-webkit-slider-thumb {
+ background: @light-gray-color;
+ transform: scale(1);
+ }
+ &::-moz-range-thumb {
+ background: @light-gray-color;
+ transform: scale(1);
+ }
+ &::-ms-thumb {
+ background: @light-gray-color;
+ transform: scale(1);
+ }
+ }
+
// Slider Track
&::-webkit-slider-runnable-track {
background: @border-color;
+ + Steve Rogers ++
+
+
+
+
+ 
