Level 8
Please post your gulpfile
Aug 1, 2016
11
Level 3
Multiple SASS Files
I am trying to use gulp for compling multiple SASS file to one app.scss file.
css file look like this in the code:
<link rel="stylesheet" href="{{ elixir('css/app.css') }}">
This is how the final css file is being included in the view:
<link rel="stylesheet" href="/build/css/app-44267ef7f7.css">
Right now, it seems that that the SASS files are not applied to the final css file, and I don't understand why. Would absolutely appreciate you help.
Level 55
In addition to your gulpfile.js please can we see your app.scss file located in the resources/assets/sass/ directory.
I am trying to use gulp for compling multiple SASS file to one app.scss file. css file look like this in the code:
This where you might have some confusion. You use gulp (Laravel Elixir) to compile the SASS/SCSS files into CSS.
You can define multiple source SASS/SCSS files in your app.scss or gulpfile.js (depending on the need) which is then output to one CSS file (in your case it looks like you are versioning it too).
Level 3
Please @SmoDav :
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass(['app.scss','buttons.scss','dropzone.scss']).version('css/app.css');
});
@mstnorris please, here's the app.scss file as you've requeested:
// @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
$primaryColor: #eeffcc;
body {
background: $primaryColor;
overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
height: 100%; /* Cover all (100%) of the container for the body with its content */
padding-top: 70px;
}
$container-width: 100%;
$column-count: 4;
$margin: 1%;
nav.navbar{
transition: top 0.2s ease-in-out;
}
.nav-up {
top: -51px;
}
.container {
width: $container-width;
}
.column {
background: #1abc9c;
height: 200px;
display: block;
float: left;
width: ($container-width / $column-count) - ($margin * 2);
margin: 0 $margin;
}
.test {
width: 500px;
height: 70px;
background: #f5f5f5;
border: 1px solid #ddd;
padding: 5px;
}
.test[placeholder]:empty:before {
content: attr(placeholder);
color: #555;
}
.test[placeholder]:empty:focus:before {
content: "";
}
.contentWrap {
overflow: hidden;
max-height: 70px;
}
.own_posts {
margin-top: 15px;
width: 100%;
background: #008B8B;
text-align: center;
border: 1px solid #000;
}
.own_posts p{
font-weight: 800;
font-size: 20px;
}
.following_posts {
right: 10%;
width: 35%;
height: 30%;
top: 60%;
background: #008B8B;
position: absolute;
text-align: center;
}
.contentWrap {
overflow: hidden;
max-height: 70px;
}
.icons {
border: 1px solid red;
max-width: 700px;
width:100%;
}
.test img, .icons img , .followee_posts img,.own_posts img {
width: 24px;
height: 24px;
}
.test {
max-width: 700px;
width:100%;
overflow: hidden;
height: 70px;
background: #f5f5f5;
border: 1px solid #ddd;
padding: 5px;
max-height: 70px;
&[placeholder]:empty {
&:before {
content: attr(placeholder);
color: #555;
}
&:focus:before {
content: "";
}
}
}
.multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
.input-group {
margin: 5px;
}
> li {
padding: 0;
> a.multiselect-all label {
font-weight: 700;
}
&.multiselect-group label {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
font-weight: 700;
}
&.multiselect-group-clickable label {
cursor: pointer;
}
> a {
padding: 0;
> label {
margin: 0;
height: 100%;
cursor: pointer;
font-weight: 400;
padding: 3px 20px 3px 40px;
&.radio, &.checkbox {
margin: 0;
}
> input[type=checkbox] {
margin-bottom: 5px;
}
}
}
}
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-inline .multiselect-container
{
label {
&.checkbox, &.radio {
padding: 3px 20px 3px 40px;
}
}
li a label {
&.checkbox input[type=checkbox], &.radio input[type=radio] {
margin-left: -20px;
margin-right: 0;
}
}
}
/* Bootstrap multi-select library -scss (sass) code. */
.multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
.input-group {
margin: 5px;
}
> li {
padding: 0;
> a.multiselect-all label {
font-weight: 700;
}
&.multiselect-group label {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
font-weight: 700;
}
&.multiselect-group-clickable label {
cursor: pointer;
}
> a {
padding: 0;
> label {
margin: 0;
height: 100%;
cursor: pointer;
font-weight: 400;
padding: 3px 20px 3px 40px;
&.radio, &.checkbox {
margin: 0;
}
> input[type=checkbox] {
margin-bottom: 5px;
}
}
}
}
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-inline .multiselect-container {
label {
&.checkbox, &.radio {
padding: 3px 20px 3px 40px;
}
}
li a label {
&.checkbox input[type=checkbox], &.radio input[type=radio] {
margin-left: -20px;
margin-right: 0;
}
}
}
/* Jquery external library for range selector */
.slider-container {
width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
.back-bar {
height: 10px;
position: relative;
.selected-bar {
position: absolute;
height: 100%;
}
.pointer {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
cursor: col-resize;
opacity: 1;
z-index: 2;
&.last-active {
z-index: 3;
}
}
.pointer-label {
position: absolute;
top: -17px;
font-size: 8px;
background: white;
white-space: nowrap;
line-height: 1;
}
.focused {
z-index: 10;
}
}
.clickable-dummy {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.scale {
top: 2px;
position: relative;
span {
position: absolute;
height: 5px;
border-left: 1px solid #999;
font-size: 0;
}
ins {
font-size: 9px;
text-decoration: none;
position: absolute;
left: 0;
top: 5px;
color: #999;
line-height: 1;
}
}
&.slider-readonly {
.clickable-dummy, .pointer {
cursor: auto;
}
}
}
.theme-green {
.back-bar {
height: 5px;
border-radius: 2px;
background-color: #eeeeee;
background-color: #e7e7e7;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
.selected-bar {
border-radius: 2px;
background-color: #a1fad0;
background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
background-image: -o-linear-gradient(top, #bdfade, #76fabc);
background-image: linear-gradient(to bottom, #bdfade, #76fabc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);
}
.pointer {
width: 14px;
height: 14px;
top: -5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #AAA;
background-color: #e7e7e7;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.pointer-label {
color: #999;
}
.focused {
color: #333;
}
}
.scale {
span {
border-left: 1px solid #e5e5e5;
}
ins {
color: #999;
}
}
}
.theme-blue {
.back-bar {
height: 5px;
border-radius: 2px;
background-color: #eeeeee;
background-color: #e7e7e7;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
.selected-bar {
border-radius: 2px;
background-color: #92c1f9;
background-image: -moz-linear-gradient(top, #b1d1f9, #64a8f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9));
background-image: -webkit-linear-gradient(top, #b1d1f9, #64a8f9);
background-image: -o-linear-gradient(top, #b1d1f9, #64a8f9);
background-image: linear-gradient(to bottom, #b1d1f9, #64a8f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0);
}
.pointer {
width: 14px;
height: 14px;
top: -5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #AAA;
background-color: #e7e7e7;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.pointer-label {
color: #999;
}
.focused {
color: #333;
}
}
.scale {
span {
border-left: 1px solid #e5e5e5;
}
ins {
color: #999;
}
}
}
/* Jquery UI */
.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin:2px 0 0 0;padding:.5em .5em .5em .7em;min-height:0;font-size:100%}.ui-accordion .ui-accordion-icons{padding-left:2.2em}.ui-accordion .ui-accordion-icons .ui-accordion-icons{padding-left:2.2em}.ui-accordion .ui-accordion-header .ui-accordion-header-icon{position:absolute;left:.5em;top:50%;margin-top:-8px}.ui-accordion .ui-accordion-content{padding:1em 2.2em;border-top:0;overflow:auto}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-button{display:inline-block;position:relative;padding:0;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2.2em}button.ui-button-icon-only{width:2.4em}.ui-button-icons-only{width:3.4em}button.ui-button-icons-only{width:3.7em}.ui-button .ui-button-text{display:block;line-height:normal}.ui-button-text-only .ui-button-text{padding:.4em 1em}.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px}.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}input.ui-button{padding:.4em 1em}.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}.ui-buttonset{margin-right:7px}.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-dialog{overflow:hidden;position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-se{width:12px;height:12px;right:-5px;bottom:-5px;background-position:16px 16px}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:none}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{position:relative;margin:0;padding:3px 1em 3px .4em;cursor:pointer;min-height:0;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-progressbar{height:2em;text-align:left;overflow:hidden}.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%}.ui-progressbar .ui-progressbar-overlay{background:url("data:image/gif;base64,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");height:100%;filter:alpha(opacity=25);opacity:0.25}.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-selectable{-ms-touch-action:none;touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;display:none}.ui-selectmenu-menu .ui-menu{overflow:auto;overflow-x:hidden;padding-bottom:1px}.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup{font-size:1em;font-weight:bold;line-height:1.5;padding:2px 0.4em;margin:0.5em 0 0 0;height:auto;border:0}.ui-selectmenu-open{display:block}.ui-selectmenu-button{display:inline-block;overflow:hidden;position:relative;text-decoration:none;cursor:pointer}.ui-selectmenu-button span.ui-icon{right:0.5em;left:auto;margin-top:-8px;position:absolute;top:50%}.ui-selectmenu-button span.ui-selectmenu-text{text-align:left;padding:0.4em 2.1em 0.4em 1em;display:block;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default;-ms-touch-action:none;touch-action:none}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-spinner{position:relative;display:inline-block;overflow:hidden;padding:0;vertical-align:middle}.ui-spinner-input{border:none;background:none;color:inherit;padding:0;margin:.2em 0;vertical-align:middle;margin-left:.4em;margin-right:22px}.ui-spinner-button{width:16px;height:50%;font-size:.5em;padding:0;margin:0;text-align:center;position:absolute;cursor:default;display:block;overflow:hidden;right:0}.ui-spinner a.ui-spinner-button{border-top:none;border-bottom:none;border-right:none}.ui-spinner .ui-icon{position:absolute;margin-top:-8px;top:50%;left:0}.ui-spinner-up{top:0}.ui-spinner-down{bottom:0}.ui-spinner .ui-icon-triangle-1-s{background-position:-65px -16px}.ui-tabs{position:relative;padding:.2em}.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0}.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;margin:1px .2em 0 0;border-bottom-width:0;padding:0;white-space:nowrap}.ui-tabs .ui-tabs-nav .ui-tabs-anchor{float:left;padding:.5em 1em;text-decoration:none}.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:-1px;padding-bottom:1px}.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor{cursor:text}.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor{cursor:pointer}.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:1em 1.4em;background:none}.ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px;-webkit-box-shadow:0 0 5px #aaa;box-shadow:0 0 5px #aaa}body .ui-tooltip{border-width:2px}.ui-widget{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #ddd;background:#eee url("images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #e78f08;background:#f6a828 url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;color:#fff;font-weight:bold}.ui-widget-header a{color:#fff}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #ccc;background:#f6f6f6 url("images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#1c94c4}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#1c94c4;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #fbcb09;background:#fdf5ce url("images/ui-bg_glass_100_fdf5ce_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#c77405}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#c77405;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #fbd850;background:#fff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#eb8f00}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#eb8f00;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fed22f;background:#ffe45c url("images/ui-bg_highlight-soft_75_ffe45c_1x100.png") 50% top repeat-x;color:#363636}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#b81900 url("images/ui-bg_diagonals-thick_18_b81900_40x40.png") 50% 50% repeat;color:#fff}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#fff}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#fff}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_222222_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/ui-icons_ffffff_256x240.png")}.ui-state-default .ui-icon{background-image:url("images/ui-icons_ef8c08_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("images/ui-icons_ef8c08_256x240.png")}.ui-state-active .ui-icon{background-image:url("images/ui-icons_ef8c08_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("images/ui-icons_228ef1_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_ffd27a_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#666 url("images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;opacity:.5;filter:Alpha(Opacity=50)}.ui-widget-shadow{margin:-5px 0 0 -5px;padding:5px;background:#000 url("images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;opacity:.2;filter:Alpha(Opacity=20);border-radius:5px}
/* Multi-select and slider aligned each under one. */
.container col-centered {
float: none;
margin: 0 auto;
}
/* jquery routine content-filter (filter exercises type) */
@import 'node_modules/bourbon/app/assets/stylesheets/_bourbon.scss'; // http://bourbon.io/
@import "node_modules/node-neat/node_modules/bourbon-neat/app/assets/stylesheets/_neat.scss";
@import 'resources/assets/sass/content-filter/partials/_variables.scss'; // colors, fonts etc...
@import 'resources/assets/sass/content-filter/partials/_mixins.scss'; // custom mixins
@import 'resources/assets/sass/content-filter/partials/_layout.scss'; // responsive grid and media queries
/* --------------------------------
Primary style
-------------------------------- */
*, *::after, *::before {
@include box-sizing(border-box);
}
html {
font-size: 62.5%;
height: 100%;
}
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font: {
size: 1.6rem;
family: $primary-font; // variables inside partials > _variables.scss
}
color: $color-1;
background-color: lighten($color-4, 30%);
}
a {
color: $color-2;
text-decoration: none;
}
/* --------------------------------
Main Components
-------------------------------- */
.cd-header {
position: relative;
height: 150px;
background-color: $color-1;
h1 {
color: $color-3;
line-height: 150px;
text-align: center;
font-size: 2.4rem;
font-weight: 300;
}
@include MQ(L) {
height: 180px;
h1 {
line-height: 180px;
}
}
}
.affix.showSidebar{
top: 50px!important;
}
.showSidebar{
right: 0px; /* show the sidebar from the right */
left: auto!important;
display: inherit!important;
}
main {
position: relative;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
-moz-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
-ms-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
-o-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
transition: all 0.35s cubic-bezier(1, 1, 1, 1);
}
#main.pushWrapper{
-webkit-transform: translate3d(-250px, 0, 0);
-moz-transform: translate3d(-250px, 0, 0);
-ms-transform: translate3d(-250px, 0, 0);
-o-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
}
#sidebar-nav {
position: fixed;
width: 500px;
top: 0;
bottom: 0;
right:0;
background-color: #000;
z-index:99;
overflow-y: scroll;
overflow: auto;
-webkit-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
-moz-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
-ms-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
-o-transition: all 0.35s cubic-bezier(1, 1, 1, 1);
transition: all 0.35s cubic-bezier(1, 1, 1, 1);
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
#sidebar-nav.showSidebar
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#sidebar-nav ul form button[type="submit"]{
display: none;
}
.cd-main-content {
position: relative;
min-height: 100vh;
@include clearfix;
&.is-fixed {
.cd-tab-filter-wrapper {
position: fixed;
top: 0;
right: 0;
width: 100%;
}
.cd-gallery {
padding-top: 26px+$tab-filter-height;
}
.cd-filter {
position: fixed;
height: 100vh;
overflow: hidden;
form {
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
.cd-filter-trigger {
position: fixed;
}
@include MQ(M) {
.cd-gallery {
padding-top: 40px+$tab-filter-height;
}
}
@include MQ(L) {
.cd-gallery {
padding-top: 50px+$tab-filter-height;
}
}
}
}
/* --------------------------------
xtab-filter
-------------------------------- */
.cd-tab-filter-wrapper {
background-color: $color-3;
box-shadow: 0 1px 1px rgba(#000, .08);
z-index: 1;
@include clearfix;
}
.cd-tab-filter {
/* tabbed navigation style on mobile - dropdown */
position: relative;
height: $tab-filter-height;
width: 140px;
margin: 0 auto;
z-index: 1;
&::after {
/* small arrow icon */
content:'';
position: absolute;
right: 14px;
@include center(y); // see partials > mixins
display: inline-block;
width: 16px;
height: 16px;
background: url('../img/cd-icon-arrow.svg') no-repeat center center;
@include transition(all .3s);
pointer-events: none;
}
ul {
position: absolute;
top: 0;
left: 0;
background-color: $color-3;
box-shadow: inset 0 -2px 0 $color-2;
}
li {
display: none;
&:first-child {
/* this way the placehodler is alway visible */
display: block;
}
}
a {
display: block;
/* set same size of the .cd-tab-filter */
height: $tab-filter-height;
width: 140px;
line-height: $tab-filter-height;
padding-left: 14px;
&.selected {
background: $color-2;
color: $color-3;
}
}
&.is-open {
&::after {
/* small arrow rotation */
@include transform(translateY(-50%) rotate(-180deg));
}
ul {
box-shadow: inset 0 -2px 0 $color-2, 0 2px 10px rgba(#000, .2);
}
ul li {
display: block;
}
.placeholder a {
/* reduces the opacity of the placeholder on mobile when the menu is open */
opacity: .4;
}
}
@include MQ(M) {
/* tabbed navigation style on medium devices */
width: auto;
cursor: auto;
&::after {
/* hide the arrow */
display: none;
}
ul {
background: transparent;
position: static;
box-shadow: none;
text-align: center;
}
li {
display: inline-block;
&.placeholder {
display: none !important;
}
}
a {
display: inline-block;
padding: 0 1em;
width: auto;
color: $color-4;
text-transform: uppercase;
font-weight: 700;
font-size: 1.3rem;
.no-touch &:hover {
color: $color-2;
}
&.selected {
background: transparent;
color: $color-2;
/* create border bottom using box-shadow property */
box-shadow: inset 0 -2px 0 $color-2;
}
}
&.is-open {
ul li {
display: inline-block;
}
}
}
@include MQ(L) {
/* tabbed navigation on big devices */
width: 100%;
float: right;
margin: 0;
@include transition(width .3s);
&.filter-is-visible {
/* reduce width when filter is visible */
width: 80%;
}
}
}
/* --------------------------------
xgallery
-------------------------------- */
.cd-gallery {
padding: 26px 5%;
width: 100%;
li {
margin-bottom: 1.6em;
box-shadow: 0 1px 4px rgba(#000, .1);
display: none;
&.gap {
/* used in combination with text-align: justify to align gallery elements */
opacity: 0;
height: 0;
display: inline-block;
}
}
img {
display: block;
width: 100%;
}
.cd-fail-message {
display: none;
text-align: center;
}
@include MQ(M) {
padding: 40px 3%;
ul {
@include clearfix;
text-align: justify;
}
li {
width: 48%;
margin-bottom: 2em;
}
}
@include MQ(L) {
padding: 50px 2%;
float: right;
@include transition(width .3s);
li {
width: 23%;
}
&.filter-is-visible {
/* reduce width when filter is visible */
width: 80%;
}
}
}
/* --------------------------------
xfilter
-------------------------------- */
.cd-filter {
position: absolute;
top: 0;
left: 0;
width: 280px;
height: 100%;
background: $color-3;
box-shadow: 4px 4px 20px rgba(#000, 0);
z-index: 2;
/* Force Hardware Acceleration in WebKit */
@include transform(translateZ(0));
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
@include transform(translateX(-100%));
@include transition(transform .3s, box-shadow .3s);
&::before {
/* top colored bar */
content: '';
position: absolute;
top: 0;
left: 0;
height: $tab-filter-height;
width: 100%;
background-color: $color-2;
z-index: 2;
}
form {
padding: $tab-filter-height+20px 20px;
}
.cd-close {
position: absolute;
top: 0;
right: 0;
height: $tab-filter-height;
line-height: $tab-filter-height;
width: 60px;
color: $color-3;
font-size: 1.3rem;
text-align: center;
background: darken($color-2, 5%);
opacity: 0;
@include transition(opacity .3s);
z-index: 3;
.no-touch &:hover {
background: darken($color-2, 8%);
}
}
&.filter-is-visible {
@include transform(translateX(0));
box-shadow: 4px 4px 20px rgba(#000, .2);
.cd-close {
opacity: 1;
}
}
@include MQ(L) {
width: 20%;
form {
padding: $tab-filter-height+20px 10%;
}
}
}
.cd-filter-trigger {
position: absolute;
top: 0;
left: 0;
height: $tab-filter-height;
line-height: $tab-filter-height;
width: 60px;
/* image replacement */
overflow: hidden;
text-indent: 100%;
color: transparent;
white-space: nowrap;
background: transparent url('../img/cd-icon-filter.svg') no-repeat center center;
z-index: 3;
&.filter-is-visible {
pointer-events: none;
}
@include MQ(L) {
width: auto;
left: 2%;
text-indent: 0;
color: $color-4;
text-transform: uppercase;
font-size: 1.3rem;
font-weight: 700;
padding-left: 24px;
background-position: left center;
@include transition(color .3s);
.no-touch &:hover {
color: $color-2;
}
&.filter-is-visible,
&.filter-is-visible:hover {
color: $color-3;
}
}
}
/* --------------------------------
xcustom form elements
-------------------------------- */
.cd-filter-block {
margin-bottom: 1.6em;
h4 {
/* filter block title */
position: relative;
margin-bottom: .2em;
padding: 10px 0 10px 20px;
color: $color-4;
text-transform: uppercase;
font-weight: 700;
font-size: 1.3rem;
@include user-select(none);
cursor: pointer;
.no-touch &:hover {
color: $color-2;
}
&::before {
/* arrow */
content: '';
position: absolute;
left: 0;
top: 50%;
width: 16px;
height: 16px;
background: url('../img/cd-icon-arrow.svg') no-repeat center center;
@include transform(translateY(-50%));
@include transition(transform .3s);
}
&.closed::before {
@include transform(translateY(-50%) rotate(-90deg));
}
}
input, select,
.radio-label::before,
.checkbox-label::before {
/* shared style for input elements */
font-family: $primary-font;
border-radius: 0;
background-color: $color-3;
border: 2px solid darken($color-3, 10%);
}
input[type='search'],
input[type='text'],
select {
width: 100%;
padding: .8em;
@include appearance(none);
box-shadow: none;
&:focus {
outline: none;
background-color: $color-3;
border-color: $color-2;
}
}
input[type='search'] {
/* custom style for the search element */
border-color: transparent;
background-color: darken($color-3, 10%);
/* prevent jump - ios devices */
font-size: 1.6rem !important;
}
input[type='search']::-webkit-search-cancel-button {
display: none;
}
.cd-select {
/* select element wrapper */
position: relative;
}
.cd-select::after {
/* switcher arrow for select element */
content: '';
position: absolute;
z-index: 1;
right: 14px;
top: 50%;
@include transform(translateY(-50%));
display: block;
width: 16px;
height: 16px;
background: url('../img/cd-icon-arrow.svg') no-repeat center center;
pointer-events: none;
}
select {
cursor: pointer;
font-size: 1.4rem;
}
select::-ms-expand {
display: none;
}
.list li {
position: relative;
margin-bottom: .8em;
&:last-of-type {
margin-bottom: 0;
}
}
input[type=radio],
input[type=checkbox] {
/* hide original check and radio buttons */
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
opacity: 0;
z-index: 2;
}
.checkbox-label,
.radio-label {
padding-left: 24px;
font-size: 1.4rem;
@include user-select(none);
&::before,
&::after {
/* custom radio and check boxes */
content: '';
display: block;
position: absolute;
top: 50%;
@include transform(translateY(-50%));
}
&::before {
width: 16px;
height: 16px;
left: 0;
}
&::after {
/* check mark - hidden */
display: none;
}
}
.checkbox-label::after {
/* check mark style for check boxes */
width: 16px;
height: 16px;
background: url('../img/cd-icon-check.svg') no-repeat center center;
}
.radio-label::before,
.radio-label::after {
border-radius: 50%;
}
.radio-label::after {
/* check mark style for radio buttons */
width: 6px;
height: 6px;
background-color: $color-3;
left: 5px;
}
input[type=radio]:checked + label::before,
input[type=checkbox]:checked + label::before {
border-color: $color-2;
background-color: $color-2;
}
input[type=radio]:checked + label::after,
input[type=checkbox]:checked + label::after {
display: block;
}
}
@-moz-document url-prefix(){
/* hide custom arrow on Firefox - select element */
.cd-filter-block .cd-select::after {
display: none;
}
}
/* End of jquery routine content-filter styling (filter exercises type). */
/* hide the info_box div. it would appear when clicking on an image (details in script).
It is preferred than a hidden div since it does not takes a space in the page.*/
.info_box {
display: none;
width: 450px;
position: fixed;
top: 50%;
left: 50%;
z-index: 9;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: #f0f0f0;
padding: 15px;
}
.body-inactive {
background-color: rgba(0,0,0,0.60); /* view %90 of opacity out of %100.Other zeros are RGB values. */
display: none;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 7;
position: fixed;
}
/*styling for the x button of the info_box */
a#closeIt {
padding: 7px; /* disance of x from the top right. */
position: absolute; /* relative to the info_box. */
top: 0; /* stick to the most top */
right: 0; /* sticked to the most right possible. together it's in the top right */
color: #333;
font-size: 21px;
font-weight: bold;
}
/* Bootstrap Theme */
/*!
* Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Global Styles */
html {
height: 100%;
}
body {
height: 100%;
padding-top: 50px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.img-portfolio {
margin-bottom: 30px;
}
.img-hover:hover {
opacity: 0.8;
}
/* Home Page Carousel */
header.carousel {
height: 50%;
.item {
height: 100%;
&.active {
height: 100%;
}
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
}
/* 404 Page Styles */
.error-404 {
font-size: 100px;
}
/* Pricing Page Styles */
.price {
display: block;
font-size: 50px;
line-height: 50px;
sup {
top: -20px;
left: 2px;
font-size: 20px;
}
}
.period {
display: block;
font-style: italic;
}
/* Footer Styles */
footer {
margin: 50px 0;
}
/* Responsive Styles */
@media (max-width: 991px) {
.customer-img, .img-related {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 70%;
}
}
div.carousel-caption *
{
font-size: 20px;
}
/* End of Bootstrap theme */
.errors
{
color: red;
}
Right now, you can see I've included 2 SASS files in gulpfile.js.
In what case should I include 2 SASS/SCSS files in my app.scss file?
Level 3
Anyone,please?
Level 34
Level 3
@leandromatos thanks for replying.
You mean I can include the SASS file inside the app.scss file, like you've shown?
Level 3
Level 34
Sorry, import, not include. I edited my comment.
1 like
Level 3
@leandromatos thanks for that.It returns another error:
gulp-notify: [Laravel Elixir] Sass Compilation Failed: resources/assets/sass/app.scss Error: @import directive requires a url or quoted path on line 4 of stdin >> @import('buttons'); ^
Tried to run both: npm install -g gulp-sass and npm install gulp-sass still getting the same error as above.
Level 34
@osherdo, It seems to me that one of your files have dependencies to other files. You may need to make other imports before, is just what I can imagine.
Level 3
I see now. Will check up on that. Thanks!
1 like
Please or to participate in this conversation.