25. Feb 2016
Weblication enthält einen eigenen CSS Präprozessor, der SCSS Syntax unterstützt und eine große Schnittmenge mit SASS aufweist.
Weblication enthält einen eigenen CSS Präprozessor, der SCSS Syntax unterstützt und eine große Schnittmenge mit SASS aufweist.
Der integrierte Präprozessor kann über ein Attribut im XSLT-Template aktiviert werden. Ist einmal aktiviert, brauchen Sie sich um nichts zu kümmern. Als Administrator angemeldet, kompiliert er die erweiterte CSS-Syntax automatisch in reines CSS.
Folgende erweiterten CSS-Funktionen unterstützt Weblication bereits:
#blockTop {
@extend .clearAfter;
position:relative;margin:0 auto 1px auto;
background-color:$backgroundColorTop;
-w-add-classes:$keepBlockTopInsideTopOnScroll;
.object-singlepage & {
}
> header {
max-width:$widthMaxSectionInner;
position:relative;
margin:0 auto;
-w-add-classes:$displayFontResizerClass;
#logo {
float:left;display:block;max-width:100%;margin:12px 0 12px 0;
> img {display:inline-block}
}
&.restored-init #logo {margin:2px 0 12px 0}
&.restored-ready #logo {margin:12px 0 12px 0}
.wglContainerInsideTopOnScroll & #logo {margin:20px;transition:all 0.4s linear}
.wglContainerInsideTopOnScroll &.moved-init #logo {margin:12px 0 12px 0}
.wglContainerInsideTopOnScroll &.moved-ready #logo {margin:2px 0 12px 0}
#fontResizer {
float:right;height:30px;position:relative;background-color:$backgroundColorFunctions;margin:0 0 0 0;padding:0 6px 0 6px;
.fontResizerShrink {cursor:pointer;line-height:20px;font-weight:bold;font-size:10px;float:left;padding:6px 4px 0 4px}
.fontResizerEnlarge {cursor:pointer;line-height:20px;font-weight:bold;font-size:16px;float:left;padding:6px 4px 0 4px}
}
#languageSelector {
display:$displayLanguageselector;float:right;height:30px;position:relative;background-color:$backgroundColorFunctions;margin:0 0 0 0;padding:0 6px 0 6px;
a {
&.lang {
text-decoration:none;line-height:20px;float:left;padding:6px 4px 0 4px;
img {vertical-align:-1px;}
span {display:none;padding:0 3px;line-height:20px;text-transform:uppercase;}
}
&.langCurrent {
text-decoration:none;line-height:20px;float:left;padding:6px 4px 0 4px;
img {vertical-align:-1px;}
span {display:none;padding:0 3px;line-height:20px;text-transform:uppercase;}
}
}
}
#searchBox {
display:$displaySearch;height:30px;position:relative;float:right;background-color:$backgroundColorFunctions;
dl {padding:5px 5px 0 5px}
dt {margin:0;display:none}
dd {
position:relative;overflow:visible;cursor:pointer;margin:0;
&:before {content:'';pointer-events:none;position:absolute;top:3px;left:3px;width:7px;height:7px;border:solid 2px $fontColorFunctions;border-radius:50%;}
&:after {content:'';pointer-events:none;position:absolute;top:0;left:1px;width:7px;height:2px;background-color:$fontColorFunctions;transform:rotate(54deg);margin-top:14px;margin-left:9px;}
&.focused {}
&.focused:before {display:none}
&.focused:after {display:none}
}
.searchTerm {opacity:0;cursor:pointer;width:20px !important;height:20px;line-height:100%;transition:width 0.2s ease-in-out;-w-jquery:jQuery(this).focus(function()\7BjQuery(this).parent().addClass('focused')\7D).on('blur', function()\7BjQuery(this).parent().removeClass('focused')\3BjQuery(this).val('')\3BjQuery('#searchSuggestOuter').remove()\7D)}
dd.focused .searchTerm {opacity:1;outline:none;cursor:text;border-radius:0;width:120px !important;color:inherit}
#searchSubmit {display:none}
}
#navigationMeta {
display:$displayNavigationMeta;float:right;margin:0;padding:0 4px 0 4px;height:30px;background-color:$backgroundColorFunctions;
}
#navigationMain {
position:static;clear:both;overflow:hidden;width:100%;margin:0;width:100%;
}
@media only screen and (min-width: $viewport_m_min){
height:auto;
#logo {
position:static;height:auto;margin:24px 0 0 0;
img {margin:0;width:140px;height:auto}
}
#searchBox {
position:static;
.searchTerm {float:left;width:80px;}
}
#navigationMeta {
position:static;clear:both;float:none;margin-top:2%;height:auto;overflow:hidden;
}
#navigationMain {
margin-top:40px;position:static;overflow:hidden;float:right;font-family:$fontFamilyNavigationMain;background-color:$backgroundColorNavigationMain;-w-add-classes:wglNavigationOptimizeTouch;
}
}
}
}