Skip to content

Commit

Permalink
Merge pull request #5 from angelyaaaaa/master
Browse files Browse the repository at this point in the history 
feat: add color variables into icon
  • Loading branch information
@JorgenVatle
JorgenVatle authored Aug 7, 2020
2 parents e167094 + 99e5f81 commit d4c7061
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 22 deletions.
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,10 @@
},
"homepage": "https://github.com/JorgenVatle/vue-sweetalert-icons#readme",
"dependencies": {
"color": "^3.1.2",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0"
"sass-loader": "^7.1.0",
"validate-color": "^2.1.0"
},
"devDependencies": {
"acorn": "^6.1.1",
Expand Down
2 changes: 2 additions & 0 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ If you're using Nuxt, you might need additional steps [(read more)](#usage-with-
<template>
<!-- Icon can be one of: "success", "warning", "info", "error" and "loading" -->
<sweetalert-icon icon="success" />
<!-- Color can be customized -->
<sweetalert-icon icon="warning" color="#6a737d"/>
</template>
```

Expand Down
69 changes: 48 additions & 21 deletions src/components/icon.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="sa">
<div class="sa" :style="cssVars">
<div class="sa-error" v-if="isIcon('error')">
<div class="sa-error-x">
<div class="sa-error-left"></div>
Expand Down Expand Up @@ -34,7 +34,16 @@
</template>

<script>
import validateColor from "validate-color";
import convertColor from "color";
const availableIcons = ['success', 'warning', 'error', 'info', 'loading'];
const iconColors = {
success: "#A5DC86",
warning: "#F8BB86",
error: "#F27474",
info: "#59BDED",
loading: "#758BE2"
};
export default {
name: 'sweetalert-icon',
Expand All @@ -46,6 +55,22 @@
validator: (value) => {
return availableIcons.indexOf(value) !== -1;
}
},
color: {
type: String,
validator: validateColor
}
},
computed: {
cssVars() {
const outputColor = validateColor(this.color)
? this.color
: iconColors[this.icon];
return {
"--icon-color": outputColor,
"--icon-color-alpha": convertColor(outputColor).alpha(0.25)
};
}
},
Expand All @@ -65,6 +90,8 @@
* @link https://vuejsfeed.com/blog/codepen-collection-sweetalert-icons-with-animations
*/
$icon-color: var(--icon-color);
$icon-color-alpha: var(--icon-color-alpha);
body {
// Background used as an overlay for certain animations.
// Should be set to the same colour as the background of your containing element.
Expand All @@ -81,22 +108,22 @@
/* Loading Icon */
&-loading {
border-radius: 50%;
border: 4px solid rgba(90, 107, 227, 0.22);
border: 4px solid $icon-color-alpha;
box-sizing: content-box;
height: 80px;
left: -4px;
position: relative;
top: -4px;
width: 80px;
z-index: 2;
border-top: 4px solid #758be2;
border-top: 4px solid $icon-color;
animation: animateLoadingSpin 0.75s infinite;
}
/* Error Icon */
&-error {
border-radius: 50%;
border: 4px solid #F27474;
border: 4px solid $icon-color;
box-sizing: content-box;
height: 80px;
padding: 0;
Expand Down Expand Up @@ -134,7 +161,7 @@
}
&-placeholder {
border-radius: 50%;
border: 4px solid rgba(200, 0, 0, .2);
border: 4px solid $icon-color-alpha;
box-sizing: content-box;
height: 80px;
left: -4px;
Expand All @@ -158,7 +185,7 @@
height: 5px;
position: absolute;
z-index: 2;
background-color: #F27474;
background-color: $icon-color;
top: 37px;
width: 47px;
}
Expand All @@ -177,7 +204,7 @@
/* Warning Icon */
&-warning {
border-radius: 50%;
border: 4px solid #F8BB86;
border: 4px solid $icon-color;
box-sizing: content-box;
height: 80px;
padding: 0;
Expand All @@ -201,7 +228,7 @@
z-index: 1;
}
&-body {
background-color: #F8BB86;
background-color: $icon-color;
border-radius: 2px;
height: 47px;
left: 50%;
Expand All @@ -213,7 +240,7 @@
animation: pulseWarningIns 0.75s infinite alternate;
}
&-dot {
background-color: #F8BB86;
background-color: $icon-color;
border-radius: 50%;
bottom: 10px;
height: 7px;
Expand All @@ -229,7 +256,7 @@
/* Info Icon */
&-info {
border-radius: 50%;
border: 4px solid #59bded;
border: 4px solid $icon-color;
box-sizing: content-box;
height: 80px;
padding: 0;
Expand All @@ -253,7 +280,7 @@
z-index: 1;
}
&-body {
background-color: #59bded;
background-color: $icon-color;
border-radius: 2px;
height: 47px;
left: 50%;
Expand All @@ -265,7 +292,7 @@
animation: pulseInfoIns 0.75s infinite alternate;
}
&-dot {
background-color: #59bded;
background-color: $icon-color;
border-radius: 50%;
bottom: 10px;
height: 7px;
Expand All @@ -281,7 +308,7 @@
/* Success Icon */
&-success {
border-radius: 50%;
border: 4px solid #A5DC86;
border: 4px solid $icon-color;
box-sizing: content-box;
height: 80px;
padding: 0;
Expand Down Expand Up @@ -315,7 +342,7 @@
}
&-placeholder {
border-radius: 50%;
border: 4px solid rgba(165, 220, 134, 0.25);
border: 4px solid $icon-color-alpha;
box-sizing: content-box;
height: 80px;
left: -4px;
Expand All @@ -335,7 +362,7 @@
z-index: 1;
}
&-tip, &-long {
background-color: #A5DC86;
background-color: $icon-color;
border-radius: 2px;
height: 5px;
position: absolute;
Expand Down Expand Up @@ -429,17 +456,17 @@
opacity: 0.5;
}
100% {
background-color: #F8BB86;
background-color: $icon-color;
transform: scale(2);
opacity: 0;
}
}
@keyframes pulseWarningIns {
0% {
background-color: #F8D486;
filter: brightness(1.2);
}
100% {
background-color: #F8BB86;
filter: brightness(1);
}
}
Expand All @@ -465,17 +492,17 @@
opacity: 0.5;
}
100% {
background-color: #59bded;
background-color: $icon-color;
transform: scale(2);
opacity: 0;
}
}
@keyframes pulseInfoIns {
0% {
background-color: #59bded;
background-color: $icon-color;
}
100% {
background-color: #59bded;
background-color: $icon-color;
}
}
Expand Down

0 comments on commit d4c7061

Please sign in to comment.