I want to style QScrollBar to look like this without the indicators in the end
I tried with the stylesheets:
QScrollBar::up-arrow:vertical, QScrollBar::down-vertical
{
border: none;
background: none;
color: none;
}
But this hides the indicator arrow not the 2 buttons at the end
You can use something like this:
QScrollBar:vertical {
background: #2f2f2f;
width: 15px;
margin: 0;
}
QScrollBar::handle:vertical {
background: #5b5b5b;
}
QScrollBar::add-line:vertical {
height: 0px;
}
QScrollBar::sub-line:vertical {
height: 0px;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
height: 0px;
}
The classes you were looking for are add-line, sub-line, add-page and sub-page. Since they support the box-model, you can just set their height to 0 to make them disappear.
The code above was tested with Qt 5.9.
Related
I'm trying to merge the style into one class but its showing an error. Look at the example below.
%banner-style{
banner {
padding: 140px 0 210px;
background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
&.row {
margin: 0;
}
.main-heading {
font-size: 40px;
letter-spacing: -1px;
font-weight: 600;
padding-right: 20px;
sup {
font-size: 10px;
vertical-align: super;
}
}
}
}
And I want it to merge with the parent class .parent
.parent{
color: red;
&_#extend %banner-style;
}
using & to merge into one class name. but showing error unless i do this
.parent{
color: red;
&_{#extend %banner-style};
}
Which is same as if I remove &_.
I wanted .parent_banner {...} but instead got .parent_ banner{...};
Does anyone know how I can accomplish this?
You are getting exactly what is supposed to happen. Extend does not "merge" classes, it extends another class/placeholder into a new selector's styles.
What that means is if I write:
%banner-style {
background: black;
}
.parent {
#extend %banner-style;
}
.other-selector {
#extend %banner-style;
color: red;
}
The css I get will be
.parent {
background: black;
}
.other-selector {
color: red;
background: black;
}
So you are getting expected results. If you'd like to make this "work" the way you want, you can just change your code to:
%banner-style {
padding: 140px 0 210px;
background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
&.row {
margin: 0;
}
.main-heading {
font-size: 40px;
letter-spacing: -1px;
font-weight: 600;
padding-right: 20px;
sup {
font-size: 10px;
vertical-align: super;
}
}
}
.parent{
color: red;
&_banner {
#extend %banner-style;
};
}
Note: I took out the banner block because it seems you don't want that (and banner isn't a normal html element).
I'm having problems finding the magic sauce here.. It doesn't look like the API supports it, so I guess I'm looking for some CSS to make the slider bigger.
I am getting the one on the left, but I would like to style it like the one on the right? Any CSS tricks or has anyone done this before.
Specifically the height of the 'bar'.
there are a million things set to height: 2px. i tried upping all of them but nothing changed.. i guess maybe it's a border or something else?
Thanks in advance!
StackBlitz:
https://stackblitz.com/angular/kkmmddyaegp?file=app%2Fslider-overview-example.css
(Thanks #Andriy)
You can try to add this CSS to global style:
.mat-slider.mat-slider-horizontal .mat-slider-wrapper {
top: 18px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
height: 12px;
border-radius: 10px
}
.mat-slider.mat-slider-horizontal .mat-slider-track-background,
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
height: 100%;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
background-color: blue;
}
.mat-accent .mat-slider-thumb {
height: 30px;
width: 30px;
background-color: white;
border: solid 2px gray;
bottom: -20px;
right: -20px;
}
.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
background-color: white;
}
STACKBLITZ
if you need to have these styles in any component's CSS file with default encapsulation, just add ::ng-deep before each CSS rule (but be aware of its long going deprecation, so check it with each new versions of Angular):
::ng-deep .mat-slider.mat-slider-horizontal .mat-slider-wrapper {
top: 18px;
}
::ng-deep .mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
height: 12px;
border-radius: 10px
}
...
if using SASS, just wrap your code with ::ng-deep
::ng-deep {
.mat-slider.mat-slider-horizontal .mat-slider-wrapper {
top: 18px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
height: 12px;
border-radius: 10px
}
...
}
Please note, that this way your CSS will affect global CSS scope.
The most direct solution is probably to use transform. Something like:
my-slider {
transform: scale(2);
}
See MDN for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
This works for me
.mat-slider-thumb {
background-color: #3f51b5 !important;
border: none !important;
box-shadow: 0px 0px 15px #000;
outline: 5px solid #fff;
}
.mat-slider-track-fill {
background-color: #3f51b5 !important;
}
.mat-slider-track-fill,
.mat-slider-wrapper,
.mat-slider-track-wrapper,
.mat-slider-track-background {
height: 10px !important;
border-radius: 10px;
}
Demo: STACKBLITZ
Just overwrite mat css with this
.mat-slider-track-fill,
.mat-slider-wrapper,
.mat-slider-track-wrapper,
.mat-slider-track-background {
height: 5px !important;
}
this works for me
:root {
--slider-height: 28px;
}
.mdc-slider .mdc-slider__tick-marks {
height: var(--slider-height);
}
.mdc-slider .mdc-slider__track--inactive,
.mdc-slider .mdc-slider__track {
height: calc(var(--slider-height) - 2px);
}
.mdc-slider .mdc-slider__track--active {
height: var(--slider-height);
}
.mdc-slider .mdc-slider__track--active_fill {
height: var(--slider-height);
border-top-width: var(--slider-height);
}
.mdc-slider .mdc-slider__thumb-knob {
height: calc(var(--slider-height) + 9px);
width: calc(var(--slider-height) + 9px);
}
with the latest migration to material web components you can customize the respective css variables e.g. like that:
:root {
--mdc-slider-inactive-track-height: 2px;
--mdc-slider-active-track-height: 4px;
}
I have added the css from the github comments but there is still something wrong. everything in the calendar is not sized correctly.
.datepicker.dropdown-menu {
width: 250px;
height: 250px;
}
.datepicker.dropdown-menu button {
outline: none;
border: 0px;
}
.datepicker.dropdown-menu tbody {
height: 180px;
}
.datepicker.dropdown-menu tbody button {
padding: 6px;
}
.datepicker.dropdown-menu.datepicker-mode-1 tbody button, .datepicker.dropdown-menu.datepicker- mode-2 tbody button {
height: 65px;
}
.timepicker.dropdown-menu {
padding: 0 4px;
}
.timepicker.dropdown-menu button {
outline: none;
border: 0px;
}
.timepicker.dropdown-menu tbody button {
padding: 6px;
}
make sure to include this css LAST so it does not get overwriten by another file or other css you typed
I've got some Sass I've inherited that looks like below. I want to be able to specify a CSS tag to differentiate between green and another color (see anchor tag and comment).
Now, I have-
<div class="names"></div>
The link shows green. I want to be able do something like-
<div class="names myblue"></div>
And instead have it be a different color.
&.SpeakerCount3 {
.names {
text-align: center;
li {
text-align: center;
display: inline-block;
width: 82px;
margin-left: 5px;
&:first-child {
margin-left: 0;
}
}
img {
max-width: 100%;
}
h3 {
margin-top: 0;
a {
font-size: 10px;
}
}
}
}
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
}
.description {
margin-bottom: 15px;
min-height: 120px;
h3 {
margin: 5px 0 20px 0;
min-height: 40px;
}
}
Having seen the HTML code that was being hidden in your question, I should say that good class names generally should relate to state rather than properties - so the class name "myblue" should probably be replaced with something like "featured", "highlighted" etc. This is especially the case where you are asking for "myblue" to actually change the colour to Orange - something that may well confuse future maintainers. In the case that "myblue" is a company or feature name it may well be legitimate, but I would consider carefully if there is an alternative class name which does not include a colour name.
In Sass you could do something like-
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
.myblue & {
color: orange;
}
}
As the "a" selector is contained within the ".names" selector though, this will result in a rendered rule of-
.myblue .names a {
color: orange;
}
As "names" is not a descendant of "myblue" in your DOM, the selector will not match - and this isn't what you want.
If you only want the rule to apply where both "names" and "myblue" are present I would write this-
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
&.myblue {
a {
color: orange;
}
}
}
The ampersand produces a combined selector, rather than the descendant selector you would get with a space (this is Sass only - not valid CSS).
Alternatively, if you want the "myblue" class selector to apply even without the "names" class, then simply do this-
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
}
.myblue {
a {
color: orange;
}
}
As the "myblue" selector appears after the "names" selector, the color property for the link will override the color set in "names" - leaving all other properties for the link and other elements intact. This solution simply utilises the CSS cascade to achieve the desired effect.
I have a class for a button:
.client-header button {
/*Properties*/
}
and a class to detect when the menu is open:
.client-menu-open {
/*Properties*/
}
I would like to change the button background based on whether or not the menu is open. I want something like this:
.client-header button .client-menu-open {
/*Properties*/
}
But the classes are in two different files, so it doesn't work. Is there any way to do this across different files?
Here is the code for the header index.css:
#import url('../menu/index.css');
.client-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
overflow: hidden;
border-bottom: 1px solid #7E7E7E;
background: #cccccc;
}
.client-header button {
float: left;
height: 100%;
border: none;
border-right: 1px solid var(--border-color);
border-radius: 0;
box-shadow: none;
line-height: 39px;
background-color: #444444;
color: #FFF;
}
.client-header button:hover {
background-color: #555555;
}
.client-header button:active {
background-color: #4E4E4E;
}
.client-header-caption {
float: left;
}
.client-header-title,
.client-header-subtitle {
margin-left: 10px;
}
.client-header-title {
line-height: 25px;
}
.client-header-subtitle {
font-size: 0.5rem;
line-height: 15px;
}
#media (min-width: 640px) {
.client-header-title,
.client-header-subtitle {
display: inline-block;
line-height: var(--header-height);
}
.client-header-title {
font-size: 1.5rem;
}
.client-header-subtitle {
font-size: 1rem;
}
}
.client-header .client-menu-open button {
background: #CCCCCC;
}
And here is the code for the menu index.css:
.client-menu {
position: absolute;
top: var(--header-height);
bottom: 0;
left: -var(--menu-width);
width: var(--menu-width);
border-right: 1px solid var(--border-color);
padding-bottom: var(--menu-footer-height);
overflow: hidden;
transition: left 0.2s;
}
.client-menu-open {
left: 0;
box-shadow: 0 0 30px var(--shadow-color);
background: #444444;
}
.client-menu-pinned {
box-shadow: none;
}
.client-menu-header {
height: var(--menu-header-height);
text-align: right;
background-color: #444444;
}
.client-menu-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: var(--menu-footer-height);
text-align: right;
}
And the HTML structure is:
<header class="client-header">
<button class="client-header-menu-toggle"/>
</header>
<div class="client-menu"/>
You can use #import like so (in your primary CSS stylesheet):
#import url('external.css');
/* external.css above will be loaded */
Refer to this documentation: http://www.cssnewbie.com/css-import-rule/
Link to the other file and style .client-menu-open
if this is your html
<div class="client-menu-open"> <!-- this class is here only if the menu gets opened, else, this div has no class -->
stuff
stuff
<div class="client-header-button">
<button></button>
</div>
</div>
the correct syntax is the following
button {
background:red;
}
.client-menu-open button {
background:blue
}
The #import rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.
To use the #import rule, type:
<style type="text/css">
#import url("import1.css");
#import url "import2.css";
</style>
For more info refer here https://developer.mozilla.org/en-US/docs/Web/CSS/#import
your CSS selector is incorrect, that's why it doesn't work. It has nothing to do with where CSS styles are defined.
.client-header button .client-menu-open will only select the following elements:
elements with class="client-menu-open"
which are children of button elements
which themselves are children of elements with class="client-header"
.
what you want, I think, is
button elements
which are children of elements having "class=client-header" AND "class=client-menu-open".
the proper selector for those elements would be .client-header.client-menu-open button.