diff --git a/Gruntfile.js b/Gruntfile.js
index 8c0eb3af2c..ff85fd9cd9 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -145,6 +145,10 @@ module.exports = function (grunt) {
dest: 'dist/js/<%= pkg.name %>.js'
},
/* boosted mod */
+ vendorsCss: {
+ src: ['dist/css/boosted.css', 'bower_components/slick-carousel/slick/slick.css'],
+ dest: 'dist/css/boosted.css'
+ },
rtlCss: {
src: ['dist/css/boosted-rtl.css', 'dist/css/o-rtl.css'],
dest: 'dist/css/boosted-rtl.css'
@@ -226,8 +230,9 @@ module.exports = function (grunt) {
},
vendorsjs: {
expand: true,
- cwd: 'bower_components/jquery.tablesorter/dist/js/',
- src: ['*'],
+ flatten: true,
+ cwd: 'bower_components/',
+ src: ['jquery.tablesorter/dist/js/jquery.tablesorter.min.js', 'slick-carousel/slick/slick.min.js'],
dest: 'dist/js/vendors/'
/* end mod */
}
@@ -573,10 +578,10 @@ module.exports = function (grunt) {
grunt.registerTask('test-scss', ['exec:scss-lint'])
- // CSS distribution task.
+ // CSS distribution task.
grunt.registerTask('sass-compile', ['exec:sass', 'exec:sass-docs'])
- grunt.registerTask('dist-css', ['sass-compile', 'exec:postcss', 'rtlcss', 'concat:rtlCss', 'exec:clean-css', 'exec:clean-css-docs'])
+ grunt.registerTask('dist-css', ['sass-compile', 'exec:postcss', 'concat:vendorsCss', 'rtlcss', 'concat:rtlCss', 'exec:clean-css', 'exec:clean-css-docs'])
// Full distribution task.
/* boosted mod */
@@ -589,8 +594,8 @@ module.exports = function (grunt) {
grunt.registerTask('docs-css', ['exec:sass-docs','exec:clean-css-docs', 'exec:postcss-docs'])
grunt.registerTask('lint-docs-css', ['exec:scss-lint-docs'])
/* boosted mod */
- grunt.registerTask('docs-js', ['concat:docsJs', 'exec:uglify-docs'])
- grunt.registerTask('docs', ['copy:tmpdocs','lint-docs-css','docs-css', 'docs-js', 'clean:docs', 'copy:rtl', 'replace:rtl','copy:docs', 'jekyll:docs', 'replace'])
+ grunt.registerTask('docs-js', ['concat:docsJs', 'exec:uglify-docs'])
+ grunt.registerTask('docs', ['copy:tmpdocs', 'lint-docs-css', 'docs-css', 'docs-js', 'clean:docs', 'copy:rtl', 'replace:rtl','copy:docs', 'jekyll:docs', 'replace'])
/* end mod */
grunt.registerTask('docs-github', ['jekyll:github'])
diff --git a/bower.json b/bower.json
index 02df9c0e7a..359212750d 100644
--- a/bower.json
+++ b/bower.json
@@ -34,7 +34,8 @@
"tether": "^1.3.7"
},
"devDependencies": {
- "jquery.tablesorter": "~2.25.0"
+ "jquery.tablesorter": "~2.25.0",
+ "slick-carousel": "^1.6.0"
},
"author": {
"name": "Orange SA"
diff --git a/docs-orange/_includes/footer.html b/docs-orange/_includes/footer.html
index b441a252ca..67a86c1058 100644
--- a/docs-orange/_includes/footer.html
+++ b/docs-orange/_includes/footer.html
@@ -11,9 +11,9 @@ footer - site map & informations
diff --git a/docs-orange/examples/orange-brand-2015/sample.css b/docs-orange/examples/orange-brand-2015/sample.css
index 364be66420..0b44fec849 100644
--- a/docs-orange/examples/orange-brand-2015/sample.css
+++ b/docs-orange/examples/orange-brand-2015/sample.css
@@ -48,7 +48,6 @@
.white-header {
background-color: #FFF;
color: #000;
- border-top: 1px solid #000;
}
.brand-spacing {
@@ -67,6 +66,10 @@
color: #F16E00;
}
+footer {
+ background-color: #000;
+}
+
@media (max-width: 991px) {
.hero-container .caption {
padding: 3%;
diff --git a/scss/_o-carousel.scss b/scss/_o-carousel.scss
index 70c7fbd3ee..8029a91ec6 100644
--- a/scss/_o-carousel.scss
+++ b/scss/_o-carousel.scss
@@ -14,13 +14,13 @@
height: 3.75rem;
text-decoration: none;
text-shadow: none;
- background-color: #fff;
+ background-color: transparent;
opacity: .8;
transition: width .5s ease;
- &:hover,
&:focus {
- width: 7.5rem;
+ outline: 1px dotted #000;
+ outline-offset: -1px;
}
}
@@ -28,9 +28,13 @@
.carousel-control-next-icon {
margin-top: -1.125rem;
font-size: 1.875rem;
- color: $brand-primary;
+ color: #000;
background-image: none;
background-repeat: no-repeat;
+ text-shadow: 1px 0px 0 #fff,
+ 0px 1px 0 #fff,
+ -1px 0px 0 #fff,
+ 0px -1px 0 #fff;
&::before {
font-family: "icon-orange";
@@ -46,7 +50,8 @@
}
.carousel-indicators {
- bottom: -2.3125rem;
+ bottom: 0;
+ align-items: center;
&:hover {
cursor: default;
@@ -57,8 +62,8 @@
width: .625rem;
height: .625rem;
margin-right: .375rem;
- background-color: $gray-lighter-o;
- border: 0;
+ background-color: #000;
+ border: 1px solid #fff;
border-radius: 50%;
&:hover {
@@ -70,3 +75,216 @@
}
}
}
+
+/* slick carousel plugin */
+
+/* slides */
+
+.slick-slide {
+ position: relative;
+}
+
+.slick-slide .frame {
+ position: absolute;
+ top: 1.25rem;
+ left: 1.25rem;
+ max-width: 20%;
+}
+
+.slick-slide .caption {
+ position: absolute;
+ bottom: 40px;
+ left: 1.25rem;
+ width: 45%;
+ padding: 1rem 1.25rem;
+ opacity: .9;
+ background-color: #fff;
+}
+
+.slick-slide img {
+ max-width: 100%;
+ height: auto;
+}
+
+.slick-slide.slick-current:focus {
+ outline: 1px dotted #000;
+ outline-offset: -1px;
+}
+
+/* Arrows */
+.slick-prev,
+.slick-next {
+ font-size: 0;
+ line-height: 0;
+ z-index: 10;
+ position: absolute;
+ top: 50%;
+ display: block;
+ width: 3.75rem;
+ height: 3.75rem;
+ padding: 0;
+ transform: translate(0, -50%);
+ cursor: pointer;
+ color: transparent;
+ border: none;
+ outline: none;
+ background: transparent;
+}
+
+.slick-prev:focus,
+.slick-next:focus {
+ outline: 1px dotted #000;
+ outline-offset: -1px;
+}
+
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before {
+ opacity: .25;
+}
+
+.slick-prev.slick-disabled:hover,
+.slick-next.slick-disabled:hover {
+ cursor: default;
+}
+
+.slick-prev:before,
+.slick-next:before {
+ font-family: 'icon-orange';
+ font-size: 1.875rem;
+ line-height: 1;
+ opacity: 1;
+ color: #000;
+ text-shadow: 1px 0px 0 #fff,
+ 0px 1px 0 #fff,
+ -1px 0px 0 #fff,
+ 0px -1px 0 #fff;
+}
+
+.inverse .slick-prev:before,
+.inverse .slick-next:before {
+ color: #fff;
+ text-shadow: 1px 0px 0 #000,
+ 0px 1px 0 #000,
+ -1px 0px 0 #000,
+ 0px -1px 0 #000;
+}
+
+.slick-prev {
+ left: 0;
+}
+
+[dir='rtl'] .slick-prev {
+ right: 0;
+ left: auto;
+}
+
+.slick-prev:before {
+ content: '\e93f';
+}
+
+[dir='rtl'] .slick-prev:before {
+ content: '\e93e';
+}
+
+.slick-next {
+ right: 0;
+}
+
+[dir='rtl'] .slick-next {
+ right: auto;
+ left: 0;
+}
+
+.slick-next:before {
+ content: '\e93e';
+}
+
+[dir='rtl'] .slick-next:before {
+ content: '\e93f';
+}
+
+/* Dots */
+.slick-dotted.slick-slider {
+ margin-bottom: 1.875rem;
+}
+
+.slick-dots {
+ position: absolute;
+ bottom: .625rem;
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ text-align: center;
+}
+
+.slick-dots li {
+ position: relative;
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ cursor: pointer;
+}
+
+.slick-dots li button {
+ font-size: 0;
+ line-height: 0;
+ display: block;
+ width: 1.125rem;
+ height: 1.125rem;
+ cursor: pointer;
+ color: transparent;
+ border: 0;
+ outline: none;
+ background: transparent;
+ padding: 0;
+}
+
+.slick-dots li button:focus {
+ outline: 1px dotted #000;
+}
+
+.slick-dots li button:before {
+ position: absolute;
+ top: .1875rem;
+ left: .1875rem;
+ width: .75rem;
+ height: .75rem;
+ border-radius: 50%;
+ content: '';
+ text-align: center;
+ background-color: #000;
+ border: 1px solid #fff;
+}
+
+.inverse .slick-dots li button:before {
+ background-color: #fff;
+ border: 1px solid #000;
+}
+
+.slick-dots li.slick-active button:before {
+ background-color: $brand-primary;
+}
+
+/* Mobile */
+@media (max-width: 768px){
+ .slick-track {
+ height: 15.625rem;
+ }
+
+ .slick-slide img {
+ width: 100%;
+ height: auto;
+ }
+
+ .slick-prev,
+ .slick-next {
+ display: none !important;
+ }
+
+ .slick-slide .frame,
+ .slick-slide .caption{
+ display: none;
+ }
+}