Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

LESS part 6: Slider styles

The slider styles have been LESS'd and simplified.

- The next and prev arrows are no longer images. They are &raquo and
&laquo
- The slider feels much faster
- Remove the responsive styles for now. Will be looked at later
  • Loading branch information...
commit 7fff11796c8fd85801473d94bad978f04a420deb 1 parent f422e5d
@jayj authored
Showing with 201 additions and 254 deletions.
  1. +116 −137 less/slider.less
  2. +72 −104 style.dev.css
  3. +13 −13 style.dev.less
View
253 less/slider.less
@@ -3,93 +3,78 @@
// --------------------------------------------------
#slider {
- background: #ffffe9;
- border-bottom: 1px solid #edece6;
- width: 920px;
- padding-left: 60px;
- margin: -14px 0 0 -20px;
+ background: darken(#ffffe9, 2%);
+ border-bottom: 4px double #eedbbb;
+ margin: -(@gutterWidth + 20px - 6px) -(@gutterWidth) @gutterWidth -(@gutterWidth);
+ padding: @gutterWidth @gutterWidth @smallGutterWidth;
position: relative;
- zoom: 1;
}
.slides-container {
- width: 880px;
- padding: 60px 0 0;
- zoom: 1;
+ .clearfix;
}
-#slider .slide {
- /* Hide the slides before the JS is loaded. Avoids image jumping */
- display: none;
- -webkit-backface-visibility: hidden;
-}
-
-/* Clearfix for the .slides-container element */
-.slides-container:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
-html[xmlns] .slides-container { display: block; }
-* html .slides-container { height: 1%; }
-
.flex-viewport {
max-height: 2000px;
- -webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -o-transition: all 1s ease;
- transition: all 1s ease;
+ .transition(all 1s ease);
}
-.loading .flex-viewport { max-height: 300px; }
-
-/* Slider content */
-#slider .entry-summary {
- font-size: 14px;
- line-height: 25px;
- float: left;
- width: 330px;
+.loading .flex-viewport {
+ max-height: 300px;
}
-#slider .entry-summary.no-featured-image {
- width: 100%;
-}
+/* Slider content */
+.slide {
+ .thumbnail,
+ .slider-video {
+ float: left;
+ max-width: 100%;
+ margin: 0 @gutterWidth 2px 2px;
+ }
-#slider .thumbnail,
-.slider-video {
- float: left;
- margin: 0 40px 0 0;
+ .entry-title {
+ margin-top: 0;
+ }
}
-/* Control navigation */
+// /* Control navigation */
.flex-control-nav {
list-style: none;
- margin: 20px auto 20px -60px;
+ margin: 20px auto 0 -60px;
text-align: center;
-}
-
-.flex-control-nav li {
- display: inline-block;
- margin: 0 0 0 8px;
- zoom: 1;
- *display: inline;
-}
-.flex-control-nav li:first-child { margin: 0; }
+ li {
+ display: inline-block;
+ margin: 0 0 0 7px;
-/* Slider pagination */
-.flex-control-paging li a {
- background: #ffc768;
- border-radius: 50%;
- cursor: pointer;
- display: block;
- width: 13px; height: 13px;
- text-indent: -9999px;
+ &:first-child {
+ margin-left: 0;
+ }
+ }
}
-.flex-control-paging li a:hover {
- background: #eb724a;
-}
+/* Slider pagination */
+.flex-control-paging li {
+ a {
+ background: @orangeLight;
+ text-indent: -9999px;
+ border-radius: 50%;
+ cursor: pointer;
+ display: block;
+ .square(16px);
+ .transition(all 150ms ease);
+
+ &:hover {
+ background: @orange;
+ }
+ }
-.flex-control-paging li .flex-active {
- background: #d54e21;
- cursor: default;
+ .flex-active,
+ .flex-active:hover {
+ background: @orangeDark;
+ cursor: default;
+ .scale(1.07);
+ }
}
.flex-pauseplay a {
@@ -100,98 +85,92 @@ html[xmlns] .slides-container { display: block; }
.flex-direction-nav {
list-style: none;
margin: 0; padding: 0;
-}
-
-.flex-direction-nav a {
- background-color: #fff;
- border-radius: 50%;
- width: 42px; height: 42px;
- margin: 0;
- position: absolute;
- top: 200px;
- opacity: 0.8;
- text-indent: -9999px;
- box-shadow: 0 0 7px rgba(0,0,0, 0.3);
-}
-
-.flex-direction-nav a:focus {
- outline: 0;
-}
-
-.flex-direction-nav a:after {
- background: url(images/colorbox.png) no-repeat;
- content: "";
- width: 8px; height: 12px;
- position: absolute;
- z-index: 10;
- top: 15px; left: 15px;
-}
-
-.flex-direction-nav .flex-prev {
- left: -21px;
-}
-
-.flex-direction-nav .flex-next {
- right: -21px;
-}
-.flex-direction-nav .flex-prev:after {
- background-position: -9px -8px;
-}
+ a {
+ background-color: @white;
+ box-shadow: 0 0 7px fade(@black, 30%);
+ border-radius: 50%;
+ .square(42px);
+ margin: 0;
+ opacity: 0.6;
+ position: absolute;
+ top: 200px;
+ text-indent: -9999px;
+ .transition(opacity 150ms ease);
+
+ &:focus {
+ background: @orangeLight;
+ }
+
+ &:after {
+ #font > .alternative(36px, bold);
+ text-indent: 0;
+ color: @gray;
+ position: absolute;
+ top: -14px;
+ left: 11px;
+ z-index: 10;
+ }
+
+ #slider:hover & {
+ opacity: 1;
+ }
+ }
-.flex-direction-nav .flex-next:after {
- background-position: -76px -8px;
- left: 17px;
-}
+ .flex-prev {
+ left: -21px;
-#slider:hover .flex-direction-nav a {
- opacity: 1;
-}
+ &:after {
+ content: "\00AB";
+ }
+ }
-.flex-direction-nav .disabled {
- cursor: default;
- opacity: .3!important;
- filter: alpha(opacity=30);
-}
+ .flex-next {
+ right: -21px;
-.flex-direction-nav .flex-prev:active,
-.flex-direction-nav .flex-next:active {
- box-shadow: inset 0 0 5px rgba(0,0,0, 0.3), 0 0 7px rgba(0,0,0, 0.3);
-}
+ &:after {
+ content: "\00BB";
+ left: 13px;
+ }
+ }
- /* No box-shadow */
- .no-boxshadow .flex-direction-nav .flex-prev,
- .no-boxshadow .flex-direction-nav .flex-next {
- border: 1px solid #ccc;
+ .flex-direction-nav .disabled {
+ cursor: default;
+ opacity: 0.3 !important;
+ filter: alpha(opacity=30);
}
- .no-boxshadow .flex-direction-nav .flex-prev:hover,
- .no-boxshadow .flex-direction-nav .flex-next:hover {
- border: 1px solid #bbb;
+ .flex-prev:active,
+ .flex-next:active {
+ box-shadow: inset 0 0 5px rgba(0,0,0, 0.3), 0 0 7px rgba(0,0,0, 0.3);
}
+}
-@media screen and (max-width: 1024px) {
+/* Move the navigation arrows when the screen is smaller */
+@media screen and (max-width: 1130px) {
.flex-direction-nav .flex-prev { opacity: 1; left: 10px; }
.flex-direction-nav .flex-next { opacity: 1; right: 10px; }
}
-/* Thumbnail nav */
-.flex-control-thumbs img {
- cursor: pointer;
- display: block;
- opacity: .7;
-}
+/* Fallback to a border for browsers without box-shadow support */
+.no-boxshadow .flex-direction-nav .flex-prev,
+.no-boxshadow .flex-direction-nav .flex-next {
+ border: 2px solid @orangeLight;
-.flex-control-thumbs img:hover {
- opacity: 1;
+ &:hover {
+ border-color: @orangeDark;
+ }
}
-.flex-control-thumbs .active {
- cursor: default;
- opacity: 1;
+/* No-javaScript fallback */
+.no-js .slides-container > .slide {
+ display: none;
+
+ &:first-child {
+ display: block;
+ }
}
-/* No-javaScript fallback */
.no-js .slides-container > .slide:first-child {
display: block;
}
View
176 style.dev.css
@@ -96,7 +96,6 @@ body.custom-background-empty #footer {
#wrapper {
width: 100%;
max-width: 1080px;
- min-width: 755px;
margin: 0 auto;
}
/* =============================================================================
@@ -1223,39 +1222,19 @@ table caption {
Layout: Slider
========================================================================== */
#slider {
- background: #ffffe9;
- border-bottom: 1px solid #edece6;
- width: 920px;
- padding-left: 60px;
- margin: -14px 0 0 -20px;
+ background: #ffffdf;
+ border-bottom: 4px double #eedbbb;
+ margin: -54px -40px 40px -40px;
+ padding: 40px 40px 25px;
position: relative;
- zoom: 1;
-}
-.slides-container {
- width: 880px;
- padding: 60px 0 0;
- zoom: 1;
}
-#slider .slide {
- /* Hide the slides before the JS is loaded. Avoids image jumping */
-
- display: none;
- -webkit-backface-visibility: hidden;
+.slides-container:before,
+.slides-container:after {
+ content: "";
+ display: table;
}
-/* Clearfix for the .slides-container element */
.slides-container:after {
- content: ".";
- display: block;
clear: both;
- visibility: hidden;
- line-height: 0;
- height: 0;
-}
-html[xmlns] .slides-container {
- display: block;
-}
-* html .slides-container {
- height: 1%;
}
.flex-viewport {
max-height: 2000px;
@@ -1268,51 +1247,52 @@ html[xmlns] .slides-container {
max-height: 300px;
}
/* Slider content */
-#slider .entry-summary {
- font-size: 14px;
- line-height: 25px;
+.slide .thumbnail,
+.slide .slider-video {
float: left;
- width: 330px;
-}
-#slider .entry-summary.no-featured-image {
- width: 100%;
+ max-width: 100%;
+ margin: 0 40px 2px 2px;
}
-#slider .thumbnail,
-.slider-video {
- float: left;
- margin: 0 40px 0 0;
+.slide .entry-title {
+ margin-top: 0;
}
-/* Control navigation */
.flex-control-nav {
list-style: none;
- margin: 20px auto 20px -60px;
+ margin: 20px auto 0 -60px;
text-align: center;
}
.flex-control-nav li {
display: inline-block;
- margin: 0 0 0 8px;
- zoom: 1;
- *display: inline;
+ margin: 0 0 0 7px;
}
.flex-control-nav li:first-child {
- margin: 0;
+ margin-left: 0;
}
/* Slider pagination */
.flex-control-paging li a {
background: #ffc768;
+ text-indent: -9999px;
border-radius: 50%;
cursor: pointer;
display: block;
- width: 13px;
- height: 13px;
- text-indent: -9999px;
+ width: 16px;
+ height: 16px;
+ -webkit-transition: all 150ms ease;
+ -moz-transition: all 150ms ease;
+ -o-transition: all 150ms ease;
+ transition: all 150ms ease;
}
.flex-control-paging li a:hover {
- background: #eb724a;
+ background: #f89406;
}
-.flex-control-paging li .flex-active {
+.flex-control-paging li .flex-active,
+.flex-control-paging li .flex-active:hover {
background: #d54e21;
cursor: default;
+ -webkit-transform: scale(1.07);
+ -moz-transform: scale(1.07);
+ -o-transform: scale(1.07);
+ transform: scale(1.07);
}
.flex-pauseplay a {
cursor: pointer;
@@ -1324,65 +1304,63 @@ html[xmlns] .slides-container {
padding: 0;
}
.flex-direction-nav a {
- background-color: #fff;
+ background-color: #ffffff;
+ box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
border-radius: 50%;
width: 42px;
height: 42px;
margin: 0;
+ opacity: 0.6;
position: absolute;
top: 200px;
- opacity: 0.8;
text-indent: -9999px;
- box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
+ -webkit-transition: opacity 150ms ease;
+ -moz-transition: opacity 150ms ease;
+ -o-transition: opacity 150ms ease;
+ transition: opacity 150ms ease;
}
.flex-direction-nav a:focus {
- outline: 0;
+ background: #ffc768;
}
.flex-direction-nav a:after {
- background: url(less/less/images/colorbox.png) no-repeat;
- content: "";
- width: 8px;
- height: 12px;
+ font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif;
+ font-size: 36px;
+ font-weight: bold;
+ line-height: 1.8;
+ text-indent: 0;
+ color: #555555;
position: absolute;
+ top: -14px;
+ left: 11px;
z-index: 10;
- top: 15px;
- left: 15px;
+}
+#slider:hover .flex-direction-nav a {
+ opacity: 1;
}
.flex-direction-nav .flex-prev {
left: -21px;
}
+.flex-direction-nav .flex-prev:after {
+ content: "\00AB";
+}
.flex-direction-nav .flex-next {
right: -21px;
}
-.flex-direction-nav .flex-prev:after {
- background-position: -9px -8px;
-}
.flex-direction-nav .flex-next:after {
- background-position: -76px -8px;
- left: 17px;
+ content: "\00BB";
+ left: 13px;
}
-#slider:hover .flex-direction-nav a {
- opacity: 1;
-}
-.flex-direction-nav .disabled {
+.flex-direction-nav .flex-direction-nav .disabled {
cursor: default;
- opacity: .3!important;
+ opacity: 0.3 !important;
filter: alpha(opacity=30);
}
.flex-direction-nav .flex-prev:active,
.flex-direction-nav .flex-next:active {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), 0 0 7px rgba(0, 0, 0, 0.3);
}
-/* No box-shadow */
-.no-boxshadow .flex-direction-nav .flex-prev,
-.no-boxshadow .flex-direction-nav .flex-next {
- border: 1px solid #ccc;
-}
-.no-boxshadow .flex-direction-nav .flex-prev:hover,
-.no-boxshadow .flex-direction-nav .flex-next:hover {
- border: 1px solid #bbb;
-}
-@media screen and (max-width: 1024px) {
+/* Move the navigation arrows when the screen is smaller */
+@media screen and (max-width: 1130px) {
.flex-direction-nav .flex-prev {
opacity: 1;
left: 10px;
@@ -1392,20 +1370,22 @@ html[xmlns] .slides-container {
right: 10px;
}
}
-/* Thumbnail nav */
-.flex-control-thumbs img {
- cursor: pointer;
- display: block;
- opacity: .7;
-}
-.flex-control-thumbs img:hover {
- opacity: 1;
+/* Fallback to a border for browsers without box-shadow support */
+.no-boxshadow .flex-direction-nav .flex-prev,
+.no-boxshadow .flex-direction-nav .flex-next {
+ border: 2px solid #ffc768;
}
-.flex-control-thumbs .active {
- cursor: default;
- opacity: 1;
+.no-boxshadow .flex-direction-nav .flex-prev:hover,
+.no-boxshadow .flex-direction-nav .flex-next:hover {
+ border-color: #d54e21;
}
/* No-javaScript fallback */
+.no-js .slides-container > .slide {
+ display: none;
+}
+.no-js .slides-container > .slide:first-child {
+ display: block;
+}
.no-js .slides-container > .slide:first-child {
display: block;
}
@@ -2613,15 +2593,6 @@ span.required {
#topbar .wrap {
width: 99%;
}
- #slider {
- width: 100%;
- margin-left: 0;
- margin-bottom: 10px;
- padding: 0;
- }
- #slider .entry-summary {
- max-width: 270px;
- }
#main {
width: 100% !important;
float: none !important;
@@ -2683,9 +2654,6 @@ span.required {
========================================================================== */
@media screen and (max-width: 768px) {
/* Hide slider */
- #slider {
- display: none;
- }
/* Make the Recent Posts one column */
#recent-posts .recent-post {
border-bottom: 1px solid #ccc;
View
26 style.dev.less
@@ -85,7 +85,7 @@ body {
#wrapper {
width: 100%;
max-width: @siteWidth;
- min-width: 755px;
+ // min-width: 755px;
margin: 0 auto;
}
@@ -1285,16 +1285,16 @@ sub {
#wrapper, #topbar .wrap { width: 99%; }
- #slider {
- width: 100%;
- margin-left: 0;
- margin-bottom: 10px;
- padding: 0;
- }
+ // #slider {
+ // width: 100%;
+ // margin-left: 0;
+ // margin-bottom: 10px;
+ // padding: 0;
+ // }
- #slider .entry-summary {
- max-width: 270px;
- }
+ // #slider .entry-summary {
+ // max-width: 270px;
+ // }
#main {
width: 100% !important;
@@ -1368,9 +1368,9 @@ sub {
@media screen and (max-width: 768px) {
/* Hide slider */
- #slider {
- display: none;
- }
+ // #slider {
+ // display: none;
+ // }
/* Make the Recent Posts one column */
#recent-posts .recent-post {
Please sign in to comment.
Something went wrong with that request. Please try again.