ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

use scss tokens for counter icon and loading spinner

Browse Source
This commit is contained in:
Alina Beck 2020-01-09 14:47:14 +05:30
parent b71638d29f
commit 70d632e392
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/assets/_new/styles/tokens.scss
View File

@ -258,6 +258,13 @@ $size-avatar-x-large: 114px;
$size-button-base: 36px; $size-button-base: 36px;
$size-button-small: 26px; $size-button-small: 26px;
/**
* @tokens Size Buttons
* @presenter Spacing
*/
$size-icon-base: 16px;
/** /**
* @tokens Shadow * @tokens Shadow
* @presenter Shadow * @presenter Shadow

10
webapp/components/_new/generic/CounterIcon/CounterIcon.vue
View File

@ -33,21 +33,21 @@ export default {
> .count { > .count {
position: absolute; position: absolute;
top: -4px; top: -$space-xx-small;
right: 0; right: 0;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 16px; height: $size-icon-base;
min-width: 16px; min-width: $size-icon-base;
padding: 3px; padding: 3px; // magic number to center count
border-radius: 50%; border-radius: 50%;
transform: translateX(50%); transform: translateX(50%);
color: $color-neutral-100; color: $color-neutral-100;
background-color: $color-primary; background-color: $color-primary;
font-size: 10px; font-size: 10px; // magic number to center count
line-height: 1; line-height: 1;
text-align: center; text-align: center;

2
webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
View File

@ -12,7 +12,7 @@ export default {
<style lang="scss"> <style lang="scss">
.loading-spinner { .loading-spinner {
height: 36px; height: $size-button-base;
overflow: hidden; overflow: hidden;
stroke: currentColor; stroke: currentColor;
animation: rotate 16s linear infinite; animation: rotate 16s linear infinite;