Skip to content
Snippets Groups Projects
Commit ba7a7d11 authored by Christopher Krawietz's avatar Christopher Krawietz
Browse files

added vanilla config settings for demo file

parent ac4915dd
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/.vuepress/config.js
+ 2
− 1
View file @ ba7a7d11
......@@ -28,6 +28,7 @@ module.exports = {
],
['meta', { name: 'msapplication-TileColor', content: '#000000' }],
['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
['script', { src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js' }],
],
module: {
rules: [
......@@ -136,7 +137,7 @@ module.exports = {
search: true,
smoothScroll: true,
navbar: false,
displayAllHeaders: true,
displayAllHeaders: false,
sidebar: {
'/components/': ['', 'links', 'buttons', 'grids'],
},
......
src/components/buttons.md
+ 69
− 18
View file @ ba7a7d11
......@@ -2,7 +2,7 @@
title: Buttons
tagline: Buttons
---
# Verlinkungen
# Buttons
## Wann soll diese *Komponente* verwendet werden.
......@@ -18,26 +18,77 @@ Lorem markdownum acernae: rorat et fessa spesque stivave sustinuere feres
convertit has Iovem corpora patulosque frons viribus, criminis. Tempore sit in
solito. Animum iras, intremuere ficto servat nec Pergama tot sit.
::: demo
::: demo [vanilla]
```html
<template>
<div class="box-vue">
<button @click="plus">+</button>
<button @click="minus">-</button>
{{ number }}
<html>
<div id="vanilla-box"></div>
<div class="Base-theme--light u-marginBottom--1">
<h5 class="Base-h5">Theme: Light</h5>
<button class="Base-button" title="Das ist ein button" type="button">Das ist ein button</button>
<button class="Base-button" title="Das ist ein button" type="button" disabled>Disabled button</button>
<button class="Base-button" title="Das ist ein button" type="button">Das ist ein button mit sehr viel Text, damit dieser umbricht.</button>
</div>
</template>
<script>
export default {
data: () => ({ number: 0 }),
methods: {
plus () { this.number++ },
minus () { this.number-- }
<div class="Base-theme--dark u-background--sh-blau">
<h5 class="Base-h5">Theme: Dark</h5>
<button class="Base-button" title="Das ist ein button" type="button">Das ist ein button</button>
<button class="Base-button" title="Das ist ein button" type="button" disabled>Disabled button</button>
<button class="Base-button" title="Das ist ein button" type="button">Das ist ein button mit sehr viel Text, damit dieser umbricht.</button>
</div>
</html>
<style lang="scss">
$fontColor: #ffffff;
$activeColor: #D4004B;
$bgColor: #E5EAEF;
$bgColor--dark: #003064;
.Base-button {
font-family: serif;
font-size: 18px;
cursor: pointer;
color: $fontColor;
padding: 0.7em 1.25em 0.75em;
align-self: baseline;
display: inline-flex;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
border: none;
line-height: 1.25;
background-color: $bgColor;
justify-content: center;
&:focus,
&:hover,
.u-linkWrap:hover &,
.u-linkWrap.is-active &,
.u-linkWrap:active &,
&.is-active,
&:active {
color: $fontColor;
background-color: $activeColor;
}
&:disabled {
cursor: default;
opacity: 0.4;
pointer-events: none;
}
.Base-theme--dark & {
background-color: $bgColor--dark;
&:focus,
&:hover,
.u-linkWrap:hover &,
.u-linkWrap.is-active &,
.u-linkWrap:active &,
&.is-active,
&:active {
color: $fontColor;
background-color: $activeColor;
}
}
}
</script>
<style>
.box-vue { color: red; }
</style>
```
:::
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum - Datenschutz - Barrierefreiheit