scss 由SassMeister.com生成。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 由SassMeister.com生成。相关的知识，希望对你有一定的参考价值。
@charset "UTF-8";
/*for breackpoints*/
/* CHANGE LINKS FOR BOOTSTRAP FONTS*/
/* ----------------------------------------------------------------
Primary Menu
-----------------------------------------------------------------*/
/*@nav-primary-padding: ( @header-height - 22 ) / 2;
@nav-primary-sticky-padding: ( @sticky-header-height - 22 ) / 2;*/
/* Slider */
.slick-loading .slick-list {
background: #fff url('/images/ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face {
font-family: "slick";
src: url('/fonts/slick.eot');
src: url('/fonts/slick.eot?#iefix') format("embedded-opentype"), url('/fonts/slick.woff') format("woff"), url('/fonts/slick.ttf') format("truetype"), url('/fonts/slick.svg#slick') format("svg");
font-weight: normal;
font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
z-index: 9;
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
background: transparent;
color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
color: white;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: 20px;
}
[dir="rtl"] .slick-prev {
left: auto;
right: 20px;
}
.slick-prev:before {
content: "←";
}
[dir="rtl"] .slick-prev:before {
content: "→";
}
.slick-next {
right: 20px;
}
[dir="rtl"] .slick-next {
left: 20px;
right: auto;
}
.slick-next:before {
content: "→";
}
[dir="rtl"] .slick-next:before {
content: "←";
}
/* Dots */
/*.slick-dotted.slick-slider {
margin-bottom: 30px;
}*/
.slick-dots {
position: absolute;
bottom: 10px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
z-index: 9;
}
.slick-dots li {
position: relative;
display: inline-block;
margin: 0 5px;
padding: 0;
cursor: pointer;
font-size: 1em;
height: 10px;
width: 10px;
height: 1em;
width: 1em;
}
.slick-dots li button {
border: 0;
background: transparent;
display: block;
outline: none;
line-height: 0px;
color: transparent;
cursor: pointer;
transition: all ease 500ms;
height: 100%;
width: 100%;
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
font-family: "slick";
/* font-size: $slick-dot-size;*/
line-height: 1;
text-align: center;
color: white;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: all ease 500ms;
}
.slick-dots li.slick-active button:before {
color: #02A8E1;
opacity: 0.75;
}
/*dots border */
.dots-border .slick-dots li {
width: em(20, 16);
height: em(20, 16);
}
.dots-border .slick-dots li button:hover, .dots-border .slick-dots li button:focus {
outline: none;
}
.dots-border .slick-dots li button:hover:before, .dots-border .slick-dots li button:focus:before {
opacity: 1;
background: #fff;
}
.dots-border .slick-dots li button:before {
content: '';
border-radius: 50%;
border: 2px solid #fff;
opacity: 1;
width: 100%;
height: 100%;
}
.dots-border .slick-dots li.slick-active button:before {
background: #fff;
opacity: 1;
}
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
@charset "UTF-8";
// Default Variables
$path_fonts : "../../assets/fonts/";
$path_img : "../../assets/images/";
// Grid settings
$main-sm-columns: 12;
$sidebar-sm-columns: 4;
// Colors
$brand-primary: #02A8E1;
$brand-primary-hover : #009DE3;
$brand-primary-hover2 : darken($brand-primary-hover, 20%);
$color-footer : #B1B1B1;
$grey : #cccc;
$fa-font-path: "../../../fonts" !important ;
$fa-font-size-base: 14px !default;
/*for breackpoints*/
$xs: 0;
$sm: 576px;
$md: 768px;
$lg: 991px;
$xl: 1200px;
$xxl : 1280px;
$path_img : "../../assets/images/";
$path_fonts : "../../assets/fonts/";
$font-family-sans-serif: 'Scada', sans-serif;
$font-family-base: 'arial', 'Helvetica', sans-serif;
//$font-family-serif
$headings-font-family : $font-family-sans-serif;
/* CHANGE LINKS FOR BOOTSTRAP FONTS*/
$bootstrap-sass-asset-helper: false !default;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/");
/* ----------------------------------------------------------------
Primary Menu
-----------------------------------------------------------------*/
$breakpointMenu : lg;
$breakpointMenuMax : lg_max;
/*@nav-primary-padding: ( @header-height - 22 ) / 2;
@nav-primary-sticky-padding: ( @sticky-header-height - 22 ) / 2;*/
$nav-primary-font: $font-family-sans-serif;
$nav-primary-font-weight: normal;
$nav-primary-font-size: 19;
$nav-primary-font-tt: uppercase;
$nav-primary-font-color: #000;
$nav-primary-padding: 3.5em 3em;
// Primary Menu Sub Menu
$nav-primary-submenu-width: 300px;
$nav-primary-submenu-font: $font-family-sans-serif;
$nav-primary-submenu-font-size: $nav-primary-font-size - 2 ;
$nav-primary-submenu-font-weight: 600;
$color_news_date : #666666;
$color_profil_emploi : #EE7D0B;
$color_profil_salarie :#7171AF;
$color_profil_entreprise : #00A5C2;
$color_profil_jeune : #96BF0C;
// Slick icon entity codes outputs the following
// "\2190" outputs ascii character "←"
// "\2192" outputs ascii character "→"
// "\2022" outputs ascii character "•"
$slick-font-path: $path_fonts !default;
$slick-font-family: "slick" !default;
$slick-loader-path: $path_img !default;
$slick-arrow-color: white !default;
$slick-dot-color: white !default;
$slick-dot-color-active: $brand-primary !default;
$slick-prev-character: "\2190" !default;
$slick-next-character: "\2192" !default;
$slick-dot-character: "\2022" !default;
$slick-dot-size: 10px !default;
$slick-opacity-default: 0.75 !default;
$slick-opacity-on-hover: 1 !default;
$slick-opacity-not-active: 0.25 !default;
$slick-dots-position: 10px !default;
$slick-arrow-position : 20px;
$slick-arrow-position-hover : 10px;
@function slick-image-url($url) {
@if function-exists(image-url) {
@return image-url($url);
}
@else {
@return url($slick-loader-path + $url);
}
}
@function slick-font-url($url) {
@if function-exists(font-url) {
@return font-url($url);
}
@else {
@return url($slick-font-path + $url);
}
}
/* Slider */
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
}
/* Icons */
@if $slick-font-family == "slick" {
@font-face {
font-family: "slick";
src: slick-font-url("slick.eot");
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
z-index: 9;
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
&:hover, &:focus {
outline: none;
background: transparent;
color: transparent;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&.slick-disabled:before {
opacity: $slick-opacity-not-active;
}
&:before {
font-family: $slick-font-family;
font-size: 20px;
line-height: 1;
color: $slick-arrow-color;
opacity: $slick-opacity-default;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.slick-prev {
left: $slick-arrow-position;
[dir="rtl"] & {
left: auto;
right: $slick-arrow-position;
}
&:before {
content: $slick-prev-character;
[dir="rtl"] & {
content: $slick-next-character;
}
}
}
.slick-next {
right: $slick-arrow-position;
[dir="rtl"] & {
left: $slick-arrow-position;
right: auto;
}
&:before {
content: $slick-next-character;
[dir="rtl"] & {
content: $slick-prev-character;
}
}
}
/* Dots */
/*.slick-dotted.slick-slider {
margin-bottom: 30px;
}*/
.slick-dots {
position: absolute;
bottom: $slick-dots-position;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
z-index: 9;
li {
position: relative;
display: inline-block;
margin: 0 5px;
padding: 0;
cursor: pointer;
font-size: 1em;
height: 10px;
width: 10px;
height: 1em;
width: 1em;
button {
border: 0;
background: transparent;
display: block;
outline: none;
line-height: 0px;
color: transparent;
cursor: pointer;
transition: all ease 500ms;
height: 100%;
width: 100%;
&:hover, &:focus {
outline: none;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&:before {
position: absolute;
top: 0;
left: 0;
content: $slick-dot-character;
font-family: $slick-font-family;
/* font-size: $slick-dot-size;*/
line-height: 1;
text-align: center;
color: $slick-dot-color;
opacity: $slick-opacity-not-active;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: all ease 500ms;
}
}
&.slick-active button:before {
color: $slick-dot-color-active;
opacity: $slick-opacity-default;
}
}
}
/*dots border */
.dots-border{
.slick-dots {
li {
$fz: 16;
width: em(20, $fz);
height: em(20, $fz);
button {
&:hover, &:focus {
outline: none;
&:before {
opacity: 1;
background: #fff;
}
}
&:before {
content: '';
border-radius: 50%;
border: 2px solid #fff;
opacity: 1;
width : 100%;
height: 100%;
}
}
&.slick-active button:before {
background: #fff;
opacity: 1;
}
}
}
}
以上是关于scss 由SassMeister.com生成。的主要内容，如果未能解决你的问题，请参考以下文章