How to DRY Sass code using variables? - ruby-on-rails

I have a design that uses colors to identify sections of the site. I have put a file with the color variables defined, since they can change and it is difficult to track them down through the CSS files.
$people: #D50000;
$galleries: #D500AA;
$projects: #D5BA00;
//etc...
The name of my classes matches those of the variables. For example, the navigation menu is something like:
<ul>
<li class="people">People</div>
<li class="galleries">Galleries</div>
<li class="projects">Projects</div>
<!-- etc... ->
</ul>
and I find myself writing SASS like
#nav {
ul {
li.people { border-left: 5px solid $people; }
li.galleries { border-left: 5px solid $galleries; }
li.projects { border-left: 5px solid $projects; }
}
}
which I'd like to DRY up. I have tried to use mixins, but I don't know how to tell SASS to lookup a variable named after the argument I pass (variable indirection). I have something like:
#mixin menu-states($resource) {
li.#{$resource} a { // This works
border-left: 7px solid $#{$resource}; // But this doesn't...
}
}
Does anybody have a suggestion on how to DRY this? Thanks.

this code works for me
#mixin test($resource: "red"){
$updated: unquote($resource);
li.#{$updated} a{
border-left: 7px solid $updated;
}
}

You cant do that, however you can pass in 2 variables, one for the class and another for the color to the mixin.

Related

How can I change the styling of a progress bar on iOS using Ionic?

I was playing around with the SCSS and Variable Classes in order too customize my Progress bar the same as my theme.
The progress bar styling is Blue and White and when adding styling it changes to Green & Grey no matter what styling I use.
I used these two Webkit Pseudo classes:
-webkit-progress-bar
-webkit-progress-value
"It worked in the browser but not on the device."
Is there any special way to do this or am I just missing it.
EDIT
HTML
<ion-item class="item-stable" ng-click="navtoPhases()">
<div class="row">
<div class="col"><h2>Chassis Prep</h2></div>
<div class="col"><progress class="progress" max="100" value="{{ ph[0].Chassis }}"></progress></div>
</div>
</ion-item>
SCSS
progress.progress{
// -webkit-progress-bar: #ffc900 !important ;
// -webkit-progress-value:#ef473a !important ;
color:#33cd5f;
background-color:#3299E6;
width: 50;
}
The changes can be seen on this jsfiddle page I am using Google, other browsers may defer like fox and opera.
There is a nice article here, that explains how you can override styling of progress bars in CSS. In the article, several ways of overriding the default styling of progress bars are discussed, but the only one you really need is the one for Chrome/Webkit, which I have posted below for your convenience.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
progress[value]::-webkit-progress-bar {
background-color: #33cd5f;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color: #3299E6;
border-radius: 2px;
}

Using Bootstrap to Change Button Color

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; }

space between two spans in a link is unclickable

I have the following html code:
<a href="#">
<span class="span1">test</span><span class="span2">test</span>
</a>
and css code:
.span1{float: left; }
.span2{float: right; }
So the link is test test with about 40px space between the two words "test" and "test". I created the space simply by using css, not by or by typing space with my keyboard.
The words "test" and "test" are both click-able but the space between them is not.
How can I make the space between the two spans click-able? I have tried to wrap both of the span tags in another span tag but didn't help.
Thank you.
Because the spans are forced into block display (by virtue of having given them float properties), you need to make sure the a also has block display and either overflow: hidden OR clearfix such that it is certain to completely contain the space (and intervening space) occupied by its contents:
a {
display: block;
*zoom: 1;
}
a:after {
clear: both;
content: " ";
display: table;
}
.span1 {
float: left;
}
.span2 {
float: right;
}
EDIT: based on reported weirdness in IE7:
*+html a * {
cursor: pointer;
}

How to create a printable Twitter-Bootstrap page

