I am trying to add a new customized theme to my app, but it is raising the following error when I am compiling on Compass:
_Class.scss: Undefined variable: "$font-family"
I tried to change the html,body font in _Class.scss to $font-family, but it doesn't work. My Sencha Touch version is 2.2.1. How can I solve this issue?
// Let's start with the basics
$base - color: #CC0000;
$active - color: #850000;
// Buttons
$button-gradient: 'bevel';
// Lists
$list-bg-color: # eee;
$list - color: #333;
$list-pressed-color: # ddd;
$list - active - gradient: 'recessed';
$list - header - bg - color: #990000;
$list-header:white;
$list-header-gradient: 'bevel';
// Tabs
$tabs_dark_color: #000;
#import 'sencha-touch/default/all';
#include sencha-panel;
#include sencha-buttons;
#include sencha-sheet;
#include sencha-picker;
#include sencha-msgbox;
#include sencha-loading-spinner;
#include sencha-button-ui('action', #ffc801);
#include sencha-button-ui('decline', desaturate(darken(#b8a7a7, 10%), 5%));
.x-tabbar-dark .x-tab {
color: white;
}
.x-list-header {
color: white !important;
}
.x-list-round .x-list-header {
color: #777 !important;
}
.x-tabbar-dark.x-docked-bottom .x-tab .x-button-icon {
background: white !important;
}
This is a rather old post but for the sake of completeness. I ran into this issue yesterday. It occurs because you did not import the default theme variables.
You did import
sencha-touch/default/all but these are not the variables. The variable reside in sencha-touch/default
#import 'sencha-touch/default'; should resolve the issue.
create folder named stylesheets where you placed config.rb
I have created folder styles where I placed config.rb file
copy folder fonts from touch\resources\themes\fonts to styles/stylesheets/ folder
Related
I have installed font awesome using npm command npm i -D #fortawesome/fontawesome-free.
Then I try to import it in my scss file in 2 ways.
#import '#fortawesome/fontawesome-free/css/all';
or
#import '#fortawesome/fontawesome-free/scss/fontawesome.scss';
after this I'm only getting blank squares instead of my icons. I'm using font awesome in my scss files like
.radioStyle input[type=radio] + label:before {
content:"\f111";
font-family: "Font Awesome 5 Free";
color: $button-grey;
font-size: 24px;
padding-right: 8px;
vertical-align:middle; }
also I'm using it in my html and I tried also to replace class fa with fas or fab
and none of these is working. When I use CDN everything is working as expected.
any advice?
When this happens to me, it's because I forgot to load their JavaScript or put the font files somewhere that's accessible from the browser. Another common cause of this is the importing the font awesome core but not any styles such as solid.
SCSS/Font Docs:
https://fontawesome.com/how-to-use/on-the-web/using-with/sass#compile
Example Import
#import "variables";
#import "/node_modules/#fortawesome/fontawesome-free/scss/fontawesome";
#import "/node_modules/#fortawesome/fontawesome-free/scss/solid";
JavaScript Docs:
https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#next
Hi I'm trying to get breakpoint-sass working with susy in my Gulp set-up
I have ran npm install breakpoint-sass --save-dev and linked it to the top of my sass file with #import "./node_modules/breakpoint-sass/stylesheets/breakpoint"; (susy is working fine from #import "./node_modules/susy/sass/susy";)
my gulp sass task is this
gulp.task("styles", function() {
return gulp.src("scss/application.scss")
.pipe( bulkSass())
.pipe(maps.init())
.pipe(sass())
.pipe(sass({
outputStyle: 'compressed',
includePaths: ['node_modules/susy/sass', 'node_modules/breakpoint-sass/stylesheets/breakpoint'],
}).on('error', sass.logError))
.pipe(maps.write('./'))
//.pipe(autoprefixer())
.pipe(gulp.dest('./build/css/'))
.pipe(reload({stream:true}))
});
and my scss partial
#import "./node_modules/breakpoint-sass/stylesheets/breakpoint";
#import "./node_modules/susy/sass/susy";
#main {
#include span(12);
background: $primary-color;
text-align: center;
h1 {
color: green;
height: 2em;
}
#include breakpoint(500px){
h1{
color: red;
}
}
}
the h1 tag is red at all screen widths and never green. I can't see why this is happening. I have used breakpoint before in a grunt project with ruby and had no issues.
Thanks
Your includePath for breakpoint is one level too deep, omit the trailing /breakpoint so that it looks like so:
includePaths: ['node_modules/susy/sass', 'node_modules/breakpoint-sass/stylesheets'],
Once the includePath is set there is no need to specify the full path in the #import because gulp already knows where to look. So you can reduce your #imports to:
#import "breakpoint";
#import "susy";
Its always a good point to look into the compiled css if things don't work as expected.
Thanks – just one small tweak to suggest for anyone who tried the good solution by #zisoft and couldn't get it to work, I used './node_modules/breakpoint-sass/stylesheets' with success, where without the ./ in front it would fail. Maybe obvious to some people, but wanted to make a note.
Having a very weird breakpoint problem.
Screen.scss contains the most basic breakpoint example:
#import "breakpoint";
$high-tide: 500px;
.johnny-utah {
color: blue;
#include breakpoint($high-tide) {
content: 'Whoa.';
}
}
This gets compiled to:
.johnny-utah {
color: blue;
}
Seems like breakpoint is not returning anything. It used to work before.
Compass 1.0.1, Breakpoint 2.5.0 and SASS 3.4.3 running on OS X.10.
My config.rb is nothing special:
# Require any additional compass plugins here.
require 'breakpoint'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
fonts_dir = "fonts"
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
color_output = true
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
preferred_syntax = :scss
Never mind, this was my most stupid error ever!
This was an old project and I thought I was using Breakpoint back then, but no ... I used my own mixin called _breakpoint.scss which looked like this:
#mixin breakpoint($breakpoint) {
#if $breakpoint == tablet {
#media only screen and (min-width: 768px) { #content; }
}
#if $breakpoint == desktop {
#media only screen and (min-width: 1024px) { #content; }
}
#else if $breakpoint == big_desktop {
#media only screen and (min-width: 1280px) { #content; }
}
}
That's why nothing was outputted ..
I want a custom toolbar with background color as gradient.
I tried with sass. But still it is not working.. What i did, i am writing it step by step:
I create on resources folder in my current project.
I kept themes and images folder there.
I created css and sass folder inside resources folder.
in the sass folder i created app.scss file which contains the below code:
$base-color: #588aad; // go big blue!$include_default_icons: false;
#import 'sencha-touch/default/all';
#include sencha-panel;
#include sencha-buttons;
#include sencha-sheet;
#include sencha-picker;
#include sencha-tabs;
#include sencha-toolbar;
#include sencha-toolbar-forms;
#include sencha-indexbar;
#include sencha-list;
#include sencha-layout;
#include sencha-form;
#include sencha-msgbox;
#include sencha-loading-spinner;
#include pictos-iconmask("bookmarks");
#include pictos-iconmask("compose");
#include pictos-iconmask("trash");
#include pictos-iconmask("search");
#include pictos-iconmask("bookmark2");
#include sencha-toolbar-ui('charcoal', #333333,'glossy');
Then i created config.rb file with this code:
dir = File.dirname(FILE)
load File.join(dir, '..', 'themes')
sass_path = dir
css_path = File.join(dir, "..", "css")
environment = :production
output_style = :compressed
then i run compass compile app.scss in the comand prompt
In css folder, app.css file has been created after running the command.
7.then i change the code for toolbar:
xtype: 'toolbar', docked: 'top',
ui: 'charcoal',
title: 'Set Compliance Goals'
But after that when i am running the project, in simulator, toolbar is coming with white background.... please help..
check in your web browser's inspector that the css is targeting x-toolbar.And empty your browser cache might help.
It's also possible that your config.rb is misconfigured- this is a good resource on config.rb setup for compass
Depending on the version of ST you are using you might want to use Sencha Cmd. Makes it a lot easier.
In Sencha Cmd you can create a starting point by building an empty app. After that is complete you can run the sencha app watch command from the app root folder and any sass changes will compile automatically along with many other processes.
MyApp/resources/sass/app.scss --> compiles to --> MyApp/resources/css/app.css
// THIS WILL OVERRIDE THE DEFAULT SENCHA TOOLBAR UI THEMES
#include sencha-toolbar-ui('normal', $base-color, 'glossy');
#include sencha-toolbar-ui('dark', $second-color, 'matte' );
// THIS ONE USES A CUSTOM UI. THERES COMPASS MIXINS IN THE INCLUDED
// TO MAKE A GRADIENT OUT OF THIS COLOR.
#include sencha-toolbar-ui('custom-ui-name', $third-color, 'glossy');
This works for me. If you want to control the gradient then you can check how here in the docs http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.Toolbar-css_mixin-sencha-toolbar-ui
Hope this helps!
I'm trying to declare a series of back button.
My goal is to do
ui: 'back-black'
ui: 'back-red'
ui: 'back-green'
and it changes the style but it keeps the arrow shape
so far I've only managed to change all the ui:'back' buttons
.x-button-back, .x-button-back:after {
background:#ff0000 none !important;
}
any ideas ?
Why don't you try ui:'normal-black' or ui:'round-black'?
UPDATE
For that you need to edit your project's Sass files. Add this line to the scss file for each color you want
#include sencha-button-ui('orange',#ff8000,'glossy');
and similar
#include sencha-button-ui('red',#ff0000,'matte');
Check this videos for more info:
http://vimeo.com/33298159 (the example is at 17:00)
http://vimeo.com/17879651
http://www.sencha.com/learn/theming-sencha-frameworks-with-sass-and-compass/
And the CSS3 cheat sheet
http://downloads.sencha.com/extras/css3-cheat-sheet.pdf
On the card:
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls: 'back',
ui: 'plain'
}
}
}
On the CSS:
//Back
.x-button-icon.back {
background-image: url(../../resources/images/bt_seta.png);
background-repeat: no-repeat;
}
The chosen answer is probably wrong or does not applicable to Sencha 2.0.1. I tried the anwer but it doesn't work in Sencha Touch 2.0.1. However, the following method works:
(Optional) Import your favourite color via sass in your sass:
#include sencha-button-ui('orange',#ff8000,'glossy');
Put it in ui like
ui: "orange-back"
or
ui: "red-back"
... etc.