I've been trying to customize React-select elements but they are all getting these "css-xxx" prefixes as such :
class="user-select css-b62m3t-container"
I dont know where thats coming from (could be Next.js) and I have been asked to modify theses elements using classes but not using those hashes. I've tried this (user-select is my AsyncSelect className):
.user-select {
.control {
border-radius: 0.375rem !important;
border: 1px solid #d2ddec;
}
.control:focus {
border-radius: 0.375rem !important;
border: 1px solid #d2ddec;
}
}
and this aswell :
.user-select {
&__control {
border-radius: 0.375rem !important;
border: 1px solid #d2ddec;
&--is-focused {
border-radius: 0.375rem !important;
border: 1px solid #d2ddec;
}
}
as described here How to style react-select options but I have not managed to modify these css properties other than by giving the "css-hash" class names in my scss file.
I would appreciate if you guys could help me understand where these hashes are coming from and what am I doing wrong.
Thanks in advance !
Those hash classes are CSS-in-JS classes created by #emotion, and part of the core library. You use the style override functions to create additional component styles or add additional classes to individual components.
Related
By default, CK-Editor adds the resetting CSS classes like ".ck-reset":
.ck.ck-reset, .ck.ck-reset_all, .ck.ck-reset_all * {
margin: 0;
padding: 0;
border: 0;
background: transparent;
text-decoration: none;
vertical-align: middle;
transition: none;
word-wrap: break-word;
}
What if I don't wish these classes? Which option is corresponding to disabling of CSS resetting classes?
There are a few ways you can try to solve this (copied from the GH issue below):
A custom PostCSS plugin that replaces all .ck-reset statements with :not(.some-component) .ck-reset to disable CKEditor 5 reset in your component.
Package.json level script that replaces the _reset.css files with your own css file with the not(.some-component)
Wait for the issue to be resolved, per - https://github.com/ckeditor/ckeditor5/issues/3424
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 am using the built in Laravel 5.2 pagination with the ->render() function to output the pagination links. I need to add a class to the next and previous links in order to style them. Is there a simple way to do it?
If you want to change pagination links style just a little bit (for example, just change some colors), easiest way to do that is overriding some of the pagination related CSS classes. For example, you can add this code to your CSS file and see how links style will be changed:
.pagination>li>a, .pagination>li>span {
color: #6db91c;
border: 1px solid #000;
}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
color: #fff;
background-color: #6db91c;
border-color: #6db91c
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
z-index: 2;
color: #fff;
background-color: #6db91c;
border-color: #6db91c
}
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
color: #000; background-color: #fff; border-color: #000; cursor: not-allowed
}
If you don't want to do that for some reason, you can create custom pagination.
for front end css framework like i use bulma i simply create jQuery Dom select pagination child li and add class pagination-link example
$(document).ready(function(){
// Setting Pagination Bulma Class
$('.pagination>li').addClass("pagination-link");
});
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;
}
In Sass, I can't quite discern the difference between using #include with a mixin and using #extend with a placeholder class. Don't they amount to the same thing?
Extends do not allow customization, but they produce very efficient CSS.
%button
background-color: lightgrey
&:hover, &:active
background-color: white
a
#extend %button
button
#extend %button
Result:
a, button {
background-color: lightgrey;
}
a:hover, button:hover, a:active, button:active {
background-color: white;
}
With mixins, you get duplicated CSS, but you can use arguments to modify the result for each usage.
=button($main-color: lightgrey, $active-color: white)
background-color: $main-color
border: 1px solid black
border-radius: 0.2em
&:hover, &:active
background-color: $active-color
a
+button
button
+button(pink, red)
Results in:
a {
background-color: lightgrey;
border: 1px solid black;
border-radius: 0.2em;
}
a:hover, a:active {
background-color: white;
}
button {
background-color: pink;
border: 1px solid black;
border-radius: 0.2em;
}
button:hover, button:active {
background-color: red;
}
Please follow this consecutive set of code examples to see how you can make your code cleaner and more maintainable by using extends and mixins effectively: http://thecodingdesigner.com/posts/balancing
Note that SASS unfortunately does not allow using extends inside media queries (and corresponding example from the above link is wrong). In the situation where you need to extend based on media queries, use a mixin:
=active
display: block
background-color: pink
%active
+active
#main-menu
#extend %active // Active by default
#secondary-menu
#media (min-width: 20em)
+active // Active only on wide screens
Result:
#main-menu {
display: block;
background-color: pink;
}
#media (min-width: 20em) {
#secondary-menu {
display: block;
background-color: pink;
}
}
Duplication is inevitable in this case, but you shouldn't care too much about it because web server's gzip compression will take care of it.
PS Note that you can declare placeholder classes within media queries.
Update 2014-12-28: Extends produce more compact CSS than mixins do, but this benefit is diminished when CSS is gzipped. If your server serves gzipped CSS (it really should!), then extends give you almost no benefit. So you can always use mixins! More on this here: http://www.sitepoint.com/sass-extend-nobody-told-you/
A good approach is to use both - create a mixin that will allow you lots of customisation and then make extends for common configurations of that mixin. For example (SCSS Syntax):
#mixin my-button($size: 15, $color: red) {
#include inline-block;
#include border-radius(5px);
font-size: $size + px;
background-color: $color;
}
%button {
#include my-button;
}
%alt-button {
#include my-button(15, green);
}
%big-button {
#include my-button(25);
}
This saves you from calling the my-button mixin over and over. It also means you don't have to remember the settings for common buttons but you still have the ability to make a super unique, one-off button should you choose.
I take this example from a blog post I wrote not long ago. Hope this helps.
In my opinion extends are pure evil and should be avoided. Here is why:
given the scss:
%mystyle {color: blue;}
.mystyle-class {#extend %mystyle}
//basically anything not understood by target browser (such as :last-child in IE8):
::-webkit-input-placeholder {#extend %mystyle}
The following css will be generated:
.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers
color: blue;
}
When a browser doesn’t understand a selector, it invalidates the entire line of selectors. This means that your precious mystyle-class is no longer blue (for many browsers).
What does this really mean? If at any time you use an extend where a browser may not understand the selector every other use of the extend will be invalidated.
This behavior also allows for evil nesting:
%mystyle {color: blue;}
#mixin mystyle-mixin {#extend %mystyle; height: 0;}
::-webkit-input-placeholder {#include mystyle-mixin}
//you thought nesting in a mixin would make it safe?
.mystyle-class {#extend %mystyle;}
Result:
::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers
color: blue;
}
::-webkit-input-placeholder {
height: 0;
}
Tl;dr: #extend is perfectly ok for as long as you never use it with any browser spesific selectors. If you do, it will suddenly tear down the styles wherever you have used it. Try to rely on mixins instead!
Use mixins if it accepts a parameter, where the compiled output will change depending on what you pass into it.
#include opacity(0.1);
Use extend (with placeholder) for any static repeatable blocks of styles.
color: blue;
font-weight: bold;
font-size: 2em;
I totally agree with the previous answer by d4nyll. There is a text about extend option and while I was researching this theme I found a lot of complaints about extend, so just have in mind that and if there is a possibility to use mixin instead of extend, just skip extend.