mirror of
https://github.com/papercss/papercss
synced 2024-05-17 21:26:42 +02:00
Outline buttons
This commit is contained in:
parent
780c304f98
commit
70b2a1422f
|
@ -53,3 +53,21 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX)
|
|||
<button class="btn-warning">Warning</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",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"postinstall": "gulp postinstall",
|
||||
"stylelint": "node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
|
||||
"stylelint": "node node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
@ -72,7 +72,6 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@each $colorName, $color, $color-light, $color-text in $colors {
|
||||
.alert-#{$colorName} {
|
||||
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),
|
||||
(danger, $danger, $danger-light, $danger-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 */
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue