Skip to content
This repository was archived by the owner on Jun 27, 2023. It is now read-only.

Commit c18bee0

Browse files
alvarosabualvarosabu
committed
Default theme
1 parent c2e9528 commit c18bee0

File tree

8 files changed

+128
-44
lines changed

8 files changed

+128
-44
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ Complete documentation and examples available at
2929
$ npm install @asigloo/vue-dynamic-forms
3030
```
3131

32+
or if you prefer yarn
33+
34+
```bash
35+
$ yarn add @asigloo/vue-dynamic-forms
36+
```
37+
3238
Register the component
3339

3440
```js

‎dev/App.vue

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -139,26 +139,4 @@ export default {
139139
};
140140
</script>
141141

142-
<style lang="scss">
143-
.form-group {
144-
width: 100%;
145-
margin-bottom: 0.5rem;
146-
147-
&--error {
148-
.form-label {
149-
color: #dc3545;
150-
}
151-
152-
.form-control {
153-
border-color: #dc3545;
154-
background: #f7e1e3;
155-
}
156-
}
157-
158-
.error {
159-
font-size: 11px;
160-
161-
color: #dc3545;
162-
}
163-
}
164-
</style>
142+
<style lang="scss"></style>

‎dev/styles/_base.scss

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎dev/styles/_vendors.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
@import 'bootstrap/scss/bootstrap.scss';
1+
//@import 'bootstrap/scss/bootstrap.scss';
2+
@import 'bootstrap/scss/bootstrap-grid.scss';
3+
@import '../../src/styles/themes/default.scss';

‎dev/styles/base.scss

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
body {
2+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
3+
-webkit-font-smoothing: antialiased;
4+
-moz-osx-font-smoothing: grayscale;
5+
color: #2c3e50;
6+
margin-top: 60px;
7+
}
8+
9+
pre {
10+
font-family: FiraCode, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
11+
monospace;
12+
font-size: 12px;
13+
color: #fefefe;
14+
background: #2c3e50;
15+
border-radius: 4px;
16+
padding: 0.2rem 0.5rem;
17+
overflow: auto;
18+
}
19+
20+
.btn {
21+
display: inline-block;
22+
font-weight: 400;
23+
color: #212529;
24+
text-align: center;
25+
vertical-align: middle;
26+
cursor: pointer;
27+
user-select: none;
28+
background-color: transparent;
29+
border: 1px solid transparent;
30+
padding: 0.375rem 0.75rem;
31+
font-size: 1rem;
32+
line-height: 1.5;
33+
border-radius: 0.25rem;
34+
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
35+
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
36+
}
37+
38+
.btn-primary {
39+
color: #fff;
40+
background-color: #007bff;
41+
border-color: #007bff;
42+
43+
&:hover {
44+
background-color: darken(#007bff, 5);
45+
border-color: darken(#007bff, 5);
46+
}
47+
}

‎dev/styles/main.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@
66
// ====================
77
// Base
88
// ====================
9-
@import './_base.scss';
9+
@import './base.scss';

‎src/components/dynamic-form/DynamicForm.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="dynamic-form container" v-if="fields">
2+
<div class="dynamic-form" v-if="fields">
33
<form
44
v-if="fields.length > 0 && !showFeedback"
55
:id="id"

‎src/styles/themes/default.scss

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
$font-size: 1rem !default;
2+
3+
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
4+
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
5+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
6+
$font-family: $font-family-sans-serif !default;
7+
8+
$line-height: 1.5;
9+
10+
$input-padding-y: 0.375rem;
11+
$input-padding-x: 0.75rem;
12+
$input-border-width: 1px;
13+
$input-border-color: #e9ecef;
14+
$input-border-radius: 0.25rem;
15+
$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
16+
$input-placeholder-color: #6c757d;
17+
18+
$input-error-color: #dc3545;
19+
20+
// Form groups
21+
//
22+
// Designed to help with the organization and spacing of vertical forms. For
23+
// horizontal forms, use the predefined grid classes.
24+
25+
.form-label {
26+
display: inline-block;
27+
margin-bottom: 0.5rem;
28+
}
29+
30+
.form-group {
31+
width: 100%;
32+
margin-bottom: 1rem;
33+
34+
&--error {
35+
.form-label {
36+
color: $input-error-color;
37+
}
38+
39+
.form-control {
40+
border-color: $input-error-color;
41+
background: lighten($input-error-color, 40);
42+
}
43+
}
44+
45+
.error {
46+
font-size: 11px;
47+
48+
color: $input-error-color;
49+
}
50+
}
51+
52+
.form-control {
53+
display: block;
54+
width: 100%;
55+
padding: $input-padding-y $input-padding-x;
56+
font-family: $font-family;
57+
font-size: $font-size;
58+
height: calc(
59+
#{$line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width * 2}
60+
);
61+
border: $input-border-width solid $input-border-color;
62+
border-radius: $input-border-radius;
63+
64+
// Placeholder
65+
&::placeholder {
66+
color: $input-border-color;
67+
opacity: 1;
68+
}
69+
}

0 commit comments

Comments
 (0)