When I use #include breakpoint(min-resolution: 1.5dppx),
I get this output:
#media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
This shortcut is fine, but if I try to combine it with another query like this:
#include breakpoint(min-resolution: 1.5dppx, 2050px)
I get exactly the same (the last part is removed)
Then if I add some quotes:
#include breakpoint("2050px, min-resolution 1.5dppx")
I loose the cross-browser part: #media (min-width: 2050px, min-resolution 1.5dppx)
Is there a way to combine them successfully?
When using or queries passed directly into the Breakpoint mixin, you need to wrap the whole query in parenthesis as the second argument to the Breakpoint mixin is no-query. You should be writing the following:
#include breakpoint((min-resolution 1.5dppx, 2050px)) {}
Take a look at this SassMeister Example to see it working in action.
Related
I have some datatables (as in datatables.net) running in PHP within a Laravel 9 framework. Everything works fine but the select length drop down is too small and results in the down arrow impinging on the number as below:
I have tried to find the css class which appears to be:
div.dataTables_wrapper div.dataTables_length select {
width: auto;
display: inline-block;
}
but changing this seems to have no effect - min-width etc. And I did clear all caches!
The rest of it is perfect.
Thanks!
We've got our sass variables file set up like
scss\variables\_custom_variables.scss.
Which, of course contains things like
$link-color: $00f;
Then put to use in our sass files set up like this one for navigation as scss\main\_main_nav.scss where we have rules like
a {color: $link-color;}
Now we've got a new feature allowing for custom styling, which pulls in the variables as well as everything in scss\main\. In lieu of creating something like
scss\main_2\_main_nav.scss ad infinitum
I'd like to be able to redefine $link-color.
I was hoping I could simply create scss\new_file\_variables.scss and have a list of overrides like
$link-color: #36c;
but this is not working as expected. What could I be doing better?
Thanks, all
You can define your base-variables with the default-flag: $var1: lightblue !default;
and override them in the theme using $var1: red;
If you #import the variable-files in the right order, red overrides lightblue.
https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498
I'm building a site in Joomla 3 on T3 framework.
I'm having to use LESS for the first time, but am experienced with CSS.
The site will have differently themed landing pages. These will all be identical except for the colour scheme.
I am attempting to set up a colour scheme in the T3 'variables' less file and then implement the colours - the colour will be different for many core components - such as H1, P, DIV Background Color, etc.
So if I set up, say, a master colour for Thailand's page, I create this rule in the variables.less file:
#thai: #e55092;
and then my knowledge of exactly how LESS compiles to CSS falls flat and I lose my entire train of thought.
Because I now want to be able to set up a landing page for Thailand in the T3 template. I need to be able to use the class 'thai' in various places in this page - for instance, the H1 text should be coloured #e55092, an aside background should be #e55092, an HR should be #e55092 ... for THIS page only.
I hope this isn't a too open question but what would be best practice for achieving this, keeping my code clean and fast? My current line of thought is that I create a whole bunch of rules in LESS along the lines of:
thai.h1 { color: #thai }
thai.button [ background-color: #thai }
(excuse syntax - very new to LESS and not sure what's possible or correct)
But isn't that defeating the whole purpose of using LESS in the first place?
I think your question is very broad indeed. Depending on your situation:
One CSS file for all pages. You can consider changing selector order The code for a button can then look like that shown beneath:
.button {
border: 1px solid white;
.thai & { background-color: red;}
.japanese & { background-color: yellow;}
}
In your HTML pages: <body class="thai"> and so on..
Compile different CSS files for each landing page
In Less you can override a variable by putting the definition afterwards
You should first define a main file, for the button example this button.less file should contain something like that shown below:
#button-background-color: orange;
button { background-color: #button-background-color; }
Now you can define you thai theme file (thai.less) as follows:
#import "button.less";
#button-background-color: red;
Or alternatively compile different CSS files using the modify-var option:
lessc button.less --modify-var="button-background-color=red" thai.css
I have a table that takes the "table-responsive" class and works as expected when the screen shrinks to ~760px but i want the behavior in 1300px itself. Is it possible? I tried media-queries but i guess i didnt get it well. is that what I'm supposed to use ?
IIUC, this will be fixed in Bootstrap v3.2.1.
Until then, you can easily add the fix manually:
.table-responsive {
overflow-x: auto;
}
I am using nivo slider( default theme) and I positioned the prev and next arrows next to the image(not on top of the image) and I was wondering if there is a way to always show the next and prev arrows(right now the arrows only show when you hover over the image). Seems there should be a way to edit the code to do this but I can't seem to figure out where. Thanks!
directionHideNav: false doesn't work as of 3.1.
Changes now need to be made in CSS
In the theme css file find the line
.theme-default .nivo-directionNav a
Change:
opacity: 0; to opacity: 1;
Right way is;
just change or add directionNavHide value and set it to false in nivoSlider settings.
$('#slider').nivoSlider({directionNavHide:false});
open the nivoslider js file and find
{a(".nivo-directionNav",f).hide();f.hover(function(){a(".nivo-directionNav",f).show()},function(){a(".nivo-directionNav",f).hide()}
change to
{a(".nivo-directionNav",f).show();f.hover(function(){a(".nivo-directionNav",f).show()},function(){a(".nivo-directionNav",f).show()}
Save an upload.
An easy to do it without touching the JS code is just to add a line in your CSS file:
.nivoSlider .nivo-directionNav{
display: block !important; /* ALWAYS show the arrows */
}
I'm not a big fan of !important, but if it means I don't have to adjust the js then it works for me.