refactor: replace font icons with svg icons
This commit is contained in:
woothu
@@ -1,852 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Colors.vue renders correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="card"
|
||||
>
|
||||
<!---->
|
||||
<header
|
||||
class="card-header"
|
||||
>
|
||||
<i
|
||||
class="cui-drop"
|
||||
/>
|
||||
Theme colors
|
||||
|
||||
</header>
|
||||
|
||||
<div
|
||||
class="card-body"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-primary"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand Primary Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-secondary"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand Secondary Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-success"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand Success Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-danger"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand Danger Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-warning"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand Warning Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-info"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand Info Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-light"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand Light Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-dark"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand Dark Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="card"
|
||||
>
|
||||
<!---->
|
||||
<header
|
||||
class="card-header"
|
||||
>
|
||||
<i
|
||||
class="cui-drop"
|
||||
/>
|
||||
Grays
|
||||
|
||||
</header>
|
||||
|
||||
<div
|
||||
class="card-body"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-gray-100"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand 100 Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-gray-200"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand 200 Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-gray-300"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand 300 Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-gray-400"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand 400 Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-gray-500"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand 500 Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-gray-600"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand 600 Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-gray-700"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand 700 Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-gray-800"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand 800 Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
|
||||
>
|
||||
<div
|
||||
class="theme-color w-75 rounded mb-3 bg-gray-900"
|
||||
style="padding-top: 75%;"
|
||||
/>
|
||||
|
||||
<h6>
|
||||
Brand 900 Color
|
||||
</h6>
|
||||
|
||||
<table
|
||||
class="w-100"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
HEX:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
#ffffff
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td
|
||||
class="text-muted"
|
||||
>
|
||||
RGB:
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="font-weight-bold"
|
||||
>
|
||||
rgb(255, 255, 255)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
Reference in New Issue
Block a user