Honestly, I have no idea how to write this to work. I want a sass mixin that would remove that blue Bootstrap outline every button tends to have, so I can just add it to buttons I want as I go along.
Could someone possibly help me with this one?
I've tried a few approaches, but they basically do nothing.
You could set the SCSS variable like so:
$btn-focus-width: 0;
you would have something like this:
#mixin outline($value) {
outline: $value;
}
button {
#include outline(0);
}
which outputs:
button {
outline: 0;
}
see a demo here
Related
I am using a mixin to convert my Angular app from LTR to RTL accordingly.
#mixin rtl($property, $ltr-value, $rtl-value) {
[dir='ltr'] & {
#{$property}: $ltr-value;
}
[dir='rtl'] & {
#{$property}: $rtl-value;
}
}
#mixin rtl-prop($ltr-property, $rtl-property, $value) {
[dir='ltr'] & {
#{$ltr-property}: $value;
}
[dir='rtl'] & {
#{$rtl-property}: $value;
}
}
When I use #include, for some reason it doesn't work. (html tag is defined properly)
#include rtl(border-radius, 0 10px 80px 0, 0 80px 10px 0);
<html lang="he" dir="rtl">
Any ideas why?
For those who will encounter this issue at the future, the problem was component's encapsulation - it was set to Emulated which probably interfered with the classes names.
Set it to None instead.
There are a couple of things you can do to solve this, but that are not optimal:
First and for all you are checking if the component itself has dir set, that is why it isn't working. Because the direction is set on the tag.
You can try to use :host-context, because than it will take a look at the html attribute and not your component. Like this:
#mixin rtl($property, $ltr-value, $rtl-value) {
:host-context([dir='ltr']) & {
#{$property}: $ltr-value;
}
:host-context([dir='rtl']) & {
#{$property}: $rtl-value;
}
}
But always check on canIUse to see if it has enough coverage. For this moment it is around 75% so I would say it is too low, certainly if you have a lot of mobile iOS users.
Another alternative to :host-context() is :dir(), but this has on the moment of writing only 3% coverage, so I would not bother using that either.
The currently approved answer (the one that suggests to set encapsulation to None) is not recommended since it will make all the mark-up for that component global and could cause some unexpected issues. Certainly because direction is maybe something you'd want to use in almost all of your components.
I think the best solution right now is to use logical properties from css. You use 'start' instead of 'left' for example. You can google it and find a lot of info to use it. (for example on developer mozilla site).
For your example you would have to use:
.yourClass {
border-start-start-radius: 0;
border-start-end-radius: 10px;
border-end-start-radius: 80px;
border-end-end-radius: 0;
}
And this would make it look the way you want it on any text-direction without the use of any mixins.
I am struggling to find a way to give CSS to all placeholders in my application,
I have tried the following:
.customField input::-webkit-input-placeholder {
color: #2e4bc5;
}
.x-text-field input::webkit-input-placeholder{
color :#2e4bc5
}
Any help would be appreciated.
Try this:
.customField .x-input-el::-webkit-input-placeholder {
color: #2e4bc5;
}
I am developing a web app using twitter bootstrap, i want to create my own button with my own background, i don't want to use the already present buttons using btn-primary etc... but i want to create my own button with my own class. I want to use the core functionality of the btn class. so ideally my button will use the class=" btn btn-myPrimary".
I checked in variables.less and buttons.less, there only i am able to change the value of existing buttons such as btn-primary. i am not able create my own button something like btn-myPrimary.
Thanks in advance for any help.
If you can compile the less files then you can use this button mixin (from mixins.less):
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(#color; #background; #border) {
color: #color;
background-color: #background;
border-color: #border;
...
If you look at buttons.less you can see how they use it:
.btn-default {
.button-variant(#btn-default-color; #btn-default-bg; #btn-default-border);
}
.btn-primary {
.button-variant(#btn-primary-color; #btn-primary-bg; #btn-primary-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(#btn-warning-color; #btn-warning-bg; #btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.button-variant(#btn-danger-color; #btn-danger-bg; #btn-danger-border);
}
// Success appears as green
.btn-success {
.button-variant(#btn-success-color; #btn-success-bg; #btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(#btn-info-color; #btn-info-bg; #btn-info-border);
}
Like this ref links below
Link
I'm using bootstrap for a simple test webapp. I want a button to start off with the standard style (btn), and switch to the btn-danger style only on hover. I know this can be done with jquery or straight javascript, but I'm really not interested in that approach.
Can I do this in straight CSS without copying any of the bootstrap style code into my own CSS? Ideally, I'd like to be able to do something like this:
.mybutton {
}
.mybutton:hover {
style: btn-danger;
}
http://jsfiddle.net/wPDCm/5/
The syntax for using LESS (the CSS preprocessor that Twitter Bootstrap uses) should be this:
.mybutton:hover {
#include .btn-danger;
}
There is no way to do this with CSS alone.
This can't be done without a CSS pre-processor.
Using SASS you could do something like:
#mixin danger-will-robinson {
background-color: red;
}
.btn-danger {
#include danger-will-robinson;
}
.mybutton:hover {
#include danger-will-robinson;
}
Other CSS preprocessors have similar features.
I have a very wierd question, I dont know wether if its possible in css or not
Suppose I have say 3 different css classes as shown below, as you can see I have a common property of all these classes, I want to declare this color somewhere else and pass a reference to it here, so if next time I want to change the color I can simply change at one place rather than changing in all the 5 classes.
I know that you can use body{}, or a wrapper for this but that would affect the colors of the entire site right ? Is there a way to do this ?
Is this even possible ?
.abc {
color:red;
}
.abc2 {
color:red;
}
.abc3 {
color:red;
}
.abc4 {
color:red;
}
.abc5 {
color:red;
}
The bad news: you can't do it in CSS.
The good news: you can write in a meta-CSS language like LESS, which then processes a LESS file to pure CSS. This is called a "mixin".
In LESS:
#errorColor: red;
.error-color {
color: #errorColor;
}
#error-1 {
.error-color;
}
.all-errors {
.error-color;
}
More info: http://lesscss.org/#-mixins
if you want to declare all of them at a time, you can use:
.abc, .abc2, .abc3, .abc4, .abc5 {
color:red;
}
Or you can declare an additional class & add to all the .abc, .abc2.... & make its color:red;.
This can not be done with CSS, but that is still a very popular thing to do by using a CSS preprocessor such as LESS, SASS, SCSS, or Stylus.
A preprocessor will let you define a variable (say $red = #F00). It will replace the variable in your CSS document with the variable value for you, allowing you to write very DRY and module CSS.
This functionality is referred to as "CSS variables", which is part of the future spec, but not yet implemented on any browsers.
For now, the best way to do this in pure CSS is to declare an additional class for the desired "global", and then add that class to all relevant items.
.abc_global { color: red; }
.abc1 { /* additional styling */ }
.abc2 { /* additional styling */ }
<div class="abc1 abc_global"></div>
<div class="abc2 abc_global"></div>
With LESS
You are able to define that red color once:
.myRedColor {
color:red;
}
Now you can call that red on any CSS styles. Even NESTED styles! It's a wicked tool!
.abc1 {
.myRedColor;
}
.abc2 {
.myRedColor;
}
.abc3 {
.myRedColor;
}
.abc4 {
.myRedColor;
}
NESTED EXAMPLE:
.abc {
.itsEasyAsOneTwoThree{
.myRedColor;
}
}
Now all of our "itsEasyAsOneTwoThree" classes that are properly nested inside of an "abc" class will be assigned the red style. No more remembering those long #867530 color codes :) How cool is that?!
You can also use PostCSS with the plugin postcss-preset-env and support custom properties/variables, then use the :root selector to add global css variables.
:root {
--color-gray: #333333;
--color-white: #ffffff;
--color-black: #000000;
}