I need to invert the color when the mode is dark.
When I try to apply dark:invert I get the below error
./src/styles/input.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/styles/input.css)
Syntax error: The `dark:invert` class does not exist, but `2xl:invert` does. If you're sure that `dark:invert` exists, make sure that any `#import` statements are being properly processed before Tailwind CSS sees your CSS, as `#apply` can only be used for classes in the same CSS tree. (2:10)
1 | input[type="date"]::-webkit-calendar-picker-indicator {
> 2 | #apply dark:invert;
| ^
3 | }
Related
I'm currently writing my first blog in markdown and trying to style a table in CSS.
The table in my markdown file is:
| | Experiment 1 | Experiment 2 |
|-| ------- | ------- |
|**Ingredients**|**696g**|**696g**|
|White Flour|274g|274g|
|Brown Flour|134g|134g|
|Water|250g|300g|
|Sugar|13g|13g|
|Olive Oil|17g|17g|
|Salt|8g|8g|
|**Flour Type Distribution**|**408g**|**408g**|
|White Flour|67%|67%|
|Brown Flour|33%|33%|
|**Hydration Rate**|**61%**|**73%**|
|**Oven Specs**|||
Which is formatted using this css file, to output this table.
But, what I actually want to do is to only change the background-color CSS property of the rows where the td is set to bold in markdown (surrounded by **).
For example, in the above table, the rows that I want to change the background-color of are:
|**Ingredients**|**696g**|**696g**|
|**Flour Type Distribution**|**408g**|**408g**|
|**Hydration Rate**|**61%**|**73%**|
|**Oven Specs**|||
Is that possible? Or is there any other workaround that I can use to achieve the same?
if it was an attribute you could select their content and edit on css(say it was a value instead of an innerHTML content):
td[value^="**"]{background-color: red}
"^"shows that the value should START with this
Documentation Link: https://www.w3schools.com/cssref/sel_attribute_value.asp
according to my knowledge there is no CSS only solution. you can try using javascript. let me know if you want to implement it on Javascript. I'll Help.
I am trying to learn media query in css and I have few questions about some of the examples that I have come across. The queries are mentioned below:
I have seen a variable was declared in the following format in a .scss file which is used in a react component:
$screen-xs-max: ($screen-sm-min - 1);
Why is -1 used here?
The second question that I have is about this:
$large-screens-up: "(min-width: #{$screen-lg-min})";
I have 2 questions about these lines of code:
Why is the variable declared within the " ", doesn't that make the variable a string?
Why is # used here? I guess it is to find the variable $screen-lg-min in the path from where it is imported, but I am not sure if its correct. I just want to confirm if that's the correct thing or correct me if I am wrong.
Can anyone please help me with these doubts? I am sorry if this is too simple. I tried getting the answers myself, but couldn't find it.
In SCSS
Consider $screen-sm-min:546px; which will be declared in scss variables file in your project or the node modules folder.
$screen-xs-max: ($screen-sm-min - 1); means that the value of $screen-xs-max will be 1 less than $screen-sm-min that is 545px.
$large-screens-up: "(min-width: #{$screen-lg-min})";
Varible in scss can be used directly using $varible-name ,
But when you want to use the same variable inside a string in scss u will have to follow this
#{$variable-name} method
Why -1
Consider extra small devices width to be 0 to 545px(maxvalue).
Consider small devices width to be 546px(minvalue) to 768px(maxvalue)
Therefore the max width of the extra small devices will be
(min value of small devices) - 1
This method is used to avoid harcoded values in scss file,
For example if you decide to change the values of the width, you can change it in only one place and let the formulae handle the remaining calculation of the widths
StackOverflow is denoted as a place for AwesomeWM community support.
I would like to have a dedicated Tag in my AwesomeWM config where only three particular application will be running all the time. I managed to create new tag using sample config, and I managed to filer the applications using awful.rules.rules and place them into the tag.
I am experiencing troubles in understanding how AwesomeWM layout engine really works. I would like to achieve the following: three static columns of fixed widths, each application is located at its own column, when focus changes then no rearrangement happens, when any application is not running, then its reserved place is remain empty.
___________________
| | | |
| | | |
| A | B | C |
| | | |
| | | |
___________________
How do I specify layout in such case? Should I write my own one? Can I use flexible layout and specify position for client? What is the recommended correct way to achieve my goal?
I am experiencing troubles in understanding how AwesomeWM layout engine really works
A layout is a table with two entries:
name is a string containing, well, the name of the layout
arrange is a function that is called to arrange the visible clients
So you really only need to write an arrange function that arranges clients in the way you want. The argument to this function is the result of awful.layout.parameters, but you really need to care about
.clients is a list of clients that should be arranged.
.workarea is the available space for the clients.
.geometries is where your layout writes back the assigned geometries of clients
I would recommend to read some of the existing layouts to see how they work. For example, the max layout is as simple as:
function(p)
for _, c in pairs(p.clients) do
p.geometries[c] = {
x = p.workarea.x,
y = p.workarea.y,
width = p.workarea.width,
height = p.workarea.height
}
end
end
Should I write my own one? Can I use flexible layout and specify position for client?
Well, the above is the write-own-layout approach. Alternatively, you could also make your clients floating and assign them a geometry via awful.rules. Just have properties = { floating = true, geometry = { x = 42, y = 42, width = 42, height = 42 } }. However, with this you could e.g. accidentally move one of your clients.
What is the recommended correct way to achieve my goal?
Pick one. there is no "just one correct answer".
I'm writing a site using nanoc and ruby, and I want to use SCSS. But I'm having a bit of an issue. No matter what I try, I cannot get my SCSS file to convert and output as compiled CSS. It either throws an error or comes through as exactly the same file type. My Ruby rules file and directory structure is below, please help!
#!/usr/bin/env ruby
compile '/**/*.html' do
layout '/default.*'
end
# This is an example rule that matches Markdown (.md) files, and filters them
# using the :kramdown filter. It is commented out by default, because kramdown
# is not bundled with Nanoc or Ruby.
#
#compile '/**/*.md' do
# filter :kramdown
# layout '/default.*'
#end
route '/**/*.{html,md}' do
if item.identifier =~ '/index.*'
'/index.html'
else
item.identifier.without_ext + '/index.html'
end
end
compile '/assets/SCSS/' do
filter :scss => :css
write #item.identifier.without_ext + '.css'
end
compile '/assets/images/*' do
write item.identifier.to_s
end
compile '/**/*' do
write item.identifier.to_s
end
layout '/**/*', :erb
Here is my directory structure:
root
|
|\_content
| |
| \_assets
| |
| \_test.scss
\_public
|
\_assets
|
\_test.scss <-------- This should be compiled CSS
I found a utility called Compass that gives you filter options for SCSS.
Use the SASS filter as outlined in How can I get the nanoc SASS filter to use SCSS syntax?
filter :sass, syntax: :scss
In my LESS project I am having issues getting my guarded mixins working with variables that I declared in another file. Here is the code I am working with:
_defaults.less (contains all of my variables)
//------------------------------------//
// #INCLUDE
//------------------------------------//
// Set whatever components you want included
// in your project to `true` and any components
// you do not wish to be included to `false`
// Base
#use-main: true;
_main.less (just a random partial in my project)
.main(#boolean) when (#boolean = true) {
// Styles go here
}
// Execute mixin
.main(#use-main);
style.less (imports all of my partials)
//------------------------------------//
// #IMPORTS
//------------------------------------//
// Base styles
#import "base/_main.less";
This is how my project is structured (for around 20 partials that are then imported into the style.less file).
Whenever I try to compile my project, I get this error:
Unrecognised input
c:\Users\Keenan\Documents\GitHub\concise.css-less\less\base_main.less line 1
c:\Users\Keenan\Documents\GitHub\concise.css-less\less\concise.less
The code you pasted is correct. In fact you are misled by lessc error message. It refers to the #main block. It seems the issue you are facing is related to your project Concise.css-less and more precisely this line.
#if #global-border-box == true {
// [...]
}
This is not the proper syntax for if statements in less. See question:
How to use if statements in LESS
It seems you are converting a project from stylus to less. I would suggest cutting large chunks of files that fail to import to find out, through bisection, the lines that less doesn't recognize. Alternatively, you could comment the top mixins guards that are used here to include this or that part of the css, and that confuse less for error reporting.
For example, if you comment the first and last lines of file _lists.less:
//.lists(#boolean) when (#boolean = true) {
[...]
//.lists(#use-lists);
lessc will report the error near the proper line (actually it's > on line 111 that it doesn't like):
ParseError: Unrecognised input in concise.css-less/less/base/_lists.less on line 109, column 9:
108 .breakpoint(small) {
109 dl.dl-horizontal {
110 overflow: hidden;