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

refactor ribbon css

Browse Source
This commit is contained in:
Alina Beck 2020-02-24 22:22:51 +01:00
parent 4960f390f0
commit 21eae3dcd2
2 changed files with 14 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,6 +132,7 @@ $border-size-x-large: 6px;
$border-radius-x-large: 5px; $border-radius-x-large: 5px;
$border-radius-large: 4px; $border-radius-large: 4px;
$border-radius-base: 4px; $border-radius-base: 4px;
$border-radius-small: 2px;
$border-radius-rounded: 2em; $border-radius-rounded: 2em;
$border-radius-circle: 50%; $border-radius-circle: 50%;
@ -240,6 +241,7 @@ $size-height-large: 50px;
$size-height-xlarge: 60px; $size-height-xlarge: 60px;
$size-height-footer: 64px; $size-height-footer: 64px;
$size-tappable-square: 44px; $size-tappable-square: 44px;
$size-ribbon: 6px;
/** /**
* @tokens Size Width * @tokens Size Width

35
webapp/components/Ribbon/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="ribbon"> <aside class="ribbon">
<small>{{ text }}</small> <p>{{ text }}</p>
</div> </aside>
</template> </template>
<script> <script>
@ -18,30 +18,19 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.ribbon { .ribbon {
$card-shadow: 0px 12px 26px -4px rgba(0, 0, 0, 0.1); padding: $size-ribbon $size-ribbon;
//position: absolute; border-radius: $border-radius-small 0 0 $border-radius-small;
position: relative; color: $color-neutral-100;
right: -31px;
top: -31px;
font-size: 0.9em;
font-weight: bold;
padding: 6px 6px;
color: #fff;
background-color: $background-color-secondary-active; background-color: $background-color-secondary-active;
float: right; font-size: $font-size-x-small;
border-radius: 2px 0 0 2px; font-weight: $font-weight-bold;
box-shadow: $card-shadow;
z-index: 11; &::before {
// border: 1px solid #ccc;
&:before {
content: ' '; content: ' ';
position: absolute; position: absolute;
width: 0;
height: 0;
right: 0; right: 0;
bottom: -6px; bottom: -$size-ribbon;
border-width: 3px 4px 3px 3px; border-width: $border-size-large 4px $border-size-large $border-size-large;
border-style: solid; border-style: solid;
border-color: $background-color-secondary transparent transparent $background-color-secondary; border-color: $background-color-secondary transparent transparent $background-color-secondary;
} }