base.css.scss in ecrire-0.26.0

- old
+ new

@@ -1,15 +1,14 @@
-@import 'variables';
-
 * {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
 }
 
 html, body {
   @include display(flex);
   @include flex(1);
+  -webkit-font-smoothing: antialiased;
 }
 
 html {
   min-height: 100%;
 }
@@ -43,27 +42,26 @@
   li {
     margin: 1em 0;
   }
 }
 
+input {
+  border: none;
+}
+
 fieldset {
   border: none;
   padding: 0;
   margin: 0;
 }
 
 input {
   padding: 4px 8px;
-  font-family: Helvetica;
   font-weight: lighter;
   outline: none;
 }
 
-textarea {
-  font-family: Helvetica;
-}
-
 button, input[type=submit] {
   border: 1px solid transparent;
   background: none;
   font-family: inherit;
   font-size: inherit;
@@ -71,14 +69,20 @@
   cursor: pointer;
   color: inherit;
   outline: none;
 }
 
+button, input {
+  border-radius: 2px;
+}
+
 main {
   @include flex(1 100%);
   @include display(flex);
+  @include flex-direction(column);
   position: relative;
+  width: 100%;
   z-index: 1;
 }
 
 
 .hidden {
@@ -92,6 +96,39 @@
   font-size: 1em;
   text-align: center;
   background: rgba(160, 207, 194, 0.5);
   box-shadow: inset 0px 0px 3px 1px rgba(76, 120, 155, 1);
   color: #FEFEFE;
+}
+
+.button {
+  @include transition(text-shadow 0.3s ease-in, border-color 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s);
+  border: 1px solid lighten($navy-blue, 5%);
+  border-radius: 2px;
+  text-decoration: none;
+  padding: 4px 8px;
+  margin: 0 0.5em;
+  font-size: 0.8em;
+  text-transform: uppercase;
+  font-weight: bolder;
+  box-shadow: inset 0 1px 0 transparent;
+  text-shadow: 0 1px 0 transparent;
+
+  &.selected {
+    background-color: lighten($navy-blue, 25%);
+    border-color: lighten($navy-blue, 25%);
+    color: lighten($navy-blue, 100%);
+  }
+
+  &:hover:not(.selected) {
+    background-color: lighten($navy-blue, 25%);
+    box-shadow: inset 0 1px 0 lighten($navy-blue, 30%), 0 1px 1px lighten($navy-blue, 15%);
+    color: lighten($navy-blue, 60%);
+    text-shadow: 0 1px lighten($navy-blue, 25%);
+  }
+
+  &:active:not(.selected) {
+    box-shadow: none;
+    color: lighten($navy-blue, 100%);
+    text-shadow: 0 1px lighten($navy-blue, 25%);
+  }
 }