Trying to update style so that buttons are rendered with capitalised case instead of all uppercase.
vue --version is 3.5.5
Added src/stylus/main.styl
$button-text-transform = 'capitalize'
#require '~vuetify/src/stylus/app'
main.js includes:
import "./stylus/main.styl"
Problem is that the text in buttons is still uppercase:
Chrome inspect shows style:
.v-btn {
text-transform: uppercase;
}
Is there anything else I need to do for the app to pickup the styl?
EDIT:
Changed main.styl to:
#import '~vuetify/src/stylus/app'
$button-text-transform = 'capitalize'
#import '~vuetify/src/stylus/main'
Still all uppercase
In the end after investigating webpack and vue-cli all I was able to do was add to App.vue:
<style>
.v-btn {
text-transform: none;
}
</style>
Related
I have created a NuxtJS project and selected Vuetify as the UI framework from default selections. I would like to disable the ripple effect on buttons and other possible vuetify components. Since there is no dedicated Vuetify.js file and all are configured in the nuxt.config.js file, I tried editing the same.
vuetify: {
button: {
disableRipple: true,
},
}
but no use. So, any help on this would be appreciated
After a long research, found out that, remove ripple effect on icon button accepted answer solved my case too. Answer maybe common but question is different 😅
In case if anything changes/for future reference,
.v-btn:before {
opacity: 0 !important;
}
.v-ripple__container {
opacity: 0 !important;
}
Thanks to Anant Vikram Singh
I have a project with multiple layouts, I have added the CSS globally in nuxt.config.js file like this:
css: [
'#/assets/plugins/fontawesome-free/css/all.min.css',
'#/assets/plugins/ionicons/css/ionicons.min.css',
'#/assets/plugins/feather/feather.css',
'#/assets/css/style.css',
'#/assets/css/custom-style.css',
'#/assets/css/skins.css',
]
but I want for just 1 layout to remove all css imported because the file being served is a static HTML file with all the styles inline.
Is this possible in nuxt and if not, what is the best possible workaround?
You could add the css files in your layout in a normal style block and not in nuxt.config.js.
<style lang="scss">
#import ...;
</style>
Then you can use another layout without these css files.
Remove the scope from your style on the .vue file where you want to override the global style:
<style s̶c̶o̶p̶e̶d̶>
.ProseMirror p {
color: rgb(236, 10, 10);
}
</style>
I wonder too, if you would be better off creating new vue layout files in the layout folder and applying those styles to the pages you want to affect globally, instead of pulling the css through nuxt.config.js file. Then, on the specific page that you want to override the global style, just remove the scope as I mention above. Just a thought.
Vue.js documentation for Scoped CSS mentions that
You can include both scoped and non-scoped styles in the same component
I built the example application for vue-router and used two single file components instead of the string templates of the example - the rendering is as expected.
I then tried to apply both scoped and non-scoped styles in the components. In the first one I have
<style scoped>
div {
color: white;
background-color: blue;
}
</style>
<style>
body {
background-color: green;
}
</style>
and the second one
<style scoped>
div {
color: white;
background-color: red;
}
</style>
<style>
body {
background-color: yellow;
}
</style>
The idea is to have the whole body background switch when choosing a specific route.
The scoped styles are OK - they change depending on the route.
The non-scoped ones do not (screenshots are from Chrome Dev Tools):
on initial application load (non routed yet) the background is white (which is OK - this is the default one and there is no route for /).
when choosing a route, the style for the body is applied correctly (say, green from the first component)
when switching routes and loading the second component the background changes to the new color, it looks like from Chrome Dev Tools that the current style for background-color is overwritten. All the other components elements are correctly rendered (content and scoped styling)
further switches keep the same background (and again, other elements of the relevant component are rendered correctly). There are no changes in Chrome Dev Tools (the last view above is unchanged)
In other words, it looks like the style is stacked and previously overwritten properties are not updated Is this expected behaviour?
I opened a bug report for this and it ended up being expected behaviour. The summary from the report comments:
Thorsten Lünborg:
Yes, this is expected. Vue (or rather, webpack) does not insert and
remove these styles, as you seem to think. They are injected into the
head once the component renders, and never removed.
A common pattern is to extarct all CSS into a single .css file in
production, which would have the same result.
My summary in the context of the question:
initially (no route, no component rendered) nothing was injected
the first component is rendered on route switch, its style is injected
the second component is rendered on route switch, its style is injected and overwrites the previous style
further route switches do not inject anything as each component was already rendered once. The last style used therefore stays as the authoritative one.
I will therefore fallback on binding the body class to the current component's data
I'm using SASS with Rails 3.2.3 and Ruby 1.9.3 in RVM.
My issue is that, for one reason or another, my SASS box-shadow mixin causes Internet Explorer 8 to crash on page load, no error from IE, just completely closes. If I remove the mixin, it opens perfectly...The mixin looks like:
#mixin boxShadow($params) {
-moz-box-shadow: $params;
-webkit-box-shadow: $params;
box-shadow: $params;
}
I have this at the top of my application.scss
#import 'mixins';
I'm using the mixin as such:
#include boxShadow(0px 1px 3px #999);
Any idea why this could be happening?
Turned out to be an old version of respond.min.js blowing things up!
I configuring standart badge on https://developers.google.com/+/plugins/badge/config
For it Google+ rendering iframe content.
How i can change classes styles inside iframe?
At this time it seems there is currently no way to do it. I tried editing the CSS to get rid of the annoying border and white background:
.yeb {
background-color: none !important;
border: 0px solid gainsboro !important;
}
But since the CSS is in the Google server you can't override the iFrame. It is a current feature request in the Google forums.
You can do a little trick:
The HTML for the iframe:
<div id="social_gplus_circle">
<div id="social_gplus_circle_inner"><g:plus href="https://plus.google.com/105379671042990608528" size="smallbadge"></g:plus></div>
</div>
The CSS for the trick:
#social_gplus_circle{overflow: hidden;width: 105px;height: 45px;padding-top: 7px;}
#social_gplus_circle_inner{overflow: hidden;position: relative;top: -20px;left: -130px;height: 50px;width: 276px;}
iframe{display: block!important;}
I did not made this myself, I got it from a google forum.
You can't change it , because the google plus code is not on your server.
You can only modify the iframe CSS , if your page and the iframe code is on the same server.