I'm using Twitter-Bootstrap and I need to be able to print the page the way it looks on the browser. I'm able to print other pages made with Twitter-Bootstrap just fine but I can't seem to print my page that uses purely Twitter-Bootstrap. Am I missing a tag somewhere?
Official TB page when printed:
My page when printed:
What my page actually looks like:
Bootstrap 3.2 update: (current release)
Current stable Bootstrap version is 3.2.0.
With version 3.2 visible-print deprecated, so you should use like this:
Class Browser Print
-------------------------------------------------
.visible-print-block Hidden Visible (as block)
.visible-print-inline Hidden Visible (as inline)
.visible-print-inline-block Hidden Visible (as inline-block)
.hidden-print Visible Hidden
Bootstrap 3 update:
Print classes are now in documents: http://getbootstrap.com/css/#responsive-utilities-print
Similar to the regular responsive classes,
use these for toggling content for print.
Class Browser Print
----------------------------------------
.visible-print Hidden Visible
.hidden-print Visible Hidden
Bootstrap 2.3.1 version:
After adding bootstrap.css file into your HTML,
Find the parts that you don't want to print and add hidden-print class into tags.
Because css file includes this:
#media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}
Be sure to have a stylesheet assigned for printing.
It could be a separate stylesheet:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
or one you share for all devices:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute
Then, you can write your styles for printers in the separate stylesheets or in the shared one using media queries:
#media print {
/* Your styles here */
}
Replace every col-md- with col-xs-
eg: replace every col-md-6 to col-xs-6.
This is the thing that worked for me to get me rid of this problem you can see what you have to replace.
There's a section of #media print code in the css file (Bootstrap 3.3.1 [UPDATE:] to 3.3.5), this strips virtually all the styling, so you get fairly bland print-outs even when it is working.
For now I've had to resort to stripping out the #media print section from bootstrap.css - which I'm really not happy about but my users want direct screen-grabs so this'll have to do for now. If anyone knows how to suppress it without changes to the bootstrap files I'd be very interested.
Here's the 'offending' code block, starts at line #192:
#media print {
*,
*:before,enter code here
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
select {
background: #fff !important;
}
.navbar {
display: none;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
Best option I found was http://html2canvas.hertzen.com/
http://jsfiddle.net/nurbsurf/1235emen/
html2canvas(document.body, {
onrendered: function(canvas) {
$("#page").hide();
document.body.appendChild(canvas);
window.print();
$('canvas').remove();
$("#page").show();
}
});
In case someone is looking for a solution for Bootstrap v2.X.X here. I am leaving the solution I was using. This is not fully tested on all browsers however it could be a good start.
1) make sure the media attribute of bootstrap-responsive.css is screen.
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />
2) create a print.css and make sure its media attribute print
<link href="/css/print.css" rel="stylesheet" media="print" />
3) inside print.css, add the "width" of your website in html & body
html,
body {
width: 1200px !important;
}
4.) reproduce the necessary media query classes in print.css because they were inside bootstrap-responsive.css and we have disabled it when printing.
.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}
Here is full version of print.css:
html,
body {
width: 1200px !important;
}
.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}
2 things FYI -
For now, they've added a few toggle classes. See what's available in the latest stable release - print toggles in responsive-utilities.less
New and improved solution coming in Bootstrap 3.0 - they're adding a separate print.less file. See separate print.less
To make print view look like tablet or desktop include bootstrap as .less, not as .css and then you can overwrite bootstrap responsive classes in the end of bootstrap_variables file for example like this:
#container-sm: 1200px;
#container-md: 1200px;
#container-lg: 1200px;
#screen-sm: 0;
Don't worry about putting this variables in the end of the file. LESS supports lazy loading of variables so they will be applied.
If you want to keep columns on A4 print (which is around 540px) this is a good idea
#media print {
.make-grid(print-A4);
}
.make-print-A4-column(#columns) {
#media print {
float: left;
width: percentage((#columns / #grid-columns));
}
}
You can use it like this:
<div class="col-sm-4 col-print-A4-4">

jQuery UI tabs aligned and sharing bar with a title

I would like to use jQuery UI tabs but I need the tabs aligned right … That's "easy" since I can modify the tabs container class and extend it.
But the thing is I want to add a "title" on the left, as shown in this screenshot:
http://cl.ly/400D0E3z0f272h1B3x3R
How can I do it in a clean way ?
(A dirty way could be to prepend/append a div to the tabs tag, adding the DOM on the fly … I'm looking a cleaner way :)
Thank you in advance
First there is nothing dirty adding elements to the dom on the fly :-)
Secondly, you could simply add an element in the markup, for instance a <h3> (let's be semantic (and assume you got other titles before)):
<div id="tabs">
<h3 class="ui-tab-title">My Title</h3>
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
...
</div>
and position it with css:
/* float tab buttons to right */
.ui-tabs .ui-tabs-nav li { float: right !important; }
/* position:relative on container will make the title position:absolute relative to the container */
#tabs { position: relative; }
/* absolute position the title */
.ui-tab-title { position: absolute; left: 20px; top: 15px; }
Here's a jsfiddle to illustrate
Edit:
As you pointed out, floating right the <li> inverts their order.
You could invert the order of the list items in the markup itself but this will mess up the whole logic.
Here's a piece of css to right align the tab button while keeping the markup and the visual order in place:
/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }
/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }
I've changed the fiddle accordingly.

Resources