mirror of
https://github.com/papercss/papercss
synced 2024-06-07 16:32:15 +02:00
Outline buttons
This commit is contained in:
parent
837c4321b9
commit
1570e3ba33
|
@ -53,3 +53,21 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX)
|
||||||
<button class="btn-warning">Warning</button>
|
<button class="btn-warning">Warning</button>
|
||||||
<button class="btn-danger">Danger</button>
|
<button class="btn-danger">Danger</button>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Outline colors
|
||||||
|
|
||||||
|
<input type="button" class="paper-btn btn-primary-outline" value="Primary"/>
|
||||||
|
<input type="button" class="btn-secondary-outline" value="Secondary"/>
|
||||||
|
<button class="btn-success-outline">Success</button>
|
||||||
|
<button class="btn-warning-outline">Warning</button>
|
||||||
|
<a class="btn-danger-outline">Danger</a>
|
||||||
|
|
||||||
|
#### Code:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<input type="button" class="paper-btn btn-primary-outline" value="Primary"/>
|
||||||
|
<input type="button" class="btn-secondary-outline" value="Secondary"/>
|
||||||
|
<button class="btn-success-outline">Success</button>
|
||||||
|
<button class="btn-warning-outline">Warning</button>
|
||||||
|
<a class="btn-danger-outline">Danger</a>
|
||||||
|
```
|
|
@ -8,7 +8,7 @@
|
||||||
"build": "node node_modules/gulp/bin/gulp.js build",
|
"build": "node node_modules/gulp/bin/gulp.js build",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"postinstall": "gulp postinstall",
|
"postinstall": "gulp postinstall",
|
||||||
"stylelint": "node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
|
"stylelint": "node node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
@ -72,7 +72,6 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@each $colorName, $color, $color-light, $color-text in $colors {
|
@each $colorName, $color, $color-light, $color-text in $colors {
|
||||||
.alert-#{$colorName} {
|
.alert-#{$colorName} {
|
||||||
background-color: $color-light;
|
background-color: $color-light;
|
||||||
|
@ -94,3 +93,24 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@each $colorName, $color, $color-light, $color-text in $colors-outline {
|
||||||
|
button.btn-#{$colorName},
|
||||||
|
.paper-btn.btn-#{$colorName},
|
||||||
|
[type='button'].btn-#{$colorName} {
|
||||||
|
background-color: $white;
|
||||||
|
border-color: darken($color-light, 10%);
|
||||||
|
color: $color-text;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $color;
|
||||||
|
background-color: $color-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
&:active {
|
||||||
|
background-color: darken($color-light, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -45,6 +45,13 @@ $colors: (primary, $primary, $primary-light, $primary-text),
|
||||||
(warning, $warning, $warning-light, $warning-text),
|
(warning, $warning, $warning-light, $warning-text),
|
||||||
(danger, $danger, $danger-light, $danger-text),
|
(danger, $danger, $danger-light, $danger-text),
|
||||||
(muted, $muted, $muted-light, $muted-text);
|
(muted, $muted, $muted-light, $muted-text);
|
||||||
|
|
||||||
|
$colors-outline: (primary-outline, $primary, $primary-light, $primary),
|
||||||
|
(secondary-outline, $secondary, $secondary-light, $secondary-text),
|
||||||
|
(success-outline, $success, $success-light, $success-text),
|
||||||
|
(warning-outline, $warning, $warning-light, $warning-text),
|
||||||
|
(danger-outline, $danger, $danger-light, $danger-text),
|
||||||
|
(muted-outline, $muted, $muted-light, $muted-text);
|
||||||
/* stylelint-enable */
|
/* stylelint-enable */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue