Commit ab95ea5f authored by sarah's avatar sarah

styling buttons forms basic pages and adding all types

parent 23bd5048
<select id="title" name="{{ name }}">
<option value="" selected>Please choose</option>
<option value="" selected>Please choose</option>
<option value="diary">diary</option>
<option value="manifesto">manifesto</option>
......@@ -7,4 +7,28 @@
<option value="scribble">scribble</option>
<option value="sticky">sticky</option>
<option value="draft">draft</option>
<option value="note">note</option>
<option value="sticky-note">sticky note</option>
<option value="memo">memo</option>
<option value="meeting-notes">meeting notes</option>
<option value="transcript">transcript</option>
<option value="letter">letter</option>
<option value="message">message</option>
<option value="document">document</option>
<option value="book">book</option>
<option value="collection">collection</option>
<option value="library">library</option>
<option value="archive">archive</option>
<option value="drawing">drawing</option>
<option value="list">list</option>
<option value="poetry">poetry</option>
<option value="tutorial">tutorial</option>
<option value="theory">theory</option>
<option value="litterature">litterature</option>
<option value="fable">fable</option>
<option value="fiction">fiction</option>
<option value="nonfiction">nonfiction</option>
<option value="manual">manual</option>
<option value="score">score</option>
</select>
<form class="form" action="" method="get">
<!-- <legend>Create pad</legend> -->
<h1>Create a pad</h1>
{% include '@molecules/input_group.twig' with {name: "name", title: "Pad name", type: "text"} %}
<h3>Choose a type</h3>
{% include '@molecules/select_group.twig' with {name: "name", title: "Choose a type"} %}
<h3>Choose a second type</h3>
{% include '@molecules/select_group.twig' with {name: "name", title: "Choose a second type"} %}
{% include '@atoms/button.twig' with {title: "Create Pad", type: "primary"} %}
{% include '@atoms/button.twig' with {title: "Create", type: "primary"} %}
</form>
<div class="switch">
<ul class="switch__modes">
<li class="switch__mode {% if mode == "read" %}active{% endif %}"><a href="{{ routes.padRead }}">Read</a></li>
<li class="switch__mode {% if mode == "read" %}active{% endif %}"><a href="{{ routes.padRead }}">read</a></li>
<li class="switch__mode {% if mode == "write" %}active{% endif %}"><a href="{{ routes.padWrite }}">write</a></li>
<li class="switch__mode {% if mode == "print" %}active{% endif %}"><a href="{{ routes.padPrint }}">print</a></li>
</ul>
......
......@@ -3,9 +3,10 @@
========================================================================== */
:root {
--public-color: #6c00a3;
--public-color: #8400c8;
--editing-color: #d43a00;
--links: #ff6600;
--backgrounds: #f7c4cc;
}
......@@ -61,25 +62,62 @@ li { list-style-type: none; }
========================================================================== */
.button {
padding: 0;
/* padding: 0;
border: none;
margin-top: 4.2em;
background: transparent;
color: inherit;
font-size: 1.1em;
font-family: 'Moche';
font-family: 'Moche'; */
font-family: Monospace;
font-size: 1.2em;
border: 1px solid var(--links);
padding: 0.25em 0.75em;
margin: 1.2em 0;
color: white;
background-color: var(--links);
border-color: white;
margin-top: 2em;
margin-bottom: 0.5em;
}
.button:hover { color: var(--links); }
.button:hover {
color: var(--links);
background-color: var(--backgrounds);
}
.input-group { margin-top: 1.2em; }
h3 + .input-group {
margin-top: 0;
}
.panel h3 {
margin: 1em 0 0.25em 0;
font-size: 0.9em;
color: #ffffff8f;
}
.input-group label {
display: block;
margin-bottom: 8px;
display: none;
}
.input-group input {
input {
width: 100%;
box-sizing: border-box;
padding: 4px;
border: 2px solid var(--public-color);
border-top: none;
font-family: inherit;
color: inherit;
background: transparent;
}
.panel input {
width: 100%;
box-sizing: border-box;
padding: 4px;
......@@ -100,10 +138,28 @@ li { list-style-type: none; }
max-width: 100%;
margin: 0 auto;
}
.panel select {
border: 1px solid white;
background-color: var(--public-color);
padding: 0.25em 0.75em;
color: white;
font-family: Mono;
font-size: 0.9em;
appearance: none;
/* this is must */ -webkit-appearance: none;
-moz-appearance: none; content: "\27A4";
}
.panel select::after {
background-color: red;
content: "\27A4";
}
.panel h1 {
margin-top: 1em;
margin-bottom: 0.5em;
font-size: 1.5em;
}
/* ==========================================================================
Page layout
......@@ -135,7 +191,7 @@ li { list-style-type: none; }
.page__content {
overflow: auto;
padding: 1.2em;
padding-top: 0;
padding-top: 1em;
grid-row: 1;
grid-column: 1 / 2;
}
......@@ -444,7 +500,7 @@ li { list-style-type: none; }
.switch {
align-items: center;
padding: 1em 0;
padding: 0 0 1em 0;
background-color: white;
}
......@@ -482,7 +538,7 @@ li { list-style-type: none; }
margin: 1.2em 0;
color: var(--links);
white-space: pre-wrap;
background-color: lightpink;
background-color: var(--backgrounds);
}
.cheatsheet code {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment