(This is really hard to explain) I am trying to create a new button class in Foundation like this:
.btn {
#extend .button;
#extend .small;
#extend .radius;
#extend .secondary;
}
It works fine and gets all the parent styles, except the hover state ones.
For example consider these:
A button
<!-- hover color is gray -->
and
A button
<!-- hover color is white, but it should be gray -->
I tried this, but it didn't worked:
.btn {
#extend .button;
#extend .small;
#extend .radius;
#extend .secondary;
.disabled {
#extend .disabled;
}
}
I am using the zurb-foundation gem with Rails 3.2.9.
Any idea how to fix it?
EDIT
Here is the generated CSS:
.button.disabled, .disabled.btn, .btn .btn.disabled, .btn .button.disabled, .button[disabled], [disabled].btn {
opacity: 0.6;
cursor: default;
background: #2ba6cb;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.button.disabled :hover, .disabled.btn :hover, .button[disabled] :hover, [disabled].btn :hover {
background: #2ba6cb;
}
.button.disabled.success, .disabled.success.btn, .button[disabled].success, [disabled].success.btn {
background-color: #5da423;
}
.button.disabled.success:hover, .disabled.success.btn:hover, .button.disabled.success:focus, .disabled.success.btn:focus, .button[disabled].success:hover, [disabled].success.btn:hover, .button[disabled].success:focus, [disabled].success.btn:focus {
background-color: #5da423;
outline: none;
}
.button.disabled.alert, .disabled.alert.btn, .button[disabled].alert, [disabled].alert.btn {
background-color: #c60f13;
}
.button.disabled.alert:hover, .disabled.alert.btn:hover, .button.disabled.alert:focus, .disabled.alert.btn:focus, .button[disabled].alert:hover, [disabled].alert.btn:hover, .button[disabled].alert:focus, [disabled].alert.btn:focus {
background-color: #c60f13;
outline: none;
}
.button.disabled.secondary, .disabled.btn, .btn .btn.disabled, .button[disabled].secondary, [disabled].btn {
background-color: #e9e9e9;
}
.button.disabled.secondary:hover, .disabled.btn:hover, .button.disabled.secondary:focus, .disabled.btn:focus, .button[disabled].secondary:hover, [disabled].btn:hover, .button[disabled].secondary:focus, [disabled].btn:focus {
background-color: #e9e9e9;
outline: none;
}
If what you are going for is a short cut for button small secondary radius then why don't you extend just that? It should produce a cleaner output.
.btn
{
#extend .button.small.secondary.radius;
}
Also make sure your custom CSS is referenced after foundation.css something could be overriding you.
After struggling for a while, I managed to solve it this way:
.btn {
#extend .button;
#extend .secondary;
#extend .radius;
#extend .small;
&.disabled {
#extend .button;
#extend .disabled;
}
Now it gives me the right ouput!
Related
When using mat-slide-toggle, Angular Material adds a white-space: no wrap style(plus others) that I can't overwrite from the component scss file.
The style is added to both .mat-slide-toggle and .mat-slide-toggle-content. How can I overwrite those without going global?
Than you
In your scss file
:host {
::ng-deep {
.mat-slide-toggle {
white-space: normal !important;
}
}
}
This work for me (angular 11)
::ng-deep .mat-slide-toggle-content {
white-space: normal !important;
}
I want to avoid duplication in my code. Is it possible to write something like this in LESS?
.print when (#media print = true) {
background: #heading-background-color !important;
-webkit-print-color-adjust: exact;
}
.header-month {
.print
background: #heading-background-color;
font-weight: bold;
}
Instead of:
#media print {
.header-month {
background: #heading-background-color !important;
-webkit-print-color-adjust: exact;
}
}
.header-month {
background: #heading-background-color;
font-weight: bold;
}
It doesn't look like an improvement here. But I'm working with multiple classes and need to do this for all of them.. So maybe an alternative if this is not possible?
Less #media can be nested in a rule so you can define such .print mixin as:
.print() {
#media print {
background: #heading-background-color !important;
-webkit-print-color-adjust: exact;
}
}
// usage:
.header-month {
.print();
background: #heading-background-color;
font-weight: bold;
}
Also see "Passing Rulesets to Mixins" for a more complex stuff.
I'm using RoR to make a one-month rails website. This is the code from the styles.css.scss sheet. It utilizes bootstrap. I am unsure as to why but the button color does not change despite the $btnPrimaryBackground: green text. Does anyone have any ideas or thoughts on why the button color doesn't change? Thanks.
$baseFontFamily: Oxygen;
#import url(http://fonts.googleapis.com/css?family=Oxygen);
$navbarBackgroundHighlight: white;
$navbarBackground: white;
$btnPrimaryBackground: green;
#import 'bootstrap';
body{
padding-top: 60px;
}
#import 'bootstrap-responsive';
.navbar-inner{
#include box-shadow(none !important);
border: 0;
}
.footer{
margin-top: 50px;
color: $grayLight;
a{
color: $gray;
}
}
If you are using Bootsrap with LESS, you can simply do:
.btn-primary {
.buttonBackground(#yourColor, #yourColorDarker); //(button, hover)
}
If not then you simply override the button class which you want to change color:
.btn-warning { background-color: Your color; } //button
.btn-warning:hover { background-color: Your color; } //hover
Furthermore, since it appears you want to change the button color to green why dont you use the .btn-success class like so:
<%= button_tag "Hello", :class => "btn btn-success" %>
Source: Styling twitter bootstrap buttons
In Bootstrap 3 buttonBackground doesn't work anymore, you have to use button-variant(#color; #background; #border) like this:
.btn-custom {
.button-variant(#custom-color, #custom-color-bg, #custom-color-border);
}
You can also make your own and inherit from .btn-default. In SCSS like this:
.btn-custom { #extend .btn; #extend .btn-default; color: #6EA81A; }
In my website, all my links are underlined when cursor mouse hover it. I have an exception for special cases. So I have some ActionLink where I would like links to be dotted and when hover links must be underline. I cannot achieve this.
Here is what I do:
#Html.ActionLink("Lire la suite...", "Details", new { slug = #post.Slug } , new { #class = "dotted-link" } )
The CSS:
.dotted-link
{
text-decoration: none;
border-bottom-style:dotted;
border-bottom-width: 1px;
}
The result:
The result when hover it:
As you can see, I have a dotted border and a plain border ?!
What is the best way to achieve this?
Thanks.
a.dotted-link {
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a.dotted-link:hover {
border-bottom-style: none;
}
Did someone create a nice stylesheet for this:
http://mvccontrib.codeplex.com/wikipage?title=Grid&referringTitle=Documentation&ProjectName=mvccontrib
Thanks.
Christian
I have made a start - no css expert though:
table.grid
{
margin:0.5em;
}
tr.gridrow
{
font-family:Verdana,Arial,Helvetica,sans-serif,"MS sans serif";
padding-top:0.5em;
padding-bottom:0.5em;
margin:0.5em;
background-color: #e8eef4;
}
.gridrow td
{
padding:1em;
font-size:smaller;
text-align:center;
max-width: 300px; /*or whatever*/
word-wrap: break-word;
}
.gridrow_alternate td
{
padding:1em;
text-align:center;
}
tr.gridrow_alternate
{
font-family:Verdana,Arial,Helvetica,sans-serif,"MS sans serif";
padding-top:0.5em;
padding-bottom:0.5em;
margin:0.5em;
}