I have some buttons
<button type="button" class="myButton btn btn-primary">foo</button>
<button type="button" class="myButton btn btn-secondary">bar</button>
...
For the background colors of which I'd like to give some transparency. I'm trying like:
button.myButton {
#include bg-variant(<???>, rgba(<button's color?>, 0.7));
}
There are some infos here and there although not much about it.
Update:
I'm getting closer... Replacing the above SCSS code by:
#include bg-variant('button.myButton', rgba($red, 0.7));
does the trick, but here I explicitly set the color to red. I'd like to make it dynamic, so use the given button's color here instead.
Update 2:
I thought I've finally found it, but this:
#each $color, $value in $theme-colors {
#include bg-variant('button.myButton', rgba($value, 0.7));
}
makes my buttons' background just gray. Why?
Solved it.
#each $color, $value in $theme-colors {
#include bg-variant('button.myButton.btn-#{$color}", rgba($value, 0.7));
}
Related
(Pretty green scss/bootstrap user here)
So, like bootstrap btn-{color} is coded in scss as some way so that
btn-primary and btn-info and btn-danger and btn-warning, etc. are not needed to be individually coded, I'd like to create my own custom class that relies on all the built in theme colors and adapts as they are used in the html.
Example HTML:
<div class="bflag-success"> this div </div>
where the scss is something like
#each $color, $value in $theme-colors { #include border-left-color-variant('.bflag-#{$color}', $value);
so that then any time I use bflag-success or bflag-danger or bflag-info, etc. it adopts that theme color, just like the btn class does.
I feel like I'm close, but adding the above code to my scss fail doesn't compile correctly and lands me with errors... "Error: Undefined mixin"
I suspect its the border-left-color-variant that's missing from somewhere, but I don't know where.
What am I doing missing or doing wrong?
Thanks
I learned how to do this:
Here is the syntax and example code that would be added to the (yourfile).scss file, BELOW the boostrap imports like shown:
// Below this import
#import '~bootstrap/scss/bootstrap';
// add this - changing the "bflag" class prefix to whichever you like
#each $color, $value in $theme-colors {
.bflag-#{$color} {
background-color: $value !important;
}
}
Then for every color you have in either the boostrap scss file, or the bootstrap core imported file, (i.e. primary, secondary, success, danger, info, light, dark, etc. ) the compiler will create a class and styles for that color in your output (yourfile).css file. Example using "primary" and "success" as examples.
.bflag-primary {
background-color: #3490dc;
}
.bflag-success {
background-color: #38c172;
}
I am using the singularitygs for the first time. I was wondering how to remove the left/right margins (gutters)? Like the alpha/omega options in the 960gs. Is there anything like that?
Thank you. I am aware of the $location.
I did not describe my problem properly
so the following scenario:
<article>
<div class="teaser"></div>
<div class="teaser"></div>
<div class="teaser"></div>
<div class="teaser"></div>
</article>
<sidebar></sidebar>
$grids: 12;
$gutters: .2;
article {
#include grid-span(8);
}
sidebar {
#include grid-span(4, 9);
}
.teaser {
#include float-span(4, 1, 8);
&:nth-child(odd) {
// here i want to remove the right-margin - because otherwise the containers are not floating. dirty way would be: margin-right: 0 !important;
}
}
Singularity has a location variable as the second argument. #include grid-span($width, $location);You can change $location to 1 if it is the first column on your grid or 12 if it is the last column on your 12 column grid.
By default Singularity uses the isolation method of writing grids so this location value is important for moving things around on your grid. You can switch to more traditional floats by writing $output: float;
Actually there is an option to set the gutters which is add-gutter(x);.
For example:
.sidebar {
#include add-gutter(0);
#include grid-span(2, 1);
}
.main {
#include add-gutter(0);
#include grid-span(10, 3);
}
From the docs: https://github.com/at-import/Singularity/wiki/Creating-Grids#gutter-styles.
I've been using Zen Grids for responsive layouts for a while now, and somehow never came across this. I've referenced the documentation, but for the life of me cannot figure out how to do something which should be relatively simple.
I have a block which I set on the grid, such as:
<div class="container">
<div class="item">
</div>
</div>
==========
.container {
#include zen-grid-container();
}
.item {
#include zen-grid-item(1, 1);
}
I then have a media query where, for whatever reason, I need to remove the item from the grid completely:
#media screen and (min-width:50em) {
.item {
???
}
}
To be clear, I'm not looking to re-declare the item to a different col-width/position, I just want to remove the mixin from being called completely. I know I can just reset the CSS manually, but was wondering if there was a better way from any Zen Grid ninjas.
Thanks!
Have you tried to just use
.item {
display: none;
}
in your media query? That should hide it and probably remove the spacing it took up as well.
I am trying to float 2 divs to the right using the Susy Compass framework and having a clearing issue:
<div class="div-1">
<h2>DIV 1</h2>
</div><!--end div-1-->
<div class="div-2">
<h2>DIV2</h2>
</div><!--end div-2-->
<div class="div-3">
<h2>DIV 3</h2>
</div><!--end div-3-->
<div class="div-4">
<h2>DIV 4</h2>
</div><!--end div-4-->
<div class="div-5">
<h2>DIV 5</div>
</div><!--end div-5-->
And here is my Susy layout code:
#detail{
.div-1{
#include breakpoint($breakpoint-md){
#include span-columns(7, 12);
#include pre(1);
background-color:pink;
}
}
.div-2{
#include breakpoint($breakpoint-md){
#include span-columns(7,12);
#include pre(1);
}
}
.div-3{
#include breakpoint($breakpoint-md){
#include span-columns(7,12);
#include pre(1);
}
}
.div-4{
#include breakpoint($breakpoint-md){
#include span-columns(3,12);
#include suffix(1);
//#include omega;
background-color:blue;
}
}
.div-5{
#include breakpoint($breakpoint-md){
#include span-columns(3,12);
#include post(1);
//#include omega;
background-color:orange;
}
}
}
To give an example of how this is rendering, below is a screenshot:
As you can see, div-3 and div-5 are not clearing to the top, to align with div-1.
I thought perhaps I could use the #alpha mixin, but it is deprecated in Susy 1.0 (which I am using). I have also tried using #omega on div-3 and div-5 with no change.
That's how CSS floats work. A float will never align any higher than the previous element (div2). There is nothing Susy can do about that.
You will have to make adjustments to you markup in order for this layout to work - either switching the order of divs, or adding a wrapper around divs 1 & 2 (which is what I would recommend to preserve source order).
Or, if you want to get tricky, you could handle divs 3 & 5 without floating them. Something like this (ignoring breakpoints for simplicity):
.div3, .div5 {
#include pre(8);
#include suffix(1);
}
That should push them to the right, while ignoring the floated divs 1, 2, and 4.
Here's an example of a mixin I'm using:
#mixin gradient($from, $to, $height) {
background-color: #{$to};
background-image: url("/media/img/gradient/4/#{$height}/#{$from}/#{$to}/");
background-repeat:repeat-x;
}
The problem is that the $from and $to colors are passed to the url without the #, so a typical call looks like this:
#include gradient(ff00ff, 00ff00, 600);
and the background-color needs a hash in front of it. I want to write the line in the mixin like this:
background-color: ##{$to};
but that doesn't work... any ideas?
I needed to do something similar, and as this was the first result on Google I thought I'd add how I got around this.
I had to pass a hex colour and use the value in the class name and as a real colour. So I created an addHash function.
Here's a simple example...
#function addhash($input) {
#return unquote("#" + $input);
}
#mixin setColour($colour, $textColour:"0000ff")
{
.headerButtons .colour#{$colour} a{
background:addhash($colour);
color:addhash($textColour);
}
}
#include setColour("00ff00");
This outputs CSS like this...
.headerButtons .colour00ff00 a {
background: #00ff00;
color: #0000ff;
}
Hopefully this will be helpful for somebody.
In the end I decided to rewrite:
#include gradient(ff00ff, 00ff00, 600);
as
#include gradient("#ff00ff", "#00ff00", "600");
which works as expected.
Maybe this will work:
#{"#" + $myVar}