I want to change design of this particular scrollbar which is commonly used by all in the application. But on this particular page we don't want that.
Code for default CSS:
div::-webkit-scrollbar-thumb {
background-color: #216e7a;
width: 6px;
height: 69px;
border-top: 1px;
border-top-color: #394245;
border-top-style: solid;
}
I want to change it using emotion/css so far I did this but nothing is happening,
const noScrollBar = css
div::-webkit-scrollbar-thumb {
background-color:red,
width:20%,
overflow: scroll;
}
;
<div className={noScrollBar} > ....
Any suggestions, I am new to CSS selectors
You can create a css module with the styling:
.myClassName {
overflow: hidden;
overflow-y: scroll;
width: 200px;
height: 200px;
}
.myClassName::-webkit-scrollbar {
background: silver;
width: 10px;
}
.myClassName::-webkit-scrollbar-thumb {
background:red;
}
Then import it in your code:
import myStyles from './my-styles.module.css'
<div className={myStyles.myClassName} > ....
You can also use a simple css (not module):
import './my-styles.css'
<div className={'myClassName'} > ....
Related
I'm trying to use a mixin with an argument and inside a placeholder.
The idea is to use one line of code to select a specific placeholder in a class.
Actually, I don't know if there is another better way to do that, maybe with a function or other.
I'm learning Sass, so I'm trying to experiment.
HTML
<div class='wrap'>
<div class='box'></div>
<div class='box'></div>
</div>
SCSS
// VAR
$size-xs: 30px;
$size-s: 50px;
$size-m: 70px;
$color-1: orange;
$color-2: rgb(34,139,86);
#mixin box($val) {
%box-one {
width: $size-s;
height: $size-s;
background: $color-1;
margin: auto;
border-radius: 6px;
}
%box-two {
width: $size-s;
height: $size-s;
background: $color-2;
margin: auto;
border-radius: 6px;
}
.box {
#extend #{$val} !optional;
}
}
.wrap {
width: 100%;
height: 100px;
background: #f5f5f5;
display: flex;
justify-content: space-between;
#include box(box-one);
}
thank you!
Currently, your code is not working because your forgot to put a % before #{$val}:
.box {
#extend %#{$val} !optional;
}
Anyhow, it's not a good idea to put placeholder selectors inside a mixin because every time the mixin is called, you are creating new selectors. It means that for example if you add:
.randomSelector {
#include box(box-one);
}
You will get:
.wrap .box { ... }
.randomSelector .box { ... }
Instead of:
.randomSelector .box, .wrap .box { ... }
So I would recommend you to externalize %box-one and %box-two.
One last thing, if the only difference between these two classes is the background property, maybe using a single class regrouping the commons properties would be a better optimization:
.box {
width: $size-s;
height: $size-s;
margin: auto;
border-radius: 6px;
}
%box-one {
background: $color-1;
}
%box-two {
background: $color-2;
}
#mixin box($val) {
.box {
#extend %box-#{$val} !optional;
}
}
.wrap {
width: 100%;
height: 100px;
background: #f5f5f5;
display: flex;
justify-content: space-between;
#include box(one);
}
If you have more box styles you can even dynamically create the placeholders:
$boxStyles: (
one: $color-1,
two: $color-2
);
#each $box, $style in $boxStyles {
%box-#{$box} {
background: $style;
}
}
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;
}
Using SCSS and have a nested element which I am trying to nest an nth-of-type() rule into but it hasn't worked anyway I type it. I want every odd el_header element to be white text and every even one to be black.
.el {
height: 500px;
width: 500px;
&_header {
height: 100%;
width: 10%;
background: #555;
display: inline-block;
line-height: 500px;
text-align: center;
&nth-of-type(odd) {
color: black;
}
&nth-of-type(even) {
color: white;
}
}
}
DEMO
You just forgot the : after &.
Use
&:nth-of-type(odd){...}
&:nth-of-type(even){...}
and it will work.
See updated fiddle
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.
In the most recent dompdf release (domdpf beta 2), inline php was disabled for security reasons. This, in turn, caused the previous footer/header code:
<script type="text/php">
if ( isset($pdf) ) {
$font = Font_Metrics::get_font("helvetica", "bold");
$pdf->page_text(72, 18, "Header: {PAGE_NUM} of {PAGE_COUNT}", $font, 6, array(0,0,0));
}
</script>
To no longer work.
I'm now trying to re-create what this script did using CSS. So far, I've figured out how to get CSS to count the pages:
.pagenum:before { content: counter(page); }
The issue I'm having is sticking the footer to the bottom of the page. Most CSS tutorials on how to do this do not seem to be working. Here's the css for my page:
html,body {
font-family:interstate;
height:100%;
width:100%;
overflow:auto;
margin-left: 40px;
margin-right: 40px;
margin-top: 20px;
margin-bottom:40px;
min-height: 100%;
}
P.breakhere {page-break-before: always}
table
{
border-collapse: collapse;
page-break-inside: avoid;
font-size:15px;
}
td
{
border: 1px solid #000
}
.noBorder {
border: 0
}
#header {background:#ffffff url('gradient.png') no-repeat center center;
height: 100px;
}
#text {
position:relative;
text-align:center;
padding:10px;
}
.pagenum:before { content: counter(page); }
My hope is someone can provide me the appropriate #footer bit, so my footer text will properly stick to the bottom of the page.
Thank you!!
Inline script is disabled by default, but if you feel you are not vulnerable to any security problems you can safely re-enable it by setting DOMPDF_ENABLE_PHP to true.
To create a header/footer using HTML+CSS you would use a fixed-position element.
CSS
#footer {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 100px;
text-align: center;
background-color: lightgray;
border-top: 2px solid gray;
}
.pagenum:before {
content: counter(page);
}
HTML
<div id="footer">
<p>page <span class="pagenum"></span></p>
</div>
The main drawback to the HTML+CSS method is that there is currently no way to get the total number of pages using this method.