Skip to content

Commit

Permalink
style: 4 tabs to 2 tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
Chrinsieboy committed Jan 11, 2024
1 parent 61aa5cd commit c2c2e35
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 63 deletions.
49 changes: 25 additions & 24 deletions src/resources/vue/components/Box.vue
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
<template>
<div class="box" :style="{ backgroundColor: color, flexDirection: direction }">
<slot></slot>
</div>
<div class="box" :style="{ backgroundColor: color, flexDirection: direction }">
<slot></slot>
</div>
</template>

<script>
export default {
name: 'Box',
props: {
color: {
type: String,
default: '#f2f2f2',
},
direction: {
type: String,
default: 'column',
},
},
};
export default {
name: 'Box',
props: {
color: {
type: String,
default: '#f2f2f2',
},
direction: {
type: String,
default: 'column',
},
},
};
</script>
<style lang="scss">
.box {
padding: 30px;
border-radius: 5px;
width: fit-content;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
padding: 30px;
border-radius: 5px;
width: fit-content;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
77 changes: 38 additions & 39 deletions src/resources/vue/components/ItemCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<div class="left">
<Icon icon="book" size="90" color="white" />
<div class="info">
<p>{{ title }}</p>
<p>{{ description }}</p>
<p>{{ title }}</p>
<p>{{ description }}</p>
</div>
</div>
<div v-if="warning" class="right">
Expand All @@ -14,56 +14,55 @@
</template>

<script>
import Icon from "./icon.vue";
import Icon from "./icon.vue";
export default {
name: "ItemCard",
props: {
title: String,
description: String,
warning: Boolean,
},
components: {
Icon,
},
};
export default {
name: "ItemCard",
props: {
title: String,
description: String,
warning: Boolean,
},
components: {
Icon,
},
};
</script>

<style lang="scss">
.item-card {
width: 667px;
height: 116px;
background: #1d243a;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px;
.left {
.item-card {
width: 667px;
height: 116px;
background: #1d243a;
border-radius: 8px;
display: flex;
align-items: center;
width: 100%;
height: 100%;
justify-content: space-between;
padding: 13px;
.info {
margin-left: 20px;
.left {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
p {
.info {
margin-left: 20px;
display: flex;
flex-direction: column;
p {
color: #fff;
font-size: 32px;
font-family: "Outfit";
font-weight: 700;
}
}
}
}
.right {
display: flex;
align-items: flex-start;
height: 100%;
.right {
display: flex;
align-items: flex-start;
height: 100%;
}
}
}
</style>
</style>

0 comments on commit c2c2e35

Please sign in to comment.