mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-04 21:25:24 +00:00
added a scss components style guide
This commit is contained in:
Bram Wiepjes
parent
47738ba019
commit
730dd41616
4 changed files with 553 additions and 0 deletions
web-frontend
|
|
@ -29,6 +29,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
.margin-bottom-1 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.margin-bottom-2 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.margin-bottom-3 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.margin-bottm-4 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
|
|
|
|||
29
web-frontend/assets/scss/components/_style_guide.scss
Normal file
29
web-frontend/assets/scss/components/_style_guide.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.style-guide-wrapper {
|
||||
@include absolute(0);
|
||||
|
||||
z-index: $z-index-layout-col-3;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.style-guide {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
width: 1200px;
|
||||
padding: 40px 15px;
|
||||
}
|
||||
|
||||
.style-guide-buttons {
|
||||
.button {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.style-guide-contexts {
|
||||
.context,
|
||||
.select {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 40px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -29,3 +29,4 @@
|
|||
@import 'components/box_page';
|
||||
@import 'components/loading';
|
||||
@import 'components/notifications';
|
||||
@import "components/style_guide";
|
||||
|
|
|
|||
507
web-frontend/pages/style-guide.vue
Normal file
507
web-frontend/pages/style-guide.vue
Normal file
|
|
@ -0,0 +1,507 @@
|
|||
<template>
|
||||
<div>
|
||||
<Notifications></Notifications>
|
||||
<div class="style-guide-wrapper">
|
||||
<div class="style-guide">
|
||||
<div class="margin-bottom-3">
|
||||
<h1><h1>Heading 1</h1></h1>
|
||||
<h2><h2>Heading 2</h2></h2>
|
||||
<h3><h3>Heading 3</h3></h3>
|
||||
</div>
|
||||
<div class="margin-bottom-3">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
|
||||
elit. Pellentesque eget ipsum eu risus congue posuere vel at erat.
|
||||
Phasellus mattis est sit amet dui sodales, a interdum turpis
|
||||
interdum. Sed eu lobortis libero. Phasellus
|
||||
<strong>vestibulum</strong>, nunc sed elementum scelerisque, tellus
|
||||
felis pretium lectus, eget laoreet quam est in massa. Maecenas non
|
||||
dapibus dolor. Mauris <em>condimentum</em> iaculis dui vel finibus.
|
||||
Nullam consequat non arcu at vehicula. Maecenas ac consequat ipsum,
|
||||
sed viverra dui. Donec dignissim suscipit ultrices. Nullam quis
|
||||
mattis nulla, et venenatis justo. Curabitur scelerisque dictum
|
||||
<a href="#">velit</a>, eget vestibulum lacus gravida in. Praesent id
|
||||
lorem volutpat, venenatis quam vel, ultricies leo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin-bottom-3">
|
||||
<div class="control">
|
||||
<label class="control-label">Small text field</label>
|
||||
<div class="control-elements">
|
||||
<input type="text" class="input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<label class="control-label">Small with error</label>
|
||||
<div class="control-elements">
|
||||
<input type="text" class="input input-error" />
|
||||
<div class="error">Please do something different</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<label class="control-label">Small text field</label>
|
||||
<div class="control-elements">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="Voer hier iets in"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<label class="control-label">Large text field</label>
|
||||
<div class="control-elements">
|
||||
<input
|
||||
type="text"
|
||||
class="input input-large"
|
||||
placeholder="Voer hier iets in"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<label class="control-label">Large password field</label>
|
||||
<div class="control-elements">
|
||||
<input
|
||||
type="password"
|
||||
class="input input-large"
|
||||
placeholder="Please enter your password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="margin-bottom-3">
|
||||
<div class="alert alert-has-icon">
|
||||
<div class="alert-icon">
|
||||
<i class="fas fa-exclamation"></i>
|
||||
</div>
|
||||
<div class="alert-title">Notification message</div>
|
||||
<p class="alert-content">
|
||||
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
|
||||
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui
|
||||
ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec
|
||||
viverra urna. Praesent.
|
||||
</p>
|
||||
</div>
|
||||
<div class="alert">
|
||||
<div class="alert-title">Notification message</div>
|
||||
<p class="alert-content">
|
||||
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
|
||||
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui
|
||||
ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec
|
||||
viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla
|
||||
tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla
|
||||
lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem
|
||||
lacinia, sagittis quam sed, pellentesque orci. Aenean non
|
||||
consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan
|
||||
felis euismod.
|
||||
</p>
|
||||
</div>
|
||||
<div class="alert alert-success alert-has-icon">
|
||||
<div class="alert-icon">
|
||||
<i class="fas fa-exclamation"></i>
|
||||
</div>
|
||||
<div class="alert-title">Notification message</div>
|
||||
<p class="alert-content">
|
||||
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
|
||||
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui
|
||||
ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec
|
||||
viverra urna. Praesent.
|
||||
</p>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-has-icon">
|
||||
<div class="alert-icon">
|
||||
<i class="fas fa-exclamation"></i>
|
||||
</div>
|
||||
<div class="alert-title">Notification message</div>
|
||||
<p class="alert-content">
|
||||
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
|
||||
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui
|
||||
ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec
|
||||
viverra urna. Praesent.
|
||||
</p>
|
||||
</div>
|
||||
<div class="alert alert-error alert-has-icon">
|
||||
<div class="alert-icon">
|
||||
<i class="fas fa-exclamation"></i>
|
||||
</div>
|
||||
<div class="alert-title">Notification message</div>
|
||||
<p class="alert-content">
|
||||
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
|
||||
elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui
|
||||
ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec
|
||||
viverra urna. Praesent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="margin-bottom-3 style-guide-buttons">
|
||||
<a class="button">a.button</a>
|
||||
<a class="button disabled">a.button[disabled]</a>
|
||||
<a class="button button-success">a.button.button-success</a>
|
||||
<a class="button button-warning">a.button.button-warning</a>
|
||||
<a class="button button-error">a.button.button-error</a>
|
||||
<a class="button">
|
||||
a.button
|
||||
<i class="button-icon fas fa-lock-open"></i>
|
||||
</a>
|
||||
<a class="button">
|
||||
<i class="button-icon fas fa-arrow-left"></i>
|
||||
a.button
|
||||
</a>
|
||||
<a class="button button-ghost">a.button.button-ghosts</a>
|
||||
<a class="button">
|
||||
<i class="fas fa-user-check"></i>
|
||||
</a>
|
||||
<a class="button button-ghost">
|
||||
<i class="fas fa-user-check"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="margin-bottom-3 style-guide-buttons">
|
||||
<button class="button">button.button</button>
|
||||
<button class="button" disabled>button.button[disabled]</button>
|
||||
<button class="button button-success">
|
||||
button.button.button-success
|
||||
</button>
|
||||
<button class="button button-warning">
|
||||
button.button.button-warning
|
||||
</button>
|
||||
<button class="button button-error">
|
||||
button.button.button-error
|
||||
</button>
|
||||
<button class="button">
|
||||
button.button
|
||||
<i class="button-icon fas fa-lock-open"></i>
|
||||
</button>
|
||||
<button class="button">
|
||||
<i class="button-icon fas fa-arrow-left"></i>
|
||||
button.button
|
||||
</button>
|
||||
<button class="button button-ghost">
|
||||
button.button.ghost-button
|
||||
</button>
|
||||
<button class="button">
|
||||
<i class="fas fa-user-check"></i>
|
||||
</button>
|
||||
<button class="button button-ghost">
|
||||
<i class="fas fa-user-check"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="margin-bottom-3 style-guide-buttons">
|
||||
<a class="button button-large">a.button.button-large</a>
|
||||
<a class="button button-large disabled"
|
||||
>a.button.disabled.button-large</a
|
||||
>
|
||||
<a class="button button-large button-success"
|
||||
>a.button.button-large.button-success</a
|
||||
>
|
||||
<a class="button button-large button-warning"
|
||||
>a.button.button-large.button-warning</a
|
||||
>
|
||||
<a class="button button-large button-error"
|
||||
>a.button.button-large.button-error</a
|
||||
>
|
||||
<a class="button button-large">
|
||||
a.button.button-large
|
||||
<i class="button-icon fas fa-lock-open"></i>
|
||||
</a>
|
||||
<a class="button button-large">
|
||||
<i class="button-icon fas fa-arrow-left"></i>
|
||||
a.button.button-large
|
||||
</a>
|
||||
<a class="button button-large button-ghost">a.button.button-ghosts</a>
|
||||
<a class="button button-large">
|
||||
<i class="fas fa-user-check"></i>
|
||||
</a>
|
||||
<a class="button button-large button-ghost">
|
||||
<i class="fas fa-user-check"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="margin-bottom-3">
|
||||
<a class="button button-large button-loading">Loading</a>
|
||||
<a class="button button-loading">Loading</a>
|
||||
</div>
|
||||
<div class="margin-bottom-3 style-guide-contexts">
|
||||
<div class="context">
|
||||
<div class="context-menu-title">Vehicles</div>
|
||||
<ul class="context-menu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||
Rename database
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||
Delete table
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="select">
|
||||
<div class="select-search">
|
||||
<i class="select-search-icon fas fa-search"></i>
|
||||
<input
|
||||
type="text"
|
||||
class="select-search-input"
|
||||
placeholder="Search views"
|
||||
/>
|
||||
</div>
|
||||
<ul class="select-items">
|
||||
<li class="select-item active">
|
||||
<a href="#" class="select-item-link">Group name 1</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">Group name 2</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item select-item-loading">
|
||||
<a href="#" class="select-item-link">Group name 3</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">Group name 4</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="select-footer">
|
||||
<a href="#" class="select-footer-button">
|
||||
<i class="fas fa-plus"></i>
|
||||
Do something
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select">
|
||||
<div class="select-search">
|
||||
<i class="select-search-icon fas fa-search"></i>
|
||||
<input
|
||||
type="text"
|
||||
class="select-search-input"
|
||||
placeholder="Search views"
|
||||
/>
|
||||
</div>
|
||||
<ul class="select-items">
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">
|
||||
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
|
||||
Grid view name
|
||||
</a>
|
||||
<a href="#" class="select-item-options" data-context=".context">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">
|
||||
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
|
||||
Grid view option 2.
|
||||
</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">
|
||||
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
|
||||
Grid view 2
|
||||
</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">
|
||||
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
|
||||
Grid view 3
|
||||
</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="select-footer">
|
||||
<div class="select-footer-multiple">
|
||||
<div class="select-footer-multiple-label">Add a view:</div>
|
||||
<a href="#" class="select-footer-multiple-item">
|
||||
<i class="select-footer-multiple-icon fas fa-th"></i>
|
||||
Grid
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="margin-bottom-3">
|
||||
<a class="button" @click="$refs.context1.toggle($event.target)">
|
||||
toggle context
|
||||
<i class="fas fa-pencil"></i>
|
||||
</a>
|
||||
<Context ref="context1">
|
||||
<div class="context-menu-title">Vehicles</div>
|
||||
<ul class="context-menu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||
This does nothing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="$refs.context2.toggle($event.target)">
|
||||
Open another context
|
||||
</a>
|
||||
<Context ref="context2">
|
||||
<div class="context-menu-title">Open modal</div>
|
||||
<ul class="context-menu">
|
||||
<li>
|
||||
<a @click="$refs.modal1.show()">
|
||||
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||
Click to open modal
|
||||
</a>
|
||||
</li>
|
||||
<Modal ref="modal1">
|
||||
<h2 class="box-title">Modal inside a context</h2>
|
||||
<a
|
||||
class="button"
|
||||
@click="$refs.context3.toggle($event.target)"
|
||||
>
|
||||
toggle context
|
||||
<i class="fas fa-pencil"></i>
|
||||
</a>
|
||||
<Context ref="context3">
|
||||
<div class="context-menu-title">Vehicles</div>
|
||||
<ul class="context-menu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||
This does nothing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="$refs.context4.toggle($event.target)">
|
||||
Open another context
|
||||
</a>
|
||||
<Context ref="context4">
|
||||
<div class="context-menu-title">End!</div>
|
||||
</Context>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i
|
||||
class="context-menu-icon fas fa-fw fa-trash"
|
||||
></i>
|
||||
This does nothing
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Context>
|
||||
</Modal>
|
||||
</ul>
|
||||
</Context>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||
This does nothing
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Context>
|
||||
<a class="button" @click="$refs.modal2.show()">show modal</a>
|
||||
<Modal ref="modal2">
|
||||
<h2 class="box-title">An example modal</h2>
|
||||
<p>
|
||||
Mauris dignissim massa ac justo consequat porttitor. Lorem ipsum
|
||||
dolor sit amet, consectetur adipiscing elit. Mauris vel tellus
|
||||
suscipit, gravida libero a, egestas urna. Quisque tellus nisi,
|
||||
consequat et interdum non, posuere sed lacus. Morbi fermentum
|
||||
lorem sed vestibulum tristique. Vivamus scelerisque molestie
|
||||
ligula vel elementum. Etiam metus lacus, commodo sit amet
|
||||
tristique luctus, pulvinar eget justo. Fusce sed vehicula dolor.
|
||||
Aliquam sollicitudin fringilla augue, posuere maximus orci
|
||||
sollicitudin a. Vestibulum egestas tristique nunc, tristique
|
||||
dignissim mauris dictum imperdiet. Mauris ultrices ac eros at
|
||||
fringilla. Praesent ut tincidunt dui.
|
||||
</p>
|
||||
</Modal>
|
||||
<a
|
||||
class="button button-success"
|
||||
@click="
|
||||
$store.dispatch('notification/success', {
|
||||
title: 'Custom success notification',
|
||||
message: 'Mauris dignissim massa ac justo consequat porttitor.'
|
||||
})
|
||||
"
|
||||
>toggle success notification</a
|
||||
>
|
||||
<a
|
||||
class="button button-error"
|
||||
@click="
|
||||
$store.dispatch('notification/error', {
|
||||
title: 'Custom error notification',
|
||||
message: 'Mauris dignissim massa ac justo consequat porttitor.'
|
||||
})
|
||||
"
|
||||
>toggle error notification</a
|
||||
>
|
||||
<a
|
||||
class="button button-warning"
|
||||
@click="
|
||||
$store.dispatch('notification/warning', {
|
||||
title: 'Custom warning notification',
|
||||
message: 'Mauris dignissim massa ac justo consequat porttitor.'
|
||||
})
|
||||
"
|
||||
>toggle warning notification</a
|
||||
>
|
||||
<a
|
||||
class="button"
|
||||
@click="
|
||||
$store.dispatch('notification/info', {
|
||||
title: 'Custom info notification',
|
||||
message: 'Mauris dignissim massa ac justo consequat porttitor.'
|
||||
})
|
||||
"
|
||||
>toggle info notification</a
|
||||
>
|
||||
</div>
|
||||
<div class="margin-bottom-3">
|
||||
<div class="modal-box">
|
||||
<a class="modal-close">
|
||||
<i class="fas fa-times"></i>
|
||||
</a>
|
||||
<h2 class="box-title">An example modal</h2>
|
||||
<p>
|
||||
Mauris dignissim massa ac justo consequat porttitor. Lorem ipsum
|
||||
dolor sit amet, consectetur adipiscing elit. Mauris vel tellus
|
||||
suscipit, gravida libero a, egestas urna. Quisque tellus nisi,
|
||||
consequat et interdum non, posuere sed lacus. Morbi fermentum
|
||||
lorem sed vestibulum tristique. Vivamus scelerisque molestie
|
||||
ligula vel elementum. Etiam metus lacus, commodo sit amet
|
||||
tristique luctus, pulvinar eget justo. Fusce sed vehicula dolor.
|
||||
Aliquam sollicitudin fringilla augue, posuere maximus orci
|
||||
sollicitudin a. Vestibulum egestas tristique nunc, tristique
|
||||
dignissim mauris dictum imperdiet. Mauris ultrices ac eros at
|
||||
fringilla. Praesent ut tincidunt dui.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Notifications from '@/components/notifications/Notifications'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Notifications
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue