93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import BaseDiv from "@components/baseComponents/BaseDiv.vue";
|
|
import BaseButton from "@components/baseComponents/BaseButton.vue";
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container text-center">
|
|
<h1 class="display-1 fw-normal">Main Page</h1>
|
|
<div class="row justify-content-center">
|
|
<div class="col">These are the palettes for this site:</div>
|
|
</div>
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col">Primary:</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<BaseDiv class="col-md-1 primary">Main</BaseDiv>
|
|
<BaseDiv class="col-md-1 primary hover">Hover</BaseDiv>
|
|
<BaseDiv class="col-md-1 primary active">Active</BaseDiv>
|
|
<BaseDiv class="col-md-1 primary disabled">Disabled</BaseDiv>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<BaseDiv class="col">Secondary:</BaseDiv>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<BaseDiv class="col-md-1 secondary">Main</BaseDiv>
|
|
<BaseDiv class="col-md-1 secondary hover">Hover</BaseDiv>
|
|
<BaseDiv class="col-md-1 secondary active">Active</BaseDiv>
|
|
<BaseDiv class="col-md-1 secondary disabled">Disabled</BaseDiv>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<BaseDiv class="col">Buttons:</BaseDiv>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col">
|
|
<div class="btn-group">
|
|
<BaseButton class="btn btn-primary">Primary Button</BaseButton>
|
|
<BaseButton class="btn btn-secondary">Secondary Button</BaseButton>
|
|
<BaseButton class="btn btn-submit">Submit Button</BaseButton>
|
|
<BaseButton class="btn btn-danger">Danger Button</BaseButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.row {
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
.col-md-1 {
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
align-content: center;
|
|
padding: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
height: 100px;
|
|
}
|
|
|
|
.col-md-1.primary {
|
|
background-color: var(--color-primary);
|
|
|
|
}
|
|
|
|
.col-md-1.primary.hover {
|
|
background-color: var(--color-primary-hover);
|
|
}
|
|
|
|
.col-md-1.primary.active {
|
|
background-color: var(--color-primary-active);
|
|
}
|
|
|
|
.col-md-1.primary.disabled {
|
|
background-color: var(--color-primary-disabled);
|
|
}
|
|
|
|
.col-md-1.secondary {
|
|
background-color: var(--color-secondary);
|
|
}
|
|
|
|
.col-md-1.secondary.hover {
|
|
background-color: var(--color-secondary-hover);
|
|
}
|
|
|
|
.col-md-1.secondary.active {
|
|
background-color: var(--color-secondary-active);
|
|
}
|
|
|
|
.col-md-1.secondary.disabled {
|
|
background-color: var(--color-secondary-disabled);
|
|
}
|
|
</style> |