ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +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-large: 4px;
$border-radius-base: 4px;
$border-radius-small: 2px;
$border-radius-rounded: 2em;
$border-radius-circle: 50%;
@ -240,6 +241,7 @@ $size-height-large: 50px;
$size-height-xlarge: 60px;
$size-height-footer: 64px;
$size-tappable-square: 44px;
$size-ribbon: 6px;
/**
* @tokens Size Width

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

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