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.
Related
According to the docs:
The default transition mode for pages differs from the default mode in Vue.js. The transition mode is by default set to out-in. If you want to run leaving and entering transitions simultaneously, you have to set the mode to the empty string mode: ''.
However I am finding that this doesn't take effect. I have two simple slide transitions that looks like this:
.fwd-leave-active,
.back-leave-active,
.fwd-enter-active,
.back-enter-active {
transition: all .5s ease;
}
.fwd-enter,
.back-leave-to{
transform: translateX(100%);
}
.back-enter,
.fwd-leave-to {
transform: translateX(-100%);
}
I have tried setting the mode at the page level:
export default {
name: 'Page2',
transition: {
name: 'fwd',
mode: '',
},
}
And also at the config level:
pageTransition: {
name: 'fwd',
mode: '',
},
Neither of these have the desired effect of running the transitions simultaneously. Changing to in-out does have an effect, but passing an empty string doesn't.
This is on Nuxt v2.15.8.
Am I missing something fundamental here?
I have a React app, attempting for tailwind.macro to work within
emotion notations.
I am using customize-cra to rewire the app, and ${twWHATEVER} is successfully working.
However, it does not seem to inherit the original color themes from
tailwind and I am looking for a solution.
Here is the project:
https://github.com/minagawah/cra-ts-emotion-tailwind-solution
As described in the README, I tried
(1) using babel macro,
and (2) using PostCSS plugins.
I thought it's the backgroundSize problem
as it is discussed in
this issue, but no luck.
Here is how I use the tw macro notation in the app:
# ./src/App.tsx
import styled from '#emotion/styled';
import tw from 'tailwind.macro';
const Button = styled.button`
${tw`mt-4 p-2 text-white bg-red-600`}
`;
And it currently works
because I applied a workaround
for this.
It should apply the default tailwind color themes without the workaround I've applied.
I have been trying to figure out ways, but so far, no luck...
Please, I desperately need a help on this...
EDIT: (2019-09-22)
While I was struggling for bg-red to work, I just found out there's no such thing as bg-red by default... That was something I needed to manually add in tailwind.config.js.
Problem solved.
module.exports = {
theme: {
extend: {
colors: {
red: '#e53e3e',
},
},
},
variants: {},
plugins: [],
}
theme: {
extend: {
colors: {
red: '#e53e3e',
},
},
},
variants: {},
plugins: [],
}
i had the same issues i fixed by copying the default value from the tailwindcss github in tailwind.config.js.
here is the link to tailwindcss default value
https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L5
I am using a Nuxt.js + Vuetify.js project
Looking at the file assets/style/app.styl we have
// Import and define Vuetify color theme
// https://vuetifyjs.com/en/style/colors
#require '~vuetify/src/stylus/settings/_colors'
$theme := {
primary: $blue.darken-2
accent: $blue.accent-2
secondary: $grey.lighten-1
info: $blue.lighten-1
warning: $amber.darken-2
error: $red.accent-4
success: $green.lighten-2
}
// Import Vuetify styling
#require '~vuetify/src/stylus/main'
.page
#extend .fade-transition
The problem is, changing these theme colors does not result in any changes.
Any ideas how to solve this?
Docs not telling how to change color properly...
first of all you need to set your current theme and then config it.
I've waste 4 hours to figure this out. You need to change you config accordingly:
vuetify: {
theme: {
light: true, //you don't actually need this line as it's for default
themes: {
light: {
primary: '#b71c1c',
...
}
}
}
},
While working on this problem I figured out that you also can freely add your colors like this:
vuetify: {
theme: {
themes: {
light: {
'custom-color-one': '#b71c1c',
'custom-color-two': '#3B8070',
...
}
}
}
},
and then in your HTML:
<div class='custom-color-one'>
I'am div with custom background color!
</div>
<div class='custom-color-one--text'>
I'am div with custom text color!
</div>
Not sure, but try this maybe, depends how vuetify is included, but I presume if you used vuetify nuxt template then you need to include it in your nuxt.config.js file.
If you included vuetify like so:
modules: [
'#nuxtjs/vuetify'
Then add theme like so:
module.exports = {
modules: [
'#nuxtjs/vuetify'
// ...
]
// Add the following:
vuetify: {
theme: {
secondary: '#ff0000'
// ...
}
},
NOTE: This solution isn't the best approach, and will not work in a production environment. It works for workflows where a static site is deployed (i.e. when you run yarn build and deploy that), since changes in node_modules aren't persistent across installs.
Two files govern this - nuxt.config.js and node_modules/vuetify/es5/colors.js.
You need to open nuxt.config.js, and head over to the vuetify property. The themes property under the vuetify: {...} section lets you map the class names to configured color variables.
Further, to change the values of the colour variables, modify the file node_modules/vuetify/es5/colors.js. Here, you define any colors you need to whatever hex color code you want.
I'm aware of the question change-default-font-in-vuetify in SO, but it doesn't address my problem as it was posted before vue-cli-3 came out, so the ideas there don't apply here as that, the official docs from Vuetify on how to change themes and other options don't have any valid step for when the project is created with vue-cli 3.
So far my attempts go like this:
vue create fooproject (using default config, but even if I don't use the default but cherrypick what I want in the project and select the css-preprocessor as stylus manually it won't work)
vue add vuetify
it creates a plugin dir: src/plugins, where it stores vuetify.js
add a v-btn in the HelloWorld component just for knowing if the font had effect
Then I should be able to import ../stylus/main.styl, where I have:
#import '~vuetify/src/stylus/settings/_variables'
$body-font-family = 'Open Sans', sans-serif;
$heading-font-family = 'Montserrat', sans-serif;
#import '~vuetify/src/stylus/main'
I even tried with #import '~vuetify/src/stylus/main' , do I have to do also vue add additional stylus-loader dependencies or anything plus? Because that's exactly what it's NOT recommended on Vuetify's website.
Error log: no errors, I just keep seing Roboto font in my material buttons
Any remarks?
Other attempts:
I tried to follow the steps written by Jacob E. Dawson but I'm missing something super silly probably.
Edit:
the linked article from medium at the time didn't specify it was not scoped to a specific Vue version as of September 2019.
So I just took a quick and fresh glance back to this, at the end it was something silly, if a project is created with vue-cli 3 (either custom choices or default), then obviously in the component App.vue I had to take out font-family from the style section as it overwrites the CSS:
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; /* this was it */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
EDIT:
It's possible that some styles are broken when importing styles from main.styl:
https://github.com/vuetifyjs/vuetify/issues/3583
Does everything load, do you get any errors?
It seems it should work, unless perhaps you have some typos somewhere, or incorrect paths?
For example stylus should be styles in your #require '~vuetify/src/stylus/main.styl'.
do I have to do also vue add stylus-loader?
It should already be added for you.
If you did not select specific CSS preprocessor (i.e. stylus) during vue-cli installation, then you need to add it manually
npm i -S stylus stylus-loader
module: {
rules: [
{
test: /\.styl$/,
loader: ['style-loader', 'css-loader', 'stylus-loader']
}
]
}
This is working for me using nuxt 2.15.8.
Add this to your nuxt.config.js
vuetify: {
treeShake: true,
defaultAssets: {
font: {
family: "Inter",
},
icons: "mdi",
},
}
If you need different font weights you might have to import them manually in you CSS or as a in your HTML
Unable to make scrolling to work properly on 64bit IE10 Win7.
Main.js
Ext.define('ScrollLab.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
],
config: {
layout: 'vbox',
itemId: 'mainPanel',
scrollable: true,
items: [
{
xtype: 'container',
html: 'Sencha Touch 2.3 is the latest version of our industry-leading mobile app framework. In Sencha Touch 2.3 we updated the device APIs to make Apache Cordova a fully supported component in the library, including support (using the latest version of Sencha Command) for the Adobe PhoneGap Build. Touch 2.3 also includes two brand new themes: Cupertino and Mountain View, in addition to several enhancement to existing themes, especially the Blackberry 10 theme. Other enhancements in Touch 2.3 include full support for XMLHTTPRequest Level 2 (XHR2) on devices that support it, and a new ProgressIndicator Component to give users a true indication when uploading. Read more about all the new features of Touch 2.3.',
width: '100px'
}
]
}
});
MainController.js
Ext.define('ScrollLab.controller.MainController', {
extend : 'Ext.app.Controller',
requires : [
],
config:{
refs:{
mainView: 'main'
},
control:{
mainView: {
activate: 'onMainViewActivate'
}
}
},
onMainViewActivate: function(view) {
"use strict";
var me=this;
var container = view;
if(container.isXType('selectfield')) {
container = container.down('list');
}// Add support for selectbuttons
// Disable default scroll for mobile.
container.getScrollable().getScroller().setDisabled(true);
console.log(me.getMainView().element.dom);
var scrollContainers = Ext.DomQuery.select('.x-scroll-view', me.getMainView().element.dom);
var scrollBars = Ext.DomQuery.select('.x-scroll-indicator', me.getMainView().element.dom);
for(var i=0;i<scrollContainers.length;i++){
scrollContainers[i].style.overflowY = "scroll";
}
for(i=0;i<scrollBars.length;i++) {
scrollBars[i].style.zIndex = "-1";
}
console.log(scrollContainers);
console.log('Length - ' + scrollContainers.length);
}
});
This code enables the scroll but it freeze me on the current view and doesn't let me scroll up/down when content overgrows the screen.
This piece of code works great for Webkit browsers(Chrome, Safari) but doesn't work well on IE10.
I figured it out. Not a single solution. For different components I had to enable Scroll bars differently. But key thing is using overflow: scroll and height 100% CSS property at the right place in DOM.
Feel free to reach me if you need suggestions.