I have a few breakpoints set:
$breakpoint-tiny : 0 767px;
$breakpoint-small : 768px 991px ;
$breakpoint-medium : 992px 1229px;
$breakpoint-large : 1230px;
I saw in the breakpoint docs
You can also write OR media queries, allowing you to write multiple
different basic or compound media queries and have them apply if any
of the sets of queries match.
What I'd like to do is use these or queries to target multiple breakpoints when needed in my code. For example:
#include breakpoint($breakpoint-medium, $breakpoint-large){
.mobile-navigation{display: none;}
}
Is this possible?
You should pass one parameter (a list), instead of two.
Try this.
#include breakpoint(($breakpoint-medium, $breakpoint-large)) {
.mobile-navigation{display: none;}
}
I've wrapped your comma separated variables with parentheses.
Now Sass will see them as a one list, instead of two parameters.
There are no OR queries in compass breakpoints, in particular #include breakpoint(($breakpoint-medium, $breakpoint-large)) fails with:
WARNING: Responsive contexts are not available for or queries as which query to use is ambiguous. Please only use single context queries. Default context is used.
You can use OR queries with the plain css #media rules if you really need it.
The right solution is to not specify a max width for your breakpoints, only the min width. Then start writing your sites without breakpoints ("mobile first"). If layout needs to change at a certain width you #include breakpoint($brk) and change the layout for all widths larger than $brk. That way you never have to specify a list of intervals that the media query applies to.
Related
I am a relatively new user of Tabulator so please forgive me if I am asking anything that, perhaps, should be obvious.
I have a Tabulator report that I am able to print and create as a PDF, but the report's formatting (as shown on the screen) is not used in either output.
For printing I have used printAsHtml and printStyled=true, but this doesn't produce a printout that matches what is on the screen. I have formatted number fields (with comma separators) and these are showing correctly, but the number columns should be right-aligned but all of the columns appear as left-aligned.
I am also using Tree View where the tree rows are coloured differently to the main table, but when I print the report with a tree open it colours the whole table with the tree colours and not just the tree.
For the PDF none of the Tabulator formatting is being used. I've looked for anything similar to the printStyled option, but I can't see anything. I've also looked at the autoTable option, but I am struggling to find what to use.
I want to format the print and PDF outputs so that they look as close to the screen representation as possible.
Is there anywhere I could look that would provide examples of how to achieve the above? The Tabulator documentation is very good, but the provided examples don't appear to explain what I am trying to do.
Perhaps there are there CSS classes that I am missing or even mis-using? I have tried including .tabulator-print-table in my CSS, but I am probably not using it correctly. I also couldn't find anything equivalent for producing PDFs. Some examples would help immensely.
Thank you in advance for any advice or assistance.
Formatting is deliberately not included in these, below i will outline why:
Downloaders
Downloaded files do not contain formatted data, only the raw data, this is because a lot of the formatters create visual elements (progress bar, star formatter etc) that cannot be replicated sensibly in downloaded files.
If you want to change the format of data in the download you will need to use an accessor, the accessorDownload option is the one you want to use in this case. The accessors transform the data as it is leaving the table.
For instance we could create an accessor that prepended "Mr " to the front of every name in a column:
var mrAccessor= function(value, data, type, params, column, row){
return "Mr " + value;
}
Assign it to a columns definition:
{title:"Name", field:"name", accessorDownload:mrAccessor}
Printing
Printing also does not include the formatters, this is because when you print a Tabulator table, the whole table is actually rebuilt as a standard HTML table, which allows the printer to work out how to layout everything across multiple pages with column headers etc. The downside of this is that it is only loosely styled like a Tabulator and so formatted contents generated inside Tabulator cells will likely break when added to a normal td element.
For this reason there is also a accessorPrint option that works in the same way as the download accessor but for printing.
If you want to use the same accessor for both occasions, you can assign the function once to the accessor option and it will be applied in both instances.
Checkout the Accessor Documentation for full details.
I am currently working on a Java project, and I am finding IntelliJ Idea's code style system to be extreamly frustrating as it refuses to accept the settings that I want to give it. Specifically, I want spaces around various operators unless they're inside a for loop's header. For example, the following code should be output:
for(int x=0;x<10;++x){ // no spaces around operators when they're in a for loop's header
System.out.println(x);
}
int a = 10; //spaces around = when not in a for loop's header
int b = 50;
a = b;
if(a < b){ //an if statement is not a for loop's header
doSomething();
}
In essence, I want IntelliJ to make an exception to normal space rules when in the header of a for loop, removing these spaces. It looks absolutely disgusting to me to have what should be a dense construction filled with superfluous spaces, to the point that it is making me not want to use IntelliJ Idea at all, despite its numerous great features. THis, for example, severely diminishes the utility of its automatic refactoring ability because I need to manually go through and fix its formatting errors after every refactor.
When I look in the code style settings, the "around operators" checkboxes seem to have no mechanism for a different setting inside for loops:
How can I get IntelliJ Idea to format my code correctly?
I'm building a LESS file containing a list of color variables that are used through our project. Most of these colors are simple colors (red, blue...), but I want a few of them to be automatically "computed" from the other colors. For example, I have made a mixin to automatically create a color that "stands out" from another color. Following the LESS documentation, I "simulate" a return value by defining a new variable in the mixin, so that I can use it next.
.stand-out-color(#baseColor, #rate) when (lightness(#baseColor) >= 50%) {
#standOutColor: darken(#baseColor, #rate);
}
.stand-out-color(#baseColor, #rate) when (lightness(#baseColor) < 50%) {
#standOutColor: lighten(#baseColor, #rate);
}
.stand-out-color(red, 10%);
#my-first-color: #standOutColor; // A slightly different red, perfect
.stand-out-color(blue, 10%);
#my-second-color: #standOutColor; // The same slightly different red, not the blue I expected
Unfortunately, the return value is written after the first call, and never changed afterwards.
After reading the documentation again, I got this part: "There is only one exception, variable is not copied if the caller contains a variable with the same name (that includes variables defined by another mixin call)."
So it works as it should, but I don't have any idea how to achieve what I want, which is a function I can call more than once within the same scope. As I'm defining a list of global variables, I don't think I can play with scopes to avoid this behavior. Is there any other way to achieve this?
Here's the solution, thanks to seven-phases-max's comment to my question. It solves my initial problem, which is that I needed to compute slightly darker/lighter color variables depending on another variable.
The contrast function of LESS solves my issue, by letting me specify which color to take depending if a color is "dark" or "light".
Applied to my example:
#my-first-color: contrast(#original-color, darken(#original-color, 10%), lighten(#original-color, 10%));
I'm using a Velocity template to generate an e-mail. Within that e-mail, I want to create a mailto link that will look like this:
Link
I have this chunk of code that properly creates that link:
Link
That code works, but it's nearly impossible to read. I want to put some line breaks in there so that I'd have something more like this:
<a href="mailto:
#foreach(${person} in ${people})
${person.email}
#if($foreach.hasNext)
,
#end
#end
?subject=My%20Subject%20Line">Link</a>
I find that to be much easier to read, but Velocity will include all the whitespace into the output and causes the link that it produces to break.
Is there any way to format the code the way I want and tell Velocity to ignore all the whitespace throughout that segment?
Thanks!
A first option is to use comments:
<a href="mailto:#*
*##foreach(${person} in ${people})#*
*#${person.email}#*
*##if($foreach.hasNext)#*
*#,#*
*##end#*
*##end#*
*#?subject=My%20Subject%20Line">Link</a>
Another option is to add a pre-processing that will remove all indenting spaces and carriage returns.
Yet another is to do it as a post-processing.
The way to add this pre- or post- processing is dependent on the context in which you are using Velocity.
Is it possible to escape whole declaration?
This complies fine in less.js (I'm using less.app)
margin: e(" 0 10px");
But this throws an error:
e("margin: 0 10px");
I've tried putting 'margin' in a variable but without success.
Sorry that's not possible. A couple things though:
The official escape designation (according to lesscss.org is the tilde-quote, not the e() syntax, like so:
margin: ~"0 10px";
Second, the code you provided is not nearly complex enough to warrant a LESS CSS string literal. Please share the actual code that you are having trouble with. You may want to close this question and ask another one.
Third, remember that you can include a .css file - it will not be compiled, just dumped into the output. The syntax is identical to a standard CSS import:
#import "myfile.css";
After many attempts, I got this to compile and output in my less file.
font-family: e("'object-fit: contain;'");
This is a hack for IE object-fit (I got that idea from object-fit