The following is my CSS code:
table th{ font-family:arial; font-size:9pt; color:#ffffff; background: -moz-linear-gradient(#b9cdde, #7c98ae); border: 1px solid #ffffff; }
table th:last-child{ background: -moz-linear-gradient(#729cc3, #35699a); }
I get a validation error with CSS which says
Value Error : background Too many values or values are not recognized : -moz-linear-gradient(#b9cdde,#7c98ae) -moz-linear-gradient(#b9cdde,#7c98ae)
Does someone have any idea as to why this might be happening?
Vendor-specific selectors such as -moz-linear-gradient are not part of the official CSS2 specification, so when the validator finds then, it will throw an error. Personally, I don't mind if stuff like this doesn't validate - it's only a nice, cleanly written gradient.
Related
The code is as follows:
.home-feat2 {
background-color: stencilColor("color-greyLight");
img {width: 10rem;}
margin-bottom: spacing("single");
#include breakpoint("medium") {
margin-bottom: 3rem;
}
}
Expected declaration to come before rule - order/order points to the line with margin-bottom: spacing("single"); however I tried looking up what this error meant but I can't find a lot of descriptive documentation on stylelint. Maybe it's because I just don't understand the terminology, but I'm having trouble finding anything on this subject. Any help is appreciated.
Your linters expects you to write declarations before rules.
In CSS, a declaration is the key-value pair of a CSS property and its value, like margin-bottom: spacing("single").
See a visual representation of a declaration block.
A rule is the block defined by one or multiple selectors, containing declarations, like: img { width: 10rem; }.
See a visual representation of a rule set.
What it means for you, it means that you should probably write the rule img {} after the declarations:
.home-feat2 {
background-color: stencilColor("color-greyLight");
margin-bottom: spacing("single");
#include breakpoint("medium") {
margin-bottom: 3rem;
}
img {width: 10rem;}
}
This specific rule purpose is to allow an easy to read code.
When applied, you can see at the first glance that background-color and margin-bottom are applied to .home-feat2 and width is applied to img.
edit: added some additional informations thanks to jeddy3
Let's assume I have something like the following:
<v-app>
<div :class="getCustomCss">Blah</div>
<v-app>
getCustomCss() {
return $this.vuetify.theme.dark ? 'whenThemeIsDark' : 'whenThemeIsLight';
}
<style>
.whenThemeIsDark {
border:1px solid white;
}
.whenThemeIsLight {
border:1px solid black;
}
</style>
What would be the best way to change the color of the divs border when toggling between light/dark themes?
Do I sit and watch the $this.vuetify.theme.dark property and manually change the border from the myDarkClass to myWhiteClass similar to what's shown above? Or do I somehow use the customProperties feature in the theme/options to do this (and how?). Or is there a better way of doing this I'm unaware of?
This is a simple example which only requests the css to change in one spot, but a real application may have tons of custom css on different pages that would keep needing checks like this. I could easily see that getting messy if there are watchers/checks everywhere.
I have read the https://vuetifyjs.com/en/customization/theme page and I have a feeling the Custom Properties section may be the key, but I'm not quite getting how to translate my example to their example.
A css class of theme--light or theme--dark is applied to the v-app v-application which will identify which theme is active for you without additional watchers.
Using your simplified example:
<style>
.v-application.theme--light {
border:1px solid white;
}
.v-application.theme--dark{
border:1px solid black;
}
</style>
How to easily format fragments of code like the one below in PhpStorm?
before:
$some-var-1: 0;
$some-longer-name: 1px solid true;
$some-variable: 3px;
.className {
border: $some-longer-name;
padding : $some-variable;
}
after:
$some-var-1 : 0;
$some-longer-name: 1px solid true;
$some-variable : 3px;
.className {
border: $some-longer-name;
padding: $some-variable;
}
As you can see variable assignments are formatted in one way and the rest of the code in another way.
By default I can set auto formatting so it formats like it's .className but how can I make PhpStorm so the variables format in the way shown in the second example? It would be best if I could format all cases in one file at once.
Currently it's not possible.
https://youtrack.jetbrains.com/issue/WEB-9211 -- watch this ticket (star/vote/comment) to get notified on any progress.
I'm using SASS's handy ampersand notation to add BEM-style modifiers to my classes:
.box {
display: inline-block;
width: 100px;
height: 100px;
background: magenta;
&--selected {
background: cyan;
}
}
I'm exploring the possibility of only having to apply a single class to my elements (ex: <div class="box--selected">...</div> as opposed to <div class="box box--selected">...</div>). I'd like to avoid using #extend, it casts too wide a net. Currently I'm using mixins, which are good, but a little verbose to use for every single class with a modifier.
What I'd really like to do is get &--selected to inherit all the properties from the parent enclosure, and only from the parent enclosure - ie ignore any other class definitions of .box that careless devs may have inserted.
I know you've expressed the desire to avoid #extend but this method may allow you to avoid other dev's definitions of .box while still achieving your goal.
You could use placeholders to create your own parent enclosure and extend the placeholder(example of placeholder extension) inheriting only from the placeholder. As a placeholder there is no chance of conflicts with classes from other devs on .box:
%box{
display: inline-block;
width: 100px;
height: 100px;
background: magenta;
}
.box--selected{
#extend %box;
background: cyan;
}
Compared to mixins this method lacks the use of parameters like the following example from the article mentioned above [1]:
#mixin padMasterJ ($param: 10px) {
padding: $param;
}
Another thing worth noting is that when #extend is used on a parent selection the result will include all nested selectors #extend cannot be used to directly extend a nested selector.
I want to make new gnome-shell theme which now the theming is lack of documentation yet.
Please look on the image below,
I want to get rid of the border-bottom (likely). And I tried in several ways and just change other element, not the one I mean.
Here, I try to manipulate element with .panel-button class,
.panel-button {
border: 1px solid #ff0;
}
.panel-button:active,
.panel-button:checked,
.panel-button:focus,
.panel-button:hover,
.panel-button:overview {
border: 1px solid #ff0;
}
But nope, it produce unexpected result.
It's a strange way, but I myself found by looking inside gnome-shell-viva-theme source.
We can use gradient with the same color,
.panel-button:active,
.panel-button:checked,
.panel-button:focus,
.panel-button:hover,
.panel-button:overview {
background-gradient-direction: vertical;
background-gradient-start: $bg-color;
background-gradient-end: $bg-color;
}
It is not a perfect answer, still looking the better one.
The property must to be changed is a box-shadow property.
#panel .panel-button:active,
#panel .panel-button:overview,
#panel .panel-button:focus,
#panel .panel-button:checked {
box-shadow: none;
}