Override bootstrap breakpoints in rails [duplicate] - ruby-on-rails

I'm trying to use jqtouch theming which is based on SASS and COMPASS. I have a file custom.scss with the most simple code, one import and one variable to overwrite:
#import 'jqtouch';
// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/
When I now compile the scss file to css, it will basically just generate the jqtouch css with my filename. The color specification is nowhere to be seen, although the variable is definitley correct per documentation (Official Guide) and in the jqtouch.scss file, which I import for costumizing.
I'm running Sass 3.2.9 and Compass 0.12.2 on a Windows machine.
I've tried it with more variables and different file imports, but the result is always, that my override values are not incorporated.
The ruby config file for compass seems to be unsuspicious.
Does anyone have an idea what goes wrong in the process so that my override values are ignored?

You're setting the color after it has already been used. Basically, what you're trying to do is this:
$color: red;
.foo {
background: $color;
}
$color: green;
Depending on how jqtouch is written, you might not be able to modify the colors at all. You need the variables to be set as a default in order to overwrite them ahead of time:
$color: green;
$color: red !default; // red is only used if $color is not already set
.foo {
background: $color; // color is green
}
So your code should be written as such:
// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/
#import 'jqtouch';

Related

Cannot change mat-spinner's colour

I know this question has been asked (Change color of mat-spinner) but I was wondering if there's been a solution to not using the deprecated ::ng-deep?
In addition, I've also tried the method suggested in the link but that doesn't work:
HTML
<mat-progress-spinner *ngIf="pending" mode="indeterminate" class="mat-spinner-color"></mat-progress-spinner>
SCSS
.mat-spinner-color::ng-deep circle{
stroke: #FFFFFF !important;
}
Thanks in advance!
::ng-deep is not officially deprecated and is contingent upon browsers removing support for it, per angular.io, until then, meaning is officially deprecated by the browsers, it should be preferred over /deep/ and >>> for broader compatibility.
As such we plan to drop support in Angular (for all 3 of /deep/, >>>
and ::ng-deep). Until then ::ng-deep should be preferred for a broader
compatibility with the tools.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
If your preference is to avoid ::ng-deep you will need to apply your modifications for the mat-spinner to the root styles.css in your project
in styles.css
.orange-spinner circle{
stroke:orange !important;
}
add class
<mat-spinner class="orange-spinner"></mat-spinner>
Stackblitz
https://stackblitz.com/edit/angular-czd4zq?embed=1&file=styles.css
Please note:
Per UmutEsen comment below, the correct solution is to setup a theme and leverage the color input on the mat-spinner.
https://material.angular.io/guide/theming

Rails precompiled assets SCSS with LTR & RTL

This one is not easy!
I'm building a page that switches between two locales AR & EN (RTL & LTR)
page is built using SCSS bootstrap v3.
having this as a fun fact:
http://sass-lang.com/documentation/file.FAQ.html#q-ruby-code
I already have all Boostrap files switch between left & right based on one single SCSS flag (ie. $flag-direction)
My main concern now is what to do with assets pipeline on Production environment ? things seems to work fine when switching between RTL & LTR flag.
But in production it only creates on version and then starts serving that version. Did anyone work around this ?
I always end up finding solutions like these: http://dolinked.com/questions/229493/maintain-rtl-version-of-stylesheets-with-rails-asset-pipeline
which are a little scary since it's too much of a work around. is there anything simpler ?
Thanks !
As I do understand you want compile all code into a single CSS file? Unless you change the Bootstrap code yourself, i expect that you will load many unused CSS code. If your are able to set the text directory of your HTML conditionally, you should also able to load your CSS file(s) dynamically and compile a CSS file for each text direction.
Otherwise you possible can use the nested #import feature of Sass:
With grid.scss:
#at-root body#{&} {
direction: $direction;
}
.row {
float: $float;
}
The following code:
.rtl {
$direction: rtl;
$float: left;
#import "grid.scss";
}
.ltr {
$direction: ltr;
$float: right;
#import "grid.scss";
}
compiles into CSS code as follows:
body.rtl {
direction: rtl; }
.rtl .row {
float: left; }
body.ltr {
direction: ltr; }
.ltr .row {
float: right; }

