First - sorry for the title - if you have a better suggestion as to what it should be named then please let me know.
I'm not sure if this is possible in the CSS hierarchy.
I have multiple elements and each one can have a .show class added to it, to show the the content.
I'd like to set a rule, so if the .show class has been added - any of the same element without (.show) it are then hidden.
My current not working attempt is to use:
.team_item {
display: grid;
&.show {
&:not(.show){
display: none;
}
}
So the logic would be:
element - should be visible
element + show class - element & inner content visible
element + show class - all elements without the show class should be hidden (display: none).
But I think I am trying to go back up the hierarchy in the CSS (scss).
Any help would be great.
Note: I'm fully aware that I can write JS to tackle this issue but was looking for a css (scss) solution.
I believe it needs to be along those lines:
$team-item-display:'block';
.wrapper {
#function hideElement() {
$team-item-display:'none';
#return 0;
}
&.show{
hideElement()
}
&:not(.show){
display:$team-item-display;
}
}
The direction of the solution is in calling a function that will set a different value of a variable that elements with no .show class use.
I havent tested the code. Hopefully it works.
Related
I've an element I want to style only if it's got two classes applied to it:
custom-select-value--companies
and
custom-select-value--companies-disabled
It's actually the pseudo element I want to style, and the following css works:
.custom-select-value--companies.custom-select-value--companies-disabled::after { // Styles }
It's probably very simple, but I was just struggling to translate that to sass and was hoping someone could help? The following doesn't work:
.custom-select-value {
&--companies.&--companies-disabled::after {
// Styles
}
}
Also, just wondered as I was writing this - what's the main element of a pseudo element called? "Parent" doesn't seem quite right?
Thanks
Managed to get it working by typing the second selector out in full:
.custom-select-value {
&--companies.custom-select-value--companies-disabled::after {
// Styles
}
}
I'm trying to target an element by ID somewhere within an element which I have successfully targeted.
So this is the actual working CSS now:
#parentElement>div>div>div>#childElement {
display: none;
}
I'm sure I must be having a bad day but what I really want to do, to make it a little more robust is just write CSS (not jQuery or JavaScript) to do the following:
for all #childElement within #parentElement apply { display: none; }.
Is this a straightforward bit of CSS?
If you want all #childElement within #parentElement apply { display: none; }
just write
#parentElement #childElement { display: none; }
It will be enough.
But you should knew, id recommended to bu unique, used only once per page. Use class instead for children.
I'm working on an AngularJS project with the aim of slowly getting things in order for Angular 6, or whatever version is out when we start on the upgrade. One of the big pieces of that work is converting existing directives into components.
The thing I'm struggling the most with, is that every instance of a component introduces an extra element into the DOM that wraps my actual component HTML and breaks the hierarchy, making it very hard to write CSS that does what it needs to.
To illustrate my dilemma, imagine a simple component called alert that provides styling for various types of messages you want a user to pay attention to. It accepts two bindings, a message and a type. Depending on the type we will add some special styling, and maybe display a different icon. All of the display logic should be encapsulated within the component, so the person using it just has to make sure they are passing the data correctly and it will work.
<alert message="someCtrl.someVal" type="someCtrl.someVal"></alert>
Option A: put styling on a <div> inside the extra element
Component template
<div
class="alert"
ng-class="{'alert--success': alert.type === 'success', 'alert--error': alert.type === 'error'}">
<div class="alert__message">{{alert.message}}</div>
<a class="alert__close" ng-click="alert.close()">
</div>
Sass
.alert {
& + & {
margin-top: 1rem; // this will be ignored
}
&--success {
background-color: green; // this will work
}
&--error {
background-color: red; // this will work
}
}
This works fine as long as the component is completely ignorant of everything around it, but the second you want to put it inside a flex-parent, or use a selector like "+", it breaks.
Option B: try to style the extra element directly
Component template
<div class="alert__message">{{alert.message}}</div>
<a class="alert__close" ng-click="alert.close()">
Sass
alert {
& + & {
margin-top: 1rem; // this will work now
}
.alert--success {
background-color: green; // nowhere to put this
}
.alert--error {
background-color: red; // nowhere to put this
}
}
Now I have the opposite problem, because I have nowhere to attach my modifier classes for the success and error states.
Am I missing something here? What's the best way to handle the presence of this additional element which sits above the scope of the component itself?
I personally do option A. This allows you to easily identify and create specific styles for your components without fear that they will overwrite site-wide styles. For instance, I'll use nested styles to accomplish this:
#componentContainer {
input[type=text] {
background-color: red;
}
}
This will allow you to make generic styles for your component that won't spill out into the rest of your solution.
Just created a registration form, and I want to extend a label text to be shown into one line. With CSS inspector found that class is:
.rmagic .rmrow .rmfield label
and when I insert:
width: 600px;
It is working fine, but extends all other fields as well, and I just need the last one. I set a custom class to that field, called posledno but when I insert it into my custom CSS:
rmfield.form_1_1-element-18.posledno label {
widht:600px;
}
It doesn't make any changes. How to extend this field ? Page example at the bottom.
and I just need the last one
Since you need the last-child of an element, you're better off using the :last-child selector.
Here is what would work:
#rm_form_page_form_1_1_1 .rmfieldset .rmrow:last-child .rmfield label {
width: 600px;
background-color: #f00; /** for easier identification */
}
Although I would recommend using % instead. (relative to the parent element unit)
i try to hide several polymer elements on a certain element condition. I'm aware that there are several possibilities. In my opinon the easiest way to do this is to introduce a new CSS class
.invisible {
display: none;
}
and add it to the class list of the polymer elements
this.$.icon.classList.add('invisible');
this.$.text.classList.add('invisible');
this.$.button.classList.add('invisible');
But this has no effect on the elements. The elements are still visible. A look into the elment inspector shows, that the class was added:
class="style-scope parent-elem invisible"
Where parent-elem is the name of the parent element.
Can anyone explain me why the element will not be hidden?
Thank you
Best Regards,
Meisenmann
you can easly manipulate on your elements with parent property. Try in your element properties add property
properties: {
...
elementsVisible: {
type: Boolean,
value: true
}
...
}
then in your method manipulate this property and in html component set
<element hidden="[[!elementsVisible]]" ></element>
ps. if this wont work you can add in parent css
[hidden] {
display: none;
}
sometimes polymer elements need special mixins to customize their css, but hidden usually works :)