I am new on CSS,
How should I define my CSS class for catch button's disabled state?
There is my CSS class but it didn't work.
.mbutton:disabled{
background: transparent;
}
EDIT
There is JSfiddle example,
http://jsfiddle.net/sefiktemel/v7h9gczu/
If you are using ExtJS this will not work. You will have to add a custom class to to your button and then change your CSS to work with ExtJS.
Button Definition
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
Ext.create('Ext.Button', {
text: 'Click me',
disabled: true,
renderTo: Ext.getBody(),
disabledCls : 'x-item-disabled mbutton', // this will add you mbutton class
handler: function() {
alert('You clicked the button!');
}
});
Class Definition
.mbutton {
background: transparent !important;
cursor: not-allowed;
}
.mbutton .x-btn-inner {
color: #666;
cursor: not-allowed;
}
Fiddle: https://fiddle.sencha.com/#fiddle/o93
Made even better.
.mbutton:disabled {
cursor: not-allowed;
background: transparent;
}
Here: http://jsfiddle.net/chtah59g/1/
You're on the right track.
<!DOCTYPE html>
<html>
<head>
<style>
button.mybutton:disabled { color: red;
background: blue;
}
</style>
</head>
<body>
<h1>Hello</h1>
<button class="mybutton" disabled>Click me</button>
<button class="mybutton" >Click me</button>
</body>
</html>
See http://plnkr.co/edit/3ZsqM8OHzcy7RogwBmwT?p=preview
Also, are you trying to add opacity?
<style>
button.mybutton:disabled {
color: red;
background: blue;
opacity: 0.4;
}
</style>
Related
I have written the code for getting the URL param value
export class RedirectingComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
this.activatedRoute.paramMap.subscribe(params=>
{
let color=params.get('color');
console.log(color);
if(color)
{
if(color=='red')
{
//So If the color is red then we should apply red.css
}
}
})
}
}
Here are the css files
red.css
.my-container{
height: 100%;
background-color: red;
}
blue.css
.my-container{
height: 100%;
background-color: red;
}
Here is the Main Page
<mat-toolbar color="primary">
<span class="mainheading">Theme Changing</span>
</mat-toolbar>
<div class="my-container">
<h1 class="sideheading">URL that entered are processed for Theme Changing of the Page</h1>
</div>
Now I have to use the param value like color and change the background to the color mentioned like if the color mentioned is red the background should change in to red.
Note:Their should be different CSS files
You can't control header tags by angular directives.
You can create style tags and import different files in them. then control them by *ngIf directive.
<style type="text/css" *ngIf="rule1">
#import 'path\to\file-1';
</style>
<style type="text/css" *ngIf="rule2">
#import 'path\to\file-2';
</style>
Guys I have found a solution for this question
import { ActivatedRoute } from '#angular/router';
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
this.activatedRoute.paramMap.subscribe(params=>
{
let color=params.get('color');
console.log(color);
if(color)
{
if(color=="red")
{
loadCss("assets/styles/red.css");
console.log("This should be able to change to red color background");
}
else if(color=='blue')
{
loadCss("assets/styles/blue.css");
console.log("This should be able to change to Blue color background");
}
else if(color=='green')
{
loadCss("assets/styles/green.css");
console.log("This should be able to change to Green color background");
}
}
function loadCss(filename:any)
{
var fileref=document.createElement("link");
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type","text/css");
fileref.setAttribute("href",filename);
if(typeof fileref!="undefined")
{
document.getElementsByTagName("head")[0].appendChild(fileref)
}
}
})
}
}
Main CSS Files
.mainheading
{
width: 100%;
text-align: center;
}
.sideheading{
padding-top: 20px;
color: white;
font-style:italic;
text-align:center ;
}
red.css
.my-container{
height: 100%;
background-color: red;
}
blue.css
.my-container{
height: 100%;
background-color: blue;
}
green.css
.my-container{
height: 100%;
background-color: green;
}
<mat-toolbar color="primary">
<span class="mainheading">Theme Changing</span>
</mat-toolbar>
<div id="theme" class="my-container" >
<h1 class="sideheading">
URL that entered are processed for Theme Changing of the Page
</h1>
</div>
Note:
Put the css files in assets/styles folder.
For getting the value from the url you should add the script in the app routing module
const routes: Routes = [
{
path:'redirecting/:color',component:RedirectingComponent
}];
I've created a custom css file that applies styles to the global scrollbar! But, I'd like to only show a dark scrollbar to users when $vuetify.theme.dark is set to true.
Is there a way that I can apply scrollbar css globally once that theme variable changes?
Here's my App.vue file
<template>
<v-app
id="inspire"
:style="{ background: $vuetify.theme.themes[theme].background }"
>
<header-bar />
<v-main>
<v-container fluid fill-height>
<keep-alive>
<router-view />
</keep-alive>
</v-container>
</v-main>
</v-app>
</template>
<script>
import HeaderBar from "./components/Navigation/HeaderBar.vue";
import store from "./store";
export default {
name: "App",
components: {
HeaderBar,
},
computed: {
theme() {
return this.$vuetify.theme.dark ? "dark" : "light";
},
},
store: store,
beforeCreate() {
this.$store.commit("initializeStore");
this.$vuetify.theme.dark = this.$store.state.DarkMode;
},
};
</script>
<style>
#import "./DarkScrollbar.css";
html {
overflow: auto !important;
}
.v-btn.theme--light.v-btn--has-bg:not(.primary):not(.success):not(.error) {
background-color: #ffffff;
}
</style>
In the above, I've created a computed variable "theme" to store the theme's name, which I believe I can place a watcher and trigger a function call on change.
Here's the contents of the DarkScrollbar.css file that I'm wanting to dynamically toggle!
/* Dark Scrollbar CSS */
::placeholder {
color: #b2aba1;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: #555b00 !important;
color: #e8e6e3 !important;
}
::-webkit-scrollbar {
background-color: #202324;
color: #aba499;
}
::-webkit-scrollbar-thumb {
background-color: #454a4d;
}
::-webkit-scrollbar-thumb:hover {
background-color: #575e62;
}
::-webkit-scrollbar-thumb:active {
background-color: #484e51;
}
::-webkit-scrollbar-corner {
background-color: #181a1b;
}
::selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
::-moz-selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
I've actually just fixed this myself. I'll post the answer here so that other folks might be able to use this too! Programatically adding and removing a class on the body element allows you to toggle scrollbar styling.
In my computed property, I just had to add the class based on Vuetify's selected theme.
computed: {
theme() {
const bodyElement = document.getElementsByTagName("body")[0];
if (this.$vuetify.theme.dark == true) {
bodyElement.classList = "darkScrollbar";
} else {
bodyElement.classList = "";
}
return this.$vuetify.theme.dark ? "dark" : "light";
},
},
In my custom CSS file that I import, I added body as well as the custom class to each ::webkit style rule.
body.darkScrollbar::placeholder {
color: #b2aba1;
}
body.darkScrollbar::-webkit-scrollbar {
background-color: #202324;
color: #aba499;
}
body.darkScrollbar::-webkit-scrollbar-thumb {
background-color: #454a4d;
}
body.darkScrollbar::-webkit-scrollbar-thumb:hover {
background-color: #575e62;
}
body.darkScrollbar::-webkit-scrollbar-thumb:active {
background-color: #484e51;
}
body.darkScrollbar::-webkit-scrollbar-corner {
background-color: #181a1b;
}
body.darkScrollbar::selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
body.darkScrollbar::-moz-selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
body.darkScrollbar input:-webkit-autofill,
body.darkScrollbar textarea:-webkit-autofill,
body.darkScrollbar select:-webkit-autofill {
background-color: #555b00 !important;
color: #e8e6e3 !important;
}
I want to change div background color based on class name 'cls-editable', which is used by javascript to find the element and then set editable attribute to be 'true' or 'false.
When editable, background is yellow. Otherwise, it's white.
HTML
<div class='cls-editable'>
Hello
</div>
CSS:
.cls-editable, [contenteditable="true"] {
background-color: yellow;
}
.cls-editable, [contenteditable="false"] {
background-color: white;
}
Javascript:
if (this.checkStatus) {
$('.dirs_row').children('.cls-editable').each(function () {
$(this).attr('contenteditable', 'true');
});
} else {
$('.dirs_row').children('.cls-editable').each(function () {
$(this).attr('contenteditable', 'false');
});
}
But, it does not work. What's wrong with css?
Try this
CSS
.cls-editable[contenteditable="true"] {
background-color: yellow;
}
.cls-editable[contenteditable="false"] {
background-color: white;
}
OUTPUT
You got it almost correct! Here is the correct solution:
.cls-editable[contenteditable="true"] {
background-color: yellow;
}
.cls-editable[contenteditable="false"] {
background-color: white;
}
<div class='cls-editable' contentEditable="true">
Hello
</div>
<div class='cls-editable' contentEditable="false">
Hello
</div>
I am trying to add custom class to my bindTooltip but the new class do not show up. My method based on this question.
My custom popup class is working fine but if I want to overwrite the tooltip class than it is now working.
My JS code:
var PopupClass={'className': 'class-popup'}
var TooltipClass={'className': 'class-tooltip'}
L.marker(
[46.17319713, 21.34458608],
{icon: OnlineMarker}
).bindPopup(
'Test Popup',
PopupClass
).bindTooltip(
'Test Tooltip',
{direction: 'top', permanent: true, offset: [10,0]},
TooltipClass
).addTo(MyMap)
My CSS code:
/* popup-class*/
.class-popup .leaflet-popup-content-wrapper {
background:#2980b9;
color:#fff;
font-size:10px;
line-height:10px;
}
.class-popup .leaflet-popup-content-wrapper a {
color:#2980b9;
}
.class-popup .leaflet-popup-tip-container {
width:40px;
height:20px;
}
.class-popup .leaflet-popup-tip {
background:#2980b9;
}
/* tooltip-class*/
.class-tooltip{
background: green;
border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
border-right-color: cyan;
}
You have 2 issues:
You try to specify your Tooltip class using a 3rd argument of .bindTooltip, which does not do anything as per Leaflet doc. Instead, you should merge your className key in the 2nd argument (options). For that, you can either:
write it directly within the options
extend your TooltipClass with your options: L.Util.extend(myOptions, TooltipClass)
use the ES2018 spread operator to do the same as the above point.
Your .class-tooltip selector in CSS is not enough to override the default Leaflet style. Increase your selector specificity, e.g. adding the Leaflet tooltip class: .leaflet-tooltip.class-tooltip
var MyMap = L.map('map').setView([46.17319713, 21.34458608], 11);
var PopupClass = {
'className': 'class-popup'
}
var TooltipClass = {
'className': 'class-tooltip'
}
L.marker([46.17319713, 21.34458608])
.bindPopup('Test Popup', PopupClass)
.bindTooltip('Test Tooltip', {
direction: 'top',
permanent: true,
offset: [10, 0],
//'className': 'class-tooltip'
...TooltipClass // using spread operator (ES2018)
}, TooltipClass) // 3rd argument does not do anything
.addTo(MyMap);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(MyMap);
/* popup-class*/
.class-popup .leaflet-popup-content-wrapper {
background: #2980b9;
color: #fff;
font-size: 10px;
line-height: 10px;
}
.class-popup .leaflet-popup-content-wrapper a {
color: #2980b9;
}
.class-popup .leaflet-popup-tip-container {
width: 40px;
height: 20px;
}
.class-popup .leaflet-popup-tip {
background: #2980b9;
}
/* tooltip-class*/
.leaflet-tooltip.class-tooltip {
background: green;
border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
border-right-color: cyan;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 180px"></div>
I use a polymer paper-spinner inside my web-component:
<dom-module id="custom-spinner">
<style include = 'custom-spinner-styles'>
paper-spinner.yellow{
--paper-spinner-layer-1-color: yellow;
--paper-spinner-layer-2-color: yellow;
--paper-spinner-layer-3-color: yellow;
--paper-spinner-layer-4-color: yellow;
}
</style>
<template>
<div class = "loader">
<paper-spinner class$="{{color}}"></paper-spinner>
</div>
<content>
</content>
</template>
</dom-module>
<script>
etc....
</script>
I use it like this:
<custom-spinner color = "yellow" size = "200px" fade-in-sp = "500" fade-out-sp = "400"></custom-spinner>
Now the problem is, that the data-binding works and the paper-spinners class is set to yellow, but the styles are not applied.
If I set 'yellow' directly it works perfectly:
<paper-spinner class="yellow"></paper-spinner>
Any ideas where the problem is?
Help would be greatly appreciated.
I am using data-binding for Styling in my gold-password-input and it is working like this:
.None {
color: var(--gold-password-input-strength-meter-none-color, --paper-grey-700) !important;
}
.VeryWeak {
color: var(--gold-password-input-strength-meter-veryweak-color, --paper-red-700) !important;
}
.Weak {
color: var(--gold-password-input-strength-meter-weak-color, --paper-orange-700) !important;
}
.Medium {
color: var(--gold-password-input-strength-meter-medium-color, --paper-yellow-700) !important;
}
.Strong {
color: var(--gold-password-input-strength-meter-strong-color, --paper-blue-700) !important;
}
.VeryStrong {
color: var(--gold-password-input-strength-meter-verystrong-color, --paper-green-700) !important;
}
and
<span id="strengthLabel">
[[strengthMeterLabels.Label]]:
<span class$=[[_strengthMeterScore]]>[[_computeStrengthMeterLabel(_strengthMeterScore)]]</span>
<paper-icon-button icon="info" alt="info" disabled noink></paper-icon-button>
</span>