SASS variables not parsing correctly - Undefined variable: "$ct-white"

I am using SASS for the first time, and my variables seem to have stopped working. I have the following code in my application.css.scss file:
*= require_self
*/
#import "layout";
#import "colors";
...
#import "text";
In my partial _colors.css.scss file, there is:
...
$ct-white: #F8F8F8 !global;
and in my partial _layout.css.scss file (the Rails default layout file):
/* Site-wide layout syntax */
body {
background-color: $ct-white;
}
I know that the _layout.css.scss file is loading because other styles on the page work fine when I set body { background-color: #F8F8F8; }. For some reason, the variable isn't being parsed correctly.
Any ideas why?
You're importing colors after layout , so the variables you define in colors are not available for layout. You could simply invert the order of those two lines. In SASS, import order matters.
If you're using the sass-rails gem, it uses sass 3.2.0 so !global throws an error.

Bourbon's #font-face mixin

I'm new to Bourbon & SASS and trying to use the #font-face mixin to add a font I downloaded (Museo Sans) to my Rails 3 app.
Bourbon provides the following examples:
#include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular');
#include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Bold', bold);
#include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Italic', normal, italic);
// Rails asset-pipeline - place fonts in app/assets/fonts/
#include font-face(SourceSansPro, 'Source_Sans_Pro/SourceSansPro-Regular', normal, $asset-pipeline: true);
What I did:
// application.css.scss
#import "bourbon";
#import "fonts";
// fonts.css.scss
#include font-face(MuseoSans, '/fonts/MuseoSans/MuseoSans_500-webfont', normal, $asset-pipeline: true);
* {
font-family: MuseoSans;
}
The fonts are in assets/fonts/MuseoSans/ with filenames like MuseoSans_500-webfont.eot, .ttf, etc. I get the impression you can leave off the extension and Bourbon is supposed to pick up all the files.
I've tried a lot of different variants of the above to no avail. I know that Bourbon and the files are working because when I set the font-family to $helvetica I see a change on the page.
If anyone can provide the proper code, or a GitHub project that I could look at, I'd be much obliged.
Try removing the leading "/fonts" in your in your path like:
#include font-face(MuseoSans, 'MuseoSans/MuseoSans_500-webfont', normal, $asset-pipeline: true);
I had some issues working with this mixin as well - I would get IOerrors if the following files were not present in the fonts directory: "myfont.eot?#iefix" and "myfont.svg#myfont."
However, when I added those files, I found that they were not getting precompiled (i.e. they lacked a MD5 thumb print and weren't present in the asset manifest), so I decided to override this mixin and rewrite it using modified asset-path methods.

Sharing mixins between scss files in rails 3.1

I'm trying to refer to a mixin defined in one file (application.css.scss) in another (home.css.scss). I have tried importing application into home but still get an "Undefined mixin" error.
Is there a way to automatically import all of my files, or what is the best way to manage imports between files?
I haven't been able to make the jump to 3.1 yet, but using Compass & Sass for quite a while, I've found it's best to try to manage mixin/definition sass separately from your actual CSS generating sass. In this way, the mixin files can be treated freely like code libraries, included wherever necessary, without them repeatedly generating CSS rules.
So you might have:
/* my-mixin-concern.scss */
$default_foo: 123px !default;
#mixin some-concern($foo: $default_foo) {
// do something
}
/* application.scss */
$default_foo: 321px; // optionally, pre-set the default value before import.
#import 'my-mixin-concern';
p { #include some-concern; }
/* home.scss */
#import 'my-mixin-concern';
body.home p { #include some-concern(9000px); }
In this way you are explicitly importing all requirements for each scss file, similarly to how you would do so in a code library.
Pure Rails Solution
Step 1. Rename
application.css -> application.css.scss
Step 2. Refactor
// application.css.scss
/*
*= require_self
*/
#import "mixins.css.csss"
#import "project.css.scss"

Resources