Last active
August 29, 2015 14:00
-
-
Save cfxd/11013411 to your computer and use it in GitHub Desktop.
FlexSlider v2.2.0 default styles in LESS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Includes Bootstrap mixins! | |
| *********************************/ | |
| /* Browser Resets | |
| *********************************/ | |
| .flex-container a:active, | |
| .flexslider a:active, | |
| .flex-container a:focus, | |
| .flexslider a:focus { outline: none; } | |
| .slides, | |
| .flex-control-nav, | |
| .flex-direction-nav { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| /* Icon Fonts | |
| *********************************/ | |
| /* Font-face Icons */ | |
| @font-face { | |
| font-family: 'flexslider-icon'; | |
| src:url('fonts/flexslider-icon.eot'); | |
| src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), | |
| url('fonts/flexslider-icon.woff') format('woff'), | |
| url('fonts/flexslider-icon.ttf') format('truetype'), | |
| url('fonts/flexslider-icon.svg#flexslider-icon') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| /* FlexSlider Necessary Styles | |
| *********************************/ | |
| .flexslider { | |
| margin: 0; | |
| padding: 0; | |
| .slides { | |
| > li { | |
| /* Hide the slides before the JS is loaded. Avoids image jumping */ | |
| display: none; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| img { | |
| width: 100%; | |
| display: block; | |
| } | |
| &:after { | |
| content: '\0020'; | |
| display: block; | |
| clear: both; | |
| visibility: hidden; | |
| line-height: 0; | |
| height: 0; | |
| } | |
| html[xmlns] & { | |
| /* Clearfix for the .slides element */ | |
| display: block; | |
| } | |
| * html & { | |
| height: 1%; | |
| } | |
| .no-js & > li:first-child { | |
| /* No JavaScript Fallback */ | |
| /* If you are not using another script, such as Modernizr, make sure you | |
| * include js that eliminates this class on page load */ | |
| display: block; | |
| } | |
| } | |
| } | |
| .flex-pauseplay span { | |
| text-transform: capitalize; | |
| } | |
| /* FlexSlider Default Theme | |
| *********************************/ | |
| .flexslider { | |
| margin: 0 0 60px; | |
| background: #fff; | |
| border: 4px solid #fff; | |
| position: relative; | |
| border-radius: 4px; | |
| .box-shadow(0 1px 4px rgba(0,0,0,.2)); | |
| zoom: 1; | |
| .slides { | |
| zoom: 1; | |
| } | |
| &:hover { | |
| .flex-prev { .opacity(0.7); left: 10px; } | |
| .flex-next { .opacity(0.7); right: 10px; } | |
| .flex-next:hover, .flex-prev:hover { .opacity(1); } | |
| } | |
| } | |
| .flex-viewport { | |
| max-height: 2000px; | |
| .transition(all 1s ease); | |
| .loading & { max-height: 300px; } | |
| } | |
| .carousel li { | |
| margin-right: 5px; | |
| } | |
| /* Direction Nav */ | |
| .flex-direction-nav { | |
| *height: 0; | |
| a { | |
| text-decoration: none; | |
| display: block; | |
| width: 40px; | |
| height: 40px; | |
| margin: -20px 0 0; | |
| position: absolute; | |
| top: 50%; | |
| z-index: 10; | |
| overflow: hidden; | |
| .opacity(0); | |
| cursor: pointer; | |
| color: rgba(0,0,0,0.8); | |
| text-shadow: 1px 1px 0 rgba(255,255,255,0.3); | |
| .transition(all .3s ease); | |
| &:before { | |
| font-family: 'flexslider-icon'; | |
| font-size: 40px; | |
| display: inline-block; | |
| content: '\f001'; | |
| } | |
| &.flex-next:before { content: '\f002'; } | |
| } | |
| .flex-prev { left: -50px; } | |
| .flex-next { right: -50px; text-align: right; } | |
| .flex-disabled { | |
| .opacity(0) !important; | |
| cursor: default; | |
| } | |
| } | |
| /* Pause/Play */ | |
| .flex-pauseplay { | |
| a { | |
| display: block; | |
| width: 20px; | |
| height: 20px; | |
| position: absolute; | |
| bottom: 5px; | |
| left: 10px; | |
| .opacity(0.8); | |
| z-index: 10; | |
| overflow: hidden; | |
| cursor: pointer; | |
| color: #000; | |
| &:before { | |
| font-family: 'flexslider-icon'; | |
| font-size: 20px; | |
| display: inline-block; | |
| content: '\f004'; | |
| } | |
| &:hover { .opacity(1); } | |
| &.flex-play:before { content: '\f003'; } | |
| } | |
| } | |
| /* Control Nav */ | |
| .flex-control-nav { | |
| width: 100%; | |
| position: absolute; | |
| bottom: -40px; | |
| text-align: center; | |
| li { | |
| margin: 0 6px; | |
| display: inline-block; | |
| zoom: 1; | |
| *display: inline; | |
| } | |
| } | |
| .flex-control-paging li a { | |
| width: 11px; | |
| height: 11px; | |
| display: block; | |
| background: #666; | |
| background: rgba(0,0,0,0.5); | |
| cursor: pointer; | |
| text-indent: -9999px; | |
| border-radius: 20px; | |
| .box-shadow(inset 0 0 3px rgba(0,0,0,0.3)); | |
| &:hover { background: #333; background: rgba(0,0,0,0.7); } | |
| &.flex-active { | |
| background: #000; | |
| background: rgba(0,0,0,0.9); | |
| cursor: default; | |
| } | |
| } | |
| .flex-control-thumbs { | |
| margin: 5px 0 0; | |
| position: static; | |
| overflow: hidden; | |
| li { | |
| width: 25%; | |
| float: left; | |
| margin: 0; | |
| } | |
| img { | |
| width: 100%; | |
| display: block; | |
| .opacity(0.7); | |
| cursor: pointer; | |
| &:hover { .opacity(1); } | |
| } | |
| .flex-active { .opacity(1); cursor: default; } | |
| } | |
| @media screen and (max-width: 860px) { | |
| .flex-direction-nav .flex-prev { .opacity(1); left: 10px; } | |
| .flex-direction-nav .flex-next { .opacity(1); right: 10px; } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Browser Resets | |
| *********************************/ | |
| .flex-container a:active, | |
| .flexslider a:active, | |
| .flex-container a:focus, | |
| .flexslider a:focus { outline: none; } | |
| .slides, | |
| .flex-control-nav, | |
| .flex-direction-nav { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| /* Icon Fonts | |
| *********************************/ | |
| /* Font-face Icons */ | |
| @font-face { | |
| font-family: 'flexslider-icon'; | |
| src:url('fonts/flexslider-icon.eot'); | |
| src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), | |
| url('fonts/flexslider-icon.woff') format('woff'), | |
| url('fonts/flexslider-icon.ttf') format('truetype'), | |
| url('fonts/flexslider-icon.svg#flexslider-icon') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| /* FlexSlider Necessary Styles | |
| *********************************/ | |
| .flexslider { | |
| margin: 0; | |
| padding: 0; | |
| .slides { | |
| > li { | |
| /* Hide the slides before the JS is loaded. Avoids image jumping */ | |
| display: none; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| img { | |
| width: 100%; | |
| display: block; | |
| } | |
| &:after { | |
| content: '\0020'; | |
| display: block; | |
| clear: both; | |
| visibility: hidden; | |
| line-height: 0; | |
| height: 0; | |
| } | |
| html[xmlns] & { | |
| /* Clearfix for the .slides element */ | |
| display: block; | |
| } | |
| * html & { | |
| height: 1%; | |
| } | |
| .no-js & > li:first-child { | |
| /* No JavaScript Fallback */ | |
| /* If you are not using another script, such as Modernizr, make sure you | |
| * include js that eliminates this class on page load */ | |
| display: block; | |
| } | |
| } | |
| } | |
| .flex-pauseplay span { | |
| text-transform: capitalize; | |
| } | |
| /* FlexSlider Default Theme | |
| *********************************/ | |
| .flexslider { | |
| margin: 0 0 60px; | |
| background: #fff; | |
| border: 4px solid #fff; | |
| position: relative; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); | |
| -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); | |
| -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); | |
| box-shadow: 0 1px 4px rgba(0,0,0,.2); | |
| zoom: 1; | |
| .slides { | |
| zoom: 1; | |
| } | |
| &:hover { | |
| .flex-prev { opacity: 0.7; left: 10px; } | |
| .flex-next { opacity: 0.7; right: 10px; } | |
| .flex-next:hover, .flex-prev:hover { opacity: 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; | |
| .loading & { max-height: 300px; } | |
| } | |
| .carousel li { | |
| margin-right: 5px; | |
| } | |
| /* Direction Nav */ | |
| .flex-direction-nav { | |
| *height: 0; | |
| a { | |
| text-decoration: none; | |
| display: block; | |
| width: 40px; | |
| height: 40px; | |
| margin: -20px 0 0; | |
| position: absolute; | |
| top: 50%; | |
| z-index: 10; | |
| overflow: hidden; | |
| opacity: 0; | |
| cursor: pointer; | |
| color: rgba(0,0,0,0.8); | |
| text-shadow: 1px 1px 0 rgba(255,255,255,0.3); | |
| -webkit-transition: all .3s ease; | |
| -moz-transition: all .3s ease; | |
| transition: all .3s ease; | |
| &:before { | |
| font-family: 'flexslider-icon'; | |
| font-size: 40px; | |
| display: inline-block; | |
| content: '\f001'; | |
| } | |
| &.flex-next:before { content: '\f002'; } | |
| } | |
| .flex-prev { left: -50px; } | |
| .flex-next { right: -50px; text-align: right; } | |
| .flex-disabled { | |
| opacity: 0 !important; | |
| filter:alpha(opacity=0); | |
| cursor: default; | |
| } | |
| } | |
| /* Pause/Play */ | |
| .flex-pauseplay { | |
| a { | |
| display: block; | |
| width: 20px; | |
| height: 20px; | |
| position: absolute; | |
| bottom: 5px; | |
| left: 10px; | |
| opacity: 0.8; | |
| z-index: 10; | |
| overflow: hidden; | |
| cursor: pointer; | |
| color: #000; | |
| &:before { | |
| font-family: 'flexslider-icon'; | |
| font-size: 20px; | |
| display: inline-block; | |
| content: '\f004'; | |
| } | |
| &:hover { opacity: 1; } | |
| &.flex-play:before { content: '\f003'; } | |
| } | |
| } | |
| /* Control Nav */ | |
| .flex-control-nav { | |
| width: 100%; | |
| position: absolute; | |
| bottom: -40px; | |
| text-align: center; | |
| li { | |
| margin: 0 6px; | |
| display: inline-block; | |
| zoom: 1; | |
| *display: inline; | |
| } | |
| } | |
| .flex-control-paging li a { | |
| width: 11px; | |
| height: 11px; | |
| display: block; | |
| background: #666; | |
| background: rgba(0,0,0,0.5); | |
| cursor: pointer; | |
| text-indent: -9999px; | |
| -webkit-border-radius: 20px; | |
| -moz-border-radius: 20px; | |
| -o-border-radius: 20px; | |
| border-radius: 20px; | |
| -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); | |
| -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); | |
| -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); | |
| box-shadow: inset 0 0 3px rgba(0,0,0,0.3); | |
| &:hover { background: #333; background: rgba(0,0,0,0.7); } | |
| &.flex-active { | |
| background: #000; | |
| background: rgba(0,0,0,0.9); | |
| cursor: default; | |
| } | |
| } | |
| .flex-control-thumbs { | |
| margin: 5px 0 0; | |
| position: static; | |
| overflow: hidden; | |
| li { | |
| width: 25%; | |
| float: left; | |
| margin: 0; | |
| } | |
| img { | |
| width: 100%; | |
| display: block; | |
| opacity: .7; | |
| cursor: pointer; | |
| &:hover { opacity: 1; } | |
| } | |
| .flex-active { opacity: 1; cursor: default; } | |
| } | |
| @media screen and (max-width: 860px) { | |
| .flex-direction-nav .flex-prev { opacity: 1; left: 10px; } | |
| .flex-direction-nav .flex-next { opacity: 1; right: 10px; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment