I am running Rails 5.1 with the gem 'bootstrap', '~> 4.1.3' and I want to activate gradients and the shadows in the application.
For now, there is no gradient on the inputs :
I would like to get this appearance (a shadow and not a solid border) :
I suppose it'is linked to the default variables in _variables.scss (inside the gem)
$enable-shadows: false !default;
$enable-gradients: false !default;
I don't want to modidy the bootstrap gem itself, so I tried to add the following in app/assets/stylesheets/application.css.scss
/* Trying to overwrite CSS default variables in SCSS */
$enable-shadows: true;
$enable-gradients: true;
/* Vendor CSS */
#import "bootstrap";
#import "fontawesome-all";
#import "selectize.js-master/dist/css/selectize";
#import "selectize.js-master/dist/css/selectize.bootstrap4";
#import "jquery-ui/autocomplete.css";
#import "devise";
/* My CSS */
#import "colors";
#import "global";
#import "items";
#import "posts";
#import "tags";
#import "users";
#import "welcome";
but there is no effect on the input gradient... What do I miss ?
Bootstrap doc variable overwrite : https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults
Related
I tried doing their Ruby on Rails instruction for installation but when I included #import 'hamburgers' it doesn't know where to search for the file. So what I tried to do was copy the files from the '_sass/hamburgers' directory from the 'hamburgers' gem into my project.
files inside the _sass/hamburgers directory pasted in my stylesheets folder.
Even after pasting the files in my project's stylesheet folder an error still shows up.
Error states
Error: Undefined variable: "$hamburger-padding-y".
on line 4:12 of app/assets/stylesheets/_base.scss
padding: $hamburger-padding-y $hamburger-padding-x;
If I understand correctly _base.scss is connected to hamburgers.scss so there shouldn't really be any issues. Hope to get some help!! :>
EDIT:
Here's my application.scss
/*
* This is a manifest file that'll be compiled into application.scss, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
#import "hamburgers";
Here is also hamburgers.scss
#charset "UTF-8";
/*!
* Hamburgers
* #description Tasty CSS-animated hamburgers
* #author Jonathan Suh #jonsuh
* #site https://jonsuh.com/hamburgers
* #link https://github.com/jonsuh/hamburgers
*/
// Settings
// ==================================================
$hamburger-padding-x : 15px !default;
$hamburger-padding-y : 15px !default;
$hamburger-layer-width : 40px !default;
$hamburger-layer-height : 4px !default;
$hamburger-layer-spacing : 6px !default;
$hamburger-layer-color : #000 !default;
$hamburger-layer-border-radius : 4px !default;
$hamburger-hover-opacity : 0.7 !default;
$hamburger-active-layer-color : $hamburger-layer-color !default;
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
// To use CSS filters as the hover effect instead of opacity,
// set $hamburger-hover-use-filter as true and
// change the value of $hamburger-hover-filter accordingly.
$hamburger-hover-use-filter : false !default;
$hamburger-hover-filter : opacity(50%) !default;
$hamburger-active-hover-filter: $hamburger-hover-filter !default;
// Types (Remove or comment out what you don’t need)
// ==================================================
$hamburger-types: (
3dx,
3dx-r,
3dy,
3dy-r,
3dxy,
3dxy-r,
arrow,
arrow-r,
arrowalt,
arrowalt-r,
arrowturn,
arrowturn-r,
boring,
collapse,
collapse-r,
elastic,
elastic-r,
emphatic,
emphatic-r,
minus,
slider,
slider-r,
spin,
spin-r,
spring,
spring-r,
stand,
stand-r,
squeeze,
vortex,
vortex-r
) !default;
// Base Hamburger (We need this)
// ==================================================
#import "base";
// Hamburger types
// ==================================================
#import "types/3dx";
#import "types/3dx-r";
#import "types/3dy";
#import "types/3dy-r";
#import "types/3dxy";
#import "types/3dxy-r";
#import "types/arrow";
#import "types/arrow-r";
#import "types/arrowalt";
#import "types/arrowalt-r";
#import "types/arrowturn";
#import "types/arrowturn-r";
#import "types/boring";
#import "types/collapse";
#import "types/collapse-r";
#import "types/elastic";
#import "types/elastic-r";
#import "types/emphatic";
#import "types/emphatic-r";
#import "types/minus";
#import "types/slider";
#import "types/slider-r";
#import "types/spin";
#import "types/spin-r";
#import "types/spring";
#import "types/spring-r";
#import "types/stand";
#import "types/stand-r";
#import "types/squeeze";
#import "types/vortex";
#import "types/vortex-r";
// ==================================================
// Cooking up additional types:
//
// The Sass for each hamburger type should be nested
// inside an #if directive to check whether or not
// it exists in $hamburger-types so only the CSS for
// included types are generated.
//
// e.g. hamburgers/types/_new-type.scss
//
// #if index($hamburger-types, new-type) {
// .hamburger--new-type {
// ...
// }
// }
Per the comments, the OP requested this info though it does not answer the primary question.
Don't do any of the "ruby on rails" stuff from the official documentation.
Create app/assets/stylesheets/hamburgers.css and get the code from here (or just copy in the file). This is the dist/hamburgers.css file the documentation mentions.
In your application view (e.g., application.html.erb), in the <head> put in the stylesheet reference: <%= stylesheet_link_tag "hamburgers" %>
Put in some html markup (get from the documentation example here). Also, be sure to put the <script> code from the example (it's at the end).
When I did this, I got a fresh rails site to work exactly the same as how the hamburger author's example.html works.
As to why you get that hamburger-padding-y error, I don't think you are supposed to need to put the css AND scss files. The yarn install combined with the rails gem is probably supposed to take care of this, but I couldn't recreate the error because I couldn't get a rails server to work if I install the gem (hamburgers, which resolved to v1.1.3). I was using Ruby 2.6.2 / Rails 6.0.3.3
RESULT:
I'm using sass-bootstrap for my project, I have a _colors.scss file where I save my colors variables .
I import my _colors.scss before importing bootstrap.
I can modify main bootstrap variables like:
$navbar-default-link-active-color: red;
// active link in header menu became red
But I cannot use color var in my other sass files like:
$brand-primary: #428bca;
body {
color: $brand-primary;
}
// this give undefined variable
How is that?
My import application.css.scss:
#import "base-elements/colors";
#import "base-elements/typography";
#import "base-elements/helpers";
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootstrap-theme.min";
#import "components/login";
#import "components/carousel";
#import "pages/pages";
Just discover that sass-rails version bigger than 4.0.1 doesn't work well with bootstrap. I needed to define
gem sass-rails '4.0.1 '
and
gem 'sprockets', '2.11.0'
in order to make colours and bootstraps mixins working properly
Hopefully that can help someone else
I'm using the bootstrap-sass gem. With these instructions https://github.com/twbs/bootstrap-sass#usage Things work ok except when I want to add a new stylesheet.
application.css.scss
#import "bourbon";
#import "custom";
#import "users";
#import "font-awesome";
#import "comments";
#import "animations";
directory structure
▾ stylesheets/
animations.css
application.css.scss
classifieds.css.scss
comments.css.scss
custom.css.scss
foo.css.scss
news.css.scss
relationships.css.scss
scaffolds.css.scss
users.css.scss
But if I add foo.css.scss to /stylesheets/ and add #import 'foo' to application.css.scss
I get a wrong number of arguments (2 for 1)
(in app/assets/stylesheets/application.css.scss) error
What could I be doing wrong?
it seems sass gem changed number of arguments of Sass::Importers::Base#public_url.
New version of sass-rails-source-maps should resolve this.
I've used Zurb Foundation Framework to build my website, now I'd want to use "Sticky footer" of Compass but I cannot include Compass
gem 'zurb-foundation', :git => "https://github.com/zurb/foundation.git"
gem "compass"
Application.scss
#import "bourbon";
#import "foundation_and_overrides";
#import "buttons";
#import "font-awesome";
#import "page";
#import "pagination";
#import "footer";
#import "app";
footer.css.sass
#import compass/reset.scss
#import compass/layout.scss
+sticky-footer(72px, "#layout", "#layout_footer", "#footer")
That looks like Rails4 -- compass is not yet ready for Rails4.
You could try your luck with version 2.0.alpha.0 on compass-rails -- it's been released for about 4 days now.
gem 'compass-rails', '2.0.alpha.0'
I am using bootstrap-sass and the font-awesome ( https://github.com/littlebtc/font-awesome-sass-rails) gems. I would like to override the bootstrap font setting from that of font-awesome.
From font-awesome's site I can override the bootstrap defaults, if I just import if after bootstrap's import.
#import 'bootstrap';
#import 'font-awesome';
I have done the above, but font-awesome's font is not overriding. I have pushed my project on github - https://github.com/murtaza52/rails-base. The url is accessible on localhost:3000/posts
I will appreciate if someone can help me overriding bootstraps's default font with those of font-awesome's
Modify your application.css.scss to look like below
#import "font-awesome";
$baseFontFamily: 'FontAwesome';
#import "bootstrap";
...
#import "bootstrap-responsive";
//#import "scaffolds";
#import "posts";
WHY?
You move import "font-awesome" at the top and then define baseFontFamily because that's what bootstrap uses to define font-family for all the elements. Check Typography and links block in the middle. If you import bootstrap after this, FontAwesome will be used by default.
You should remove import "scaffolds"; line because scaffolds.css.scss will reset your font family for body element which will be inherited by every other element.
If you can't avoid importing it before bootstrap. I hope that helps.
For those of you guys using Bootstrap 3.2+ (I guess), here's the list of SASS variables you can modify:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
In our case, we want to make sure to define $font-family-base before doing #import "bootstrap".
By setting $font-family-base before the line below is reached, Bootstrap uses our $font-family-base instead (otherwise, it defaults to $font-family-base-serif, also defined in the variables.scss above).
$font-family-base: $font-family-sans-serif !default;
This is how my application.css.sass looks like
/*
*= require_tree .
*= require_self
*/
#import "fonts"
#import "compass"
#import "bootstrap"
And I have the following in _fonts.css.sass (You don't have to have it in a separate file)
$font-family-sans-serif: 'Roboto', verdana, arial, sans-serif
I don't know if this helps you but at least sometimes when template code seems valid you need to force refresh your browser with ctrl+shirt+r to see changes (works at least in mozilla).