Due to the nature of using BEM in the project I am working on, I find myself and others using the following in our CSS files:
[class*="something"] { ... }
[class*="__something-else"] { ... }
[class*="--other-stuff"] { ... }
[class*="more-things"] { ... }
[class*="__even-more"] { ... }
Is there an advisable workaround to shorten the above to prevent tedious repetition of the word class, or should we stick by this method?
You need to use preprocessor like LESS or SCSS/Sass.
I use SCSS to demonstrate your idea.
By using #mixin and #content, you can create a class selector's generator function:
#mixin contain($name) {
[class*=#{$name}] {
#content;
}
}
Create a new contain selector:
#include contain(--big) {
font-weight: bold;
font-size: 50px;
}
https://jsfiddle.net/twxia/pLy3bz44/2/
This seems not shorter than only typing [class*=...], but if you use Sass you can generate the #mixin like this:
+contain(--big)
font-weight: bold
font-size: 50px
I think use autocomplete plugin for editor or Sass will sovle your problem :D
Related
I generally use this line of css to get a fluid grid for items with 20rem width:
'''
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
'''
Can i use css utility classes to do this oris there any way to extend it so that it can do this ?
There's no utility class that can do this. If you wanted to extend Tailwind and add a custom utility class for grid-template-columns, you could add something like this in your tailwind.config.js:
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'fluid': 'repeat(auto-fit, minmax(20rem, 1fr))',
}
}
}
}
You could then use the class grid-cols-fluid.
I am trying to edit the css of a tree view model (list store), I have set everything up using this code and it works perfectly:
auto css_provider = Gtk::CssProvider::create();
css_provider->load_from_path("style.css");
Gtk::StyleContext::add_provider_for_screen
(Gdk::Screen::get_default(), css_provider,
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
This code successfully loads in the css file and I can change certain properties of the treeview, ive tested padding and that works fine, it applies padding to each row in the liststore:
treeview.view {
padding: 20px;
}
or
treeview * {
margin: 10px;
}
But if I try to reference the name of the treeview, it doesn't work (no errors or warnings):
#m_TreeView { /* or m_TreeView.view */
padding: 20px;
}
My main goal is to apply a margin between each row, but this also doesn't seem to work (no errors or warnings), I want to apply a margin to each row but reference the specific name of the tree view as I would have multiple tree views in my application:
treeview.view {
margin: 20px;
}
Tried to access the rows and tried to access the list stores children (*):
treeview row {
margin: 10px;
}
+
liststore * {
margin: 10px;
}
But if I try to reference the name of the treeview, it doesn't work (no errors or warnings):
The name you need is not the variable name. To give a name for CSS styling, you can set it by calling
void Gtk::Widget::set_name ( const Glib::ustring & name )
I have been asked if I can modify my oracle apex interactive grid to make the row selector column wider, bold and add a title is possible. I know how to do this for a column but I am not sure it is possible for an interactive grid row selector. Any help or an example would be helpful.. Thank you
Wow, this was a tricky one. I think I've figured it out (many thanks to John Snyders!). Assuming the IG has an id of 'emp', the following should work:
Add the following CSS to the page's Inline property under CSS. This will handle the styling of the checkbox, the checkmark in the checkbox, and it will show the column's header which is hidden by default. You can remove the #emp selector if you want to target all IGs on a page.
/* Style the box */
#emp .u-selector {
border: 2px solid #000;
padding: .5px;
}
/* Style the check in the box */
#emp .u-selector:before {
font-weight: 900;
color: #000;
}
/* Show the row selector column header */
#emp .a-GV-headerLabel {
position: relative;
}
#emp .a-GV-table th {
white-space: normal;
}
Next, add the following JavaScript code to the page's Execute when Page Loads property under JavaScript.
var igRegionId = 'emp';
var widgetInst = apex.region(igRegionId).call('getViews').grid.view$.data('apex-grid');
var orgRefresh = widgetInst.refresh;
widgetInst.refresh = function() {
orgRefresh.call(widgetInst);
$('.u-vh.a-GV-headerLabel').text('Hello World!');
};
widgetInst.refresh();
Finally, add the following JavaScript to the IG region > Attributes > JavaScript Initialization Code. This will resize the column as needed:
function(config) {
config.defaultGridViewOptions = {
rowHeaderWidth: 100
};
return config;
}
I have already tried to use disabled and !enabled but it doesn't work.
Here is my QSS code :
QPushButton {
background-color:#44c767;
border-radius:5px;
border:1px solid #18ab29;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
text-decoration:none;
padding-right:10px;
outline: 0;
}
QPushButton:hover:!pressed {
background-color:#54d777;
}
QPushButton: pressed {
background-color:#30b252;
}
QPushButton: disabled {
background-color:#ff0000;
}
QPushButton: !enabled {
background-color:#ff0000;
}
The documentation refers to a disabled pseudo state but without providing more information about it.
Edit
I am using QT5.3
Remove all spaces after colons (really ALL - because it invalidates the further css text) and it will work:
QPushButton:disabled {
background-color:#ff0000;
}
Actually, both disabled and !enabled works.
CSS
.horizontalTranslate {
-webkit-transition: 3s;
}
.secondClass {
background: red;
}
HTML
<div class='box'></div>
JS
var box = document.querySelector('.box');
box.addEventListener('webkitTransitionEnd', function(evt) {
alert('Finished transition!');
}, false);
function transitionBox() {
// this works
box.className = 'horizontalTranslate';
// this does not work
// box.className = 'secondClass horizontalTranslate';
}
setTimeout(transitionBox, 100);
Why does the transition event not fire when two classes are added rather than one? I've also tried chaining my CSS selector, a la .secondClass.horizontalTranslate { ... }.
The reason is that box.className = 'horizontalTranslate'; is actually removing styling, causing the CSS transition to actually happen. But when I set box.className = 'secondClass horizontalTranslate';, the styling of the DOM node is not changing and no event is fired.
Another way to write transitionBox is this:
function transitionBox() {
box.classList.add('horizontalTranslate');
box.classList.add('blue');
}
If blue changes the styling of box, this works too.