Des formulaires magnifiques

avisstage/sass/screen.scss

@@ -9,16 +9,19 @@ $jaune: #FCEB26;
 $vert: #27E35F;
 $rouge: #C21B26;
 
+$textfont: 'Dosis', sans-serif;
+$headfont: Podkova, serif;
+
 body {
     background: $fond;
-    font-family: 'Dosis', sans-serif;
+    font-family: $textfont;
     line-height: 1.4;
     font-size: 19px;
     font-weight: 300;
 }
 
 h1, h2, h3, h4 {
-    font-family: Podkova;
+    font-family: $headfont;
 }
 
 h1 {
@@ -33,7 +36,7 @@ h3 {
     font-size: 1.4em;
 }
 
-b {
+b, strong, em {
     font-weight: bold;
 }
 
@@ -68,7 +71,7 @@ header {
                 padding: 0 20px;
                 height: 90px;
                 vertical-align: middle;
-                color: #fff;
+                color: lighten($fond, 40%);
                 
                 &:hover {
                     background: $barre * 0.6;
@@ -327,5 +330,149 @@ article.stage {
             color: $fond;
         }
     }
-
+}
+
+
+// Formulaires
+
+input, textarea, select, div.tinymce {
+    background: #fff;
+    font-size: 1em;
+    font-family: $textfont;
+    line-height: 1.3em;
+    font-weight: 500;
+    padding: 5px;
+}
+
+input[type='text'], input[type='password'], textarea, select {
+    border:none;
+    border-bottom: 1px solid $fond;
+    width: 100%;
+    transition: border 1s ease-out, background 1s ease-out;
+    
+    &:focus {
+        background-color: lighten($fond, 50%);
+    }
+}
+
+
+select {
+    -moz-appearance: none;
+    appearance: none;
+    width: auto;
+    margin-right: 5px;
+}
+
+textarea, div.tinymce {
+    border:none;
+    border-left: 1px solid $fond;
+    height: auto;
+    min-height: 200px;
+    transition: border 1s ease-out, background 1s ease-out;
+}
+
+div.tinymce.mce-edit-focus {
+    background-color: lighten($fond, 50%);
+    outline: none;
+}
+
+textarea {
+    height: 200px;
+    resize: vertical;
+}
+
+form {
+    .field {
+        margin: 5px 0;
+        display: flex;
+        background: #fff;
+        padding: 10px;
+        
+        label, .label {
+            display:inline-block;
+            width: 250px;
+            text-align: right;
+            margin-right: 12px;
+            padding-top: 5px;
+            flex-shrink: 0;
+        }
+        label {
+            font-family: $headfont;
+            font-weight: bold;
+        }
+        .help_text {
+            font-style: italic;
+            font-size: 0.9em;
+        }
+        .input {
+            display:inline-block;
+            flex-grow:1;
+            margin-right:10px;
+        }
+    }
+}
+
+// taggit autosuggest
+ul.as-selections {
+    display: flex;
+    flex-wrap: wrap;
+
+    li {
+        display:inline-block;
+    }
+    
+    .as-selection-item {
+        padding: 0 5px;
+        background: $compl;
+        color: #fff;
+        margin: 5px;
+        border-radius: 2px;
+        font-weight: 500;
+
+        a.as-close {
+            color: #fff;
+            -webkit-cursor: pointer;
+            cursor: pointer;
+            margin-right: 5px;
+        }
+
+        &.selected {
+            background: $fond;
+        }
+    }
+    
+    .as-original {
+        flex-grow: 1;
+        min-width: 200px;
+
+        input {
+            width: 100%;
+        }
+    }
+}
+
+div.as-results {
+    position: relative;
+    ul {
+        position: absolute;
+        width: 100%;
+        background: #fff;
+
+        border: 1px solid lighten($fond, 30%);
+
+        li {
+            padding: 3px 5px;
+        }
+        
+        li.as-result-item {
+
+            &.active {
+                background: lighten($compl, 50%);
+            }
+        }
+
+        li.as-message {
+            font-style: italic;
+        }
+    }
 }