Last active
April 5, 2019 17:35
-
-
Save unr/6c3469a2ea015e553a7caea67a532aa2 to your computer and use it in GitHub Desktop.
Jamming buefy into nuxt, the custom way without a module. Personally I found nuxt-buefy module to be useless, and just implemented buefy directly into my own nuxt app.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Integrates Buefy / Bulma CSS Components | |
* https://buefy.github.io/documentation/start | |
*/ | |
import Vue from 'vue'; | |
// Adds specific buefy components, matching to their name in docs | |
import Autocomplete from 'buefy/dist/components/autocomplete'; | |
import Checkbox from 'buefy/dist/components/checkbox'; | |
import Dropdown from 'buefy/dist/components/dropdown'; | |
import Field from 'buefy/dist/components/field'; | |
import Input from 'buefy/dist/components/input'; | |
import Pagination from 'buefy/dist/components/pagination'; | |
import Radio from 'buefy/dist/components/radio'; | |
import Select from 'buefy/dist/components/select'; | |
Vue.use(Autocomplete); | |
Vue.use(Checkbox); | |
Vue.use(Dropdown); | |
Vue.use(Field); | |
Vue.use(Input); | |
Vue.use(Pagination); | |
Vue.use(Radio); | |
Vue.use(Select); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// an example buefy file. In my own project I include this into my global styles. | |
/** | |
* Customization for our buefy integration. | |
* https://buefy.github.io/documentation/customization | |
* | |
* You can see which modules we've included, by checking out vue/frontend/plugins/Buefy.js | |
*/ | |
// adjust bulma variables, to match our rivalry ones. | |
// https://bulma.io/documentation/customize/variables/ | |
// $primary: #8c67ef; | |
// $primary-invert: findColorInvert($primary); | |
// $twitter: #4099FF; | |
// $twitter-invert: findColorInvert($twitter); | |
$danger: $color-red-dark; | |
// Needed to get autocomplete form styles | |
$dropdown-item-color: $color-navy-dark; | |
$dropdown-item-active-color: $color-navy-dark; | |
$dropdown-item-hover-background-color: #fafafa; | |
$dropdown-item-hover-color: darken($color-teal, 5%); | |
$dropdown-item-active-background-color: rgba($color-orange, 0.35); | |
// Radio buttons need to match our colors | |
$radio-active-background-color: $color-teal; | |
$checkbox-active-background-color: $color-teal; | |
$checkbox-checkmark-color: $color-white; | |
// $link color isn't used for a tags, | |
// however is used to highlight in form elements etc. Changing this to be our orange. | |
$link: $color-orange; | |
$link-focus-border: $color-orange; | |
// set up the Bulma and Buefy core/basics | |
@import '~bulma/sass/utilities/_all'; | |
@import '~buefy/src/scss/utils/_all'; | |
// Import Bulma styles | |
// Due to this conflicting with our global button style, | |
// not introducting it globally until https://github.com/lootmarket/rivalry/issues/4274 | |
// @import '~bulma/sass/elements/button'; | |
@import '~bulma/sass/elements/form'; | |
@import '~bulma/sass/components/dropdown'; | |
// Import matching Buefy styles | |
@import '~buefy/src/scss/components/_autocomplete'; | |
@import '~buefy/src/scss/components/_checkbox'; | |
@import '~buefy/src/scss/components/_dropdown'; | |
@import '~buefy/src/scss/components/_form'; | |
@import '~buefy/src/scss/components/_radio'; | |
@import '~buefy/src/scss/components/_select'; | |
// Buefy specific fixes here. | |
// Maybe if they're deeper integrated, this will go to forms.scss? | |
// more specific than our a tag coloring | |
.dropdown-content a.dropdown-item { | |
color: $dropdown-item-color; | |
&:hover { | |
color: $dropdown-item-color; | |
} | |
} | |
// Form selects should always fill their container | |
.control .select, | |
.control .select select { | |
width: 100%; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
plugins: [ | |
'~/plugins/Buefy.js', | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment