I've this mixin applied on a menu, I don't want see on small resolution:
#mixin visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
This working fine. But on bigger resolution I will show this menu. Obviously I can restyle and revert these attributes (I'm allready done it). But I was thinking if is there some built-in way to remove mixins – something like #uninclude visuallyhidden;.
Or is there a better way how to do this?
Thanks for all suggestions.
Use media queries to only apply the styles when appropriate. Doing and undoing bloats your CSS unnecessarily.
#media (max-width: 45em) {
.foo {
#include visuallyhidden();
}
}
Related
Here is what we are doing:
we are creating a hook to modify the \html\css\common\_mixins.scss file.
The file when deployed is updated. So far so good.
The problem is the CSS files which are importing this mixin are not showing any changes, for example this file - \webapps\ROOT\html\css\taglib\navbar.css.
After some debugging I found that there is a .sass-cache folder in \webapps\ROOT\html\css\taglib\.sass-cache which also has the final generated file navbar.css which is used by the portal.
Now when I deploy the hook all the CSS files which import this mixin are not recompiled/regenerated in .sass-cache folder, which makes the hook useless.
Can somebody tell me if there is any way to make use of this mixin or is there anyother way to do this or may be I can manually recompile all the CSS files using this mixins if only I knew how to.
Also I see that deleting the .sass-cache is not an option since this folder is also used by liferay to patch CSS files if there is a hot-fix.
Environment
Liferay EE 6.2 SP9 bundled with Tomcat
Reason from the comments
The reason why we need to change this file is to have a way to disable responsive elements for the navigation-bar. Or better still disable responsiveness for the whole portal. Since the responsiveness is due to the media-query.
Thanks
It's not possible to alter _mixins.scss via hook, and it's not only due to the evil sass-cache.
_mixins.scss is written is SASS and it needs to be compile and store in sass-cache. Every theme includes compiled version of every sass file.
The only way is to build you own theme and change _mixins.scss or any other file in _diff folder.
Why do you need to alter that particular file?
So the changes were not reflected and I think CSS is not meant for hooking.
So after trying a lot of stuff, still we were not able to disable responsiveness, so we applied the following CSS in our custom.css in our theme. This worked for the navigation bar, for others we can again include those styles individually.
#media (max-width: 979px) {
.navbar .container {
position: initial;
}
.navbar .container .btn-navbar {
color: initial;
display: none;
margin-bottom: initial;
width: initial;
}
.navbar .container .btn-navbar > .icon-bar:first-child {
margin-top: initial;
}
.navbar .container .btn-navbar > .icon-bar:last-child {
margin-bottom: initial;
}
.navbar .container .nav-collapse {
display: initial;
}
.navbar .container .nav-collapse.open {
display: initial;
height: initial;
overflow: initial;
}
.navbar .container .nav-collapse .btn {
padding: initial;
}
.navbar .container .navbar-search {
margin: initial;
padding: initial;
}
.navbar .container .navbar-search .btn,
.navbar .container .navbar-search .btn-link {
clip: none;
position: initial;
}
.navbar .container .navbar-search .form-search {
margin: initial;
}
.navbar .container .navbar-search .form-search .input-append {
display: initial;
padding-right: initial;
}
.navbar .container .navbar-search .form-search .input-append .search-query {
width: initial;
}
}
This CSS code is taken from this Liferay forum post.
I've recently updated to SingularityGS 1.4.0 and have run into an issue with my .container class using an #include clearfix; which now includes an overflow:hidden property.
For a slideshow component, I use negative/positive margins to display arrows overlapping arrows outside of the .container:
.container { //Container for the grid system
background: $background-color;
max-width: $site-width;
margin: 0 auto;
position: relative;
#include clearfix;
#include breakpoint($large-break) {
border-left: 20px solid #fff;
border-right: 20px solid #fff;
width: $site-width;
}
.container {
border: 0px;
margin: 0px;
clear: both;
}
}
.left-arrow, .right-arrow {
position: absolute;
cursor: pointer;
margin-top: -20px;
font-size: 0.8em;
width: 41px;
height: 41px;
top: 50%;
}
.left-arrow {
left: -10px;
background: url(/images/icons.png) no-repeat -153px -146px;
}
.right-arrow {
right: -10px;
background: url(/images/icons.png) no-repeat -197px -146px;
}
Here's a screenshot of the problem:
https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0
Should I be using something other then the clearfix mixin in my container?
Edit: - Added Sassmeister issue as requested
This version of Singularity uses the Compass clearfix. You can write your own to work as you want it:
#mixin clearfix {
&:after {
content: '';
display: table;
}
}
see: http://sassmeister.com/gist/099ef72b56365fe8ce07
Singularity doesn't have its own clearfix mixin.
You're using the clearfix mixin from Compass which leverages the overflow: hidden technhique which in turn crops your container.
The solution is to use another mixin for clearfixing.
Compass bundles three different clearfix mixins, the most usable of which is the pie-clearfix. It's output is as follows:
.foo {
*zoom: 1;
}
.foo:after {
content: "";
display: table;
clear: both;
}
I recommend that you use the clearfix mixin bundled with the beautiful toolkit Sass extension by Team Sass.
It has the following benefits over the pie-clearfix:
Shorter output that works for all modern browsers:
.foo:after {
content: "";
display: table;
clear: both;
}
Two ways of applying: the traditional mixin way (default) and the extend way. The extend way makes your CSS footprint even smaller by deduplication. The downside of the extend way is not being able to apply it from media queries, though i've never faced a situation where you would need a clearfix only in a media query and need it not to be applied outside media query.
To configure Toolkit for using the extend way apply this in the beginning of your CSS:
#include toolkit-set('clearfix extend', false);
To override current setting once use this:
#include clearfix(true);
true means the extend methhod, false means the mixin method.
Note that if you're including both Compass and Toolkit, Toolkit should come after Compass to override the clearfix mixin.
If you feel that Toolkit is too bulky for your project, simply define your own clearfix mixin after importing Compass, just like Scott suggests. Just be sure to use proper clearfix method, Scott's code (as of 2014-09-04 12:00 UTC) doesn't actually clearfix.
I am starting mobile first and adding css as the viewport gets larger, but i've run into an issue with a certain image scaling issue and i can't seem to make sense of it.
I'm using Sass to begin with.
#media 320 i include all my styles for a certain block of content on the page of which I have an image within this block and here is the CSS for this media query:
section.catalog-grid {
position: relative;
height: 100%;
overflow: hidden;
.cat-dvdr {
#include btm-brdr;
padding: 20px 0;
}
h4.catalog-title {
font-weight: normal;
font-size: 1.5em;
color: $blue;
top: 0;
padding: 0;
margin: 0;
text-align: center;
}
h6 {
font-weight: normal;
font-size: 1em;
color: $pale-grey;
padding: 0 10%;
margin: 0;
text-align: center;
}
img.cat-img {
#include center;
}
img.rocket {
width: 40%;
margin-top: 30px;
}
img.wizard {
width: 50%;
margin-top: 10%;
margin-bottom: 10%;
}
img.order {
width: 60%;
margin-top: 10%;
margin-bottom: 10%;
}
#media min-width 568px I actually wanted the image to be a smaller percentage scale and here's my Sass that i added to this media query:
img.rocket {
width: 30%;
margin-top: 30px;
}
img.wizard {
width: 40%;
margin-top: 10%;
margin-bottom: 10%;
}
img.order {
width: 50%;
margin-top: 10%;
margin-bottom: 10%;
}
My thinking behind this is that since i'm only adding styles that are changing as the viewport gets larger i don't have to add all of the Sass for this block (as i did at the 320px media query) but rather just add the rules that I want changed.
However what is happening is that the 320px media query image percentage size is overriding my 568px media query percentage image size when the viewport is at 568px and i'm not sure why.
Attached is a screenshot of what is going on in DevTools and i suspect that the reason that the 320px style is overriding the 568px style is due to more specificity since it notes all the parent elements of this particular image.
However i've attempted to remove the specificity from the 320px file so that the only rules that i want to be affected on the 320px file would be. In other words not include the entire block and its children but only the classes i want adjusted at this specific viewport size and that didn't work either.
Does this make sense?
Here is the screenshot:
In the 568px query, the image is targeted as:
img.rocket { ... }
In the 320px query, it's:
section.catalog-grid img.rocket { ... }
Since you have the additional specificity on the 320px rule, it will always override the less-specific rule no matter where it is located in the style sheet. You'll either need to match that specificity in your 568px rule, or reduce the specificity of the 320px rule.
In your sass, it looks like you have image.rocket contained inside the section.catalog-grid block:
section.catalog-grid {
...
img.rocket { ... }
}
That creates the compiled rule you're seeing.
I was reviewing UiKit, a frontend framework built with LESS, and noticed a rather interesting feature: hooks. Look at the following in the base framework:
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
.hook-panel-badge;
}
.hook-panel-badge() {}
If you want to override that in a theme let's say you are building outside of the core files (files that come later in compilation), then you would do the following:
.hook-panel-badge() {
right:auto;
}
So, in essence it looks like you are able to override/customize selectors without adding in additional selectors, so it keeps your markup as small as possible.
Is anything like this available in SASS? This looks like an awesome feature that I'd love to use as a primarily SASS user, but I haven't found #extend to be the same. Thanks!
Update
The placeholder feature seems to be the closest thing I've found:
.panel {
background:red;
#extend %hook-panel;
}
%hook-panel {
color:blue;
}
Which renders as:
.panel {
background: red; }
.panel {
color: blue; }
and can be defined after (which is awesome), but this still duplicates the selector. Is there anyway to only render the value of the placeholder in the original selector it is included in?
SASS has a similar facility called mixins:
// Define the mixin
#mixin large-text
font-family: Arial
color: #ff0000
// Use it
.page-title
#include large-text
padding: 10px
// Compiled CSS
.page-title {
font-family: Arial;
color: #ff0000;
padding: 10px;
}
The beauty of mix-ins is that they can take arguments, so you don't need to override commonly-changed selectors:
// Define
#mixin sexy-border($color, $width)
border-color: $color
border-width: $width
border-style: dashed
// Paragraphs in general will have a sexy blue 10px dashed border
p
#include sexy-border(blue, 10px)
// Paragraphs of class "plain" will have a plain old black 1px solid border
p.plain
#include sexy-border(black, 1px)
border-style: solid
// Compiled CSS
p {
border-color: blue;
border-width: 10px;
border-style: dashed;
}
p.plain {
border-color: black;
border-width: 1px;
border-style: solid;
}
SASS mixin documentation.
As far as I can see, there's no exact mapping of the LESS behaviour to a SASS equivalent.
You have the following options:
#extend
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#extend .hook-panel-badge;
}
.hook-panel-badge{
right:auto;
}
Resulting in:
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.hook-panel-badge, .uk-panel-badge {
right: auto;
}
This produces slightly more CSS than the LESS equivalent does, because the original (unhooked) class is preserved.
#mixin
//theme.scss:
#mixin hook-panel-badge(){
}
#import "hooks";
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#include hook-panel-badge;
}
_hooks.scss:
//theme creator can override hooks in here.
#mixin hook-panel-badge(){
right:auto;
}
This creates the exact same code as your SASS, but the downside is that you need to define a blank mixin for every hookable class, which is a bit of effort. (You could of course put these all in the _hooks.scss file, but that would make the override code harder to read.
EDIT:
I guess there is one more option as below, which saves a little bit of typing on the extendee's side, but moves away from standard CSS syntax for the extender a bit too much for my liking. You could of course use a partial file as in 2.
#mixin hook($class){
//generic override.
#if($class == "uk-panel-badge"){
right:auto;
}
#else if($class== "selector2"){
//override other classes in this way.
}
}
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#include hook("uk-panel-badge");
}
Overall I still feel 1 is the best approach.
Can anyone tell me if it's possible to make this work in Firefox2 (and also IE6)?
http://collinatorstudios.com/ff2_test.html
I was able to emulate inline-block with the '-moz-inline-stack' hack, however it appears that it ignores position: relative, so elements with position absolute inside the inline-stack container do not appear relative to where they should.. instead they are at the top right of the page in FF2...
I know FF2 is outdated and I probably shouldn't care, but I am wondering if there is a way to achieve this, and also I need it to work in IE6.
Thank you.
Unfortunately I no longer have FF2 to test this for you, but I think the only way to make in work in that is to nest a div and apply position relative to the nested div so it would be inside you li
as for IE6 I think an alteration to your hacks should works for it too..
change:
.item {
list-style-type: none;
height: 50px;
width: 50px;
position: relative;
border: 1px solid teal;
background: #00f;
display: -moz-inline-stack; /* for FF2 */
display: inline-block;
/* <ie hacks> */
zoom: 1;
*display: inline;
min-height: 50px;
_height: 50px; /* for ie6 */
/* </ie hacks> */
}
to:
.item {
list-style-type: none;
height: 50px;
width: 50px;
position: relative;
border: 1px solid teal;
background: #00f;
display: -moz-inline-stack; /* for FF2 */
display: inline-block;
}
.item {/** IE Hacks **/
display: inline !ie7; /* should work for 6 as well */
_height: 50px; /* IE6 */
}
putting the display:inline rule in a separate ruleset means you don't need zoom, and it should work for both IE6 and 7.
I just moved the min-height hack to keep them together ;) - as an aside I'm not sure why you've got min-height as you already have a height rule further up the stack and the 2nd height rule (which I removed) was just repeating, so perhaps you don't need the IE6 min-height hack anyway?