web-development/savvy-firebase
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding latest

Browse Source
This commit is contained in:
dtomlinson
2020-03-27 01:35:28 +00:00
parent dfd489480e
commit 2fb62006b7
5 changed files with 137 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
firebase.md
View File

@@ -365,6 +365,19 @@ We can add mulitple cards to this layout in this column - and control how they a
We can add `<v-spacer>` and then add additional colums with the same props to add content in a column like manner.
Important!
If you want content to be aligned in a column with each item on a new line, then use:
```html
<v-col cols="6" align-self="center" class="">
<v-card color="rgb(0, 0, 0, 0)" flat class="d-flex align-center flex-column">
<v-icon color="white" size="3em">mdi-account-circle</v-icon>
<p class="mb-0 display-2">Login</p></v-card
></v-col
>
```
## Helper classes
### Spacing
@@ -484,3 +497,47 @@ The variants you can use are:
You can apply these as a class to the object you want to darken/lighten.
For example:
`<v-btn color="primary" class="darken-2">Hello</v-btn>`
## Forms
### Changing the colour of form inputs
You can change the background colour, and the highlight colour (when clicked) with the following props:
```html
<v-text-field
v-model="username"
background-color="rgb(100%, 100%, 100%, 10%)"
color="rgb(100%, 100%, 100%, 10%)"
class="white-placeholder"
></v-text-field>
```
To change the placeholder colour you should use a custom class that overwrites this colour:
```css
.white-placeholder ::v-deep input::placeholder {
color: white !important;
opacity: 1;
}
```
To change the label colour:
```css
.white-placeholder ::v-deep .v-label {
color: white !important;
opacity: 1;
}
```
To change the input colour (the text that is typed in by the user) we should use another custom class:
```css
.white-placeholder ::v-deep input {
color: white !important;
opacity: 1;
}
```
We have to use `::v-deep` because we are in a scoped component. Any nested css classes/variables in a scoped component will have a random id attached to them (vue does this dynamically). The `::v-deep` will make sure that the nested css gets the formatting applied. See <https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors> for details.