tolk 4.3.0 → 5.0.1

data/app/assets/stylesheets/tolk/screen.scss

@@ -1,432 +0,0 @@
-/**
- * Defaults
-**/
-
-*, *:before, *:after {
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-strong {font-weight: bold;}
-em {font-style: italic;}
-a {color: #888;}
-a:hover {color: #000;}
-
-/**
- * Variables
-**/
-$primary_color: #2fadcf;
-$font_family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
-
-/**
- * Some generic components
-**/
-.btn{
-  font-family: $font_family;
-  display: inline-block;
-
-  padding: .25em .5em;
-  border-radius: 2px;
-
-  border: none;
-  background-image: linear-gradient($primary_color, darken($primary_color, 4%));
-  color: #fff;
-  font-size: 1em;
-
-  cursor: pointer;
-  &:hover,
-  &:focus{
-    background-image: linear-gradient(darken($primary_color, 2%), darken($primary_color, 8%));
-  }
-  &:focus{
-    box-shadow: 0 0 0 3px rgba($primary_color, .5);
-  }
-
-  &.btn--large{
-    font-size: 1.25em;
-    padding: .5em .75em;
-  }
-}
-
-select, input{
-  font-family: $font_family;
-  font-size: 1em;
-}
-input[type='text'],
-textarea{
-  font-family: $font_family;
-  font-size: 1em;
-  padding: .2em .25em;
-  border-radius: 2px;
-  border: 1px solid #ccc;
-  border-top: 1px solid #bbb;
-  &:focus{
-    box-shadow: 0 0 0 2px rgba($primary_color, .5);
-  }
-}
-textarea{
-  line-height: 1.4em;
-}
-
-/**
- * Base layout
-**/
-body {
-  font-family: $font_family;
-  background: #e9e9e9;
-  color: #333;
-  margin: 0;
-  padding: 0;
-  font-size: 14px;
-  line-height: 1.5em;
-  text-align: left;
-}
-
-.container {
-  background: #fff;
-  margin: 1rem;
-  border-radius: 3px;
-  overflow: hidden;
-  box-shadow: 0 3px 3px rgba(#000, .1);
-}
-
-/**
- * Header
-**/
-header{
-  background: #111;
-  color: #999;
-  padding: 1rem 1.5rem;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  h1{
-    font-size: 1.5em;
-  }
-  a{
-    color: $primary_color;
-    text-decoration: none;
-    &:hover,
-    &:focus{
-      color: $primary_color;
-      text-decoration: underline;
-    }
-    &:first-child{
-      font-weight: bold;
-    }
-  }
-}
-
-/**
- * Navigation
-**/
-nav{
-  background: #333;
-  display: flex;
-  a{
-    color: #ccc;
-    padding: 1rem 1.5rem;
-    text-decoration: none;
-    &:hover,
-    &:focus{
-      background: #222;
-      color: #fff;
-    }
-    &.current{
-      background: $primary_color;
-      color: #fff;
-    }
-  }
-  .nav__badge{
-    background-color: rgba(#000, .3);
-    padding: .25em .6em;
-    border-radius: 1em;
-    font-size: .75em;
-    color: #fff;
-    margin-left: .25em;
-  }
-}
-
-/**
- * Page title
-**/
-h2{
-  padding: 1rem 1.5rem;
-  font-size: 18px;
-  background-color: #f9f9f9;
-  color: $primary_color;
-  border-bottom: 1px solid #eee;
-  small{
-    font-size: .75em;
-    color: #999;
-  }
-}
-
-/**
- * Notice
-**/
-.notice {
-  background: #ffc;
-  color: darken(#ffc, 70%);
-  font-size: 1em;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid darken(#ffc, 30%);
-  a{
-    color: darken(#ffc, 70%);
-    &:hover,
-    &:focus{
-      color: darken(#ffc, 90%);
-    }
-  }
-}
-
-/**
- * Search form
-**/
-.search{
-  padding: 1rem 1.5rem;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #eee;
-  line-height: 2em;
-}
-
-
-/**
- * Empty state & blankslate
-**/
-.empty-state{
-  padding: 3rem 1.5rem;
-  text-align: center;
-  svg{
-    max-height: 200px;
-    margin: 2em 0;
-  }
-  .empty-state__msg{
-    font-size: 1.25em;
-    color: #aaa;
-  }
-  form{
-    margin-top: 1em;
-  }
-}
-
-
-/**
- * Locales list (locales index)
-**/
-ul.locales-list{
-  display: grid;
-  padding: 1.5rem 1.5rem;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  grid-column-gap: 1em;
-  grid-row-gap: 1em;
-
-  a{
-    text-decoration: none;
-    color: #2fadcf;
-    padding: 1.5em 1em;
-
-    height: 100%;
-    display: block;
-    text-align: center;
-
-    border: 1px solid #eee;
-    border-radius: 2px;
-    span{
-      font-size: 1.15em;
-    }
-    em.missing_translations,
-    em.updated_translations{
-      font-style: normal;
-      background: #ff3860;
-      color: #fff;
-      font-size: 9px;
-      padding: .25em .6em;
-      border-radius: 1em;
-      line-height: 1em;
-      vertical-align: top;
-    }
-    em.updated_translations{
-      background: #ffe857;
-      color: rgba(#000,.7);
-    }
-    &:hover,
-    &:focus{
-      background-color: #f9f9f9;
-      span{
-        text-decoration: underline;
-      }
-    }
-  }
-
-  form{
-    border: 1px dashed rgba($primary_color, .5);
-    background-color: rgba($primary_color, .025);
-    height: 100%;
-    display: grid;
-    justify-items: center;
-    align-items: center;
-    padding: 1.5em 1em;
-  }
-}
-
-/**
- * Translations form
-**/
-div.translations {
-  table {
-    width: 100%;
-    text-align: left;
-  }
-
-  td, th{
-    padding: 1rem 1.5rem;
-    vertical-align: top;
-    width: 50%;
-  }
-  td{
-    color: #222;
-  }
-  th{
-    font-weight: bold;
-    text-transform: uppercase;
-    color: #aaa;
-    border-bottom: 1px solid #ddd;
-    padding: 1.5rem 1.5rem .25rem 1.5rem;
-  }
-
-  th.actions,
-  td.actions{
-    width: 50px;
-    text-align: center;
-    padding: 12px .5rem;
-  }
-
-  tbody tr:nth-child(2n) td{
-    background-color: #fbfbfb;
-  }
-
-  tbody tr.active td:first-child{
-    box-shadow: 3px 0px 0px -1px $primary_color inset;
-  }
-
-  textarea.locale {
-    width: 100%;
-    min-height: 42px;
-  }
-
-  .updated,
-  .previous{
-    color: #999;
-    border-left: 1px solid #ccc;
-    margin-bottom: 1.5em;
-    padding: 0 0 0 .75em;
-    .key{
-      margin: 0 0 .5em 0;
-      line-height: 13px;
-      em{
-        color: #999;
-        text-transform: uppercase;
-        font-size: 9px;
-        font-style: normal;
-        margin-bottom: .5em;
-        border: 1px solid #ccc;
-        padding: 2px;
-        border-radius: 2px;
-      }
-    }
-  }
-  .updated{
-    color: #222;
-    border-color: orange;
-    .key {
-      em{
-        color: orange;
-        border-color: orange;
-      }
-    }
-  }
-
-  .translation-key{
-    color: #aaa;
-    font-size: 10px;
-    display: block;
-  }
-
-  .original{
-    textarea{
-      display: none;
-    }
-
-    .interpolation,
-    .carriage_return,
-    .boolean{
-      color: $primary_color;
-      font-family: Courier, monospace;
-      font-weight: bold;
-      cursor: help;
-    }
-    .carriage_return:before{
-      content: "¶";
-    }
-  }
-
-  .actions a{
-    font-weight: bold;
-    text-decoration: none;
-  }
-
-  .actions .warning{
-    font-weight: bold;
-    font-size: 1.35em;
-    color: orange;
-    padding: 2px 4px;
-    display: none;
-    cursor: help;
-  }
-
-  .highlight{
-    background-color: yellow;
-  }
-
-  .table_submit{
-    background: #f5f5f5;
-    border-top: 1px solid #e0e0e0 ;
-    padding: 1.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-
-/**
- * Pagination
-**/
-.pagination {
-  color: #777;
-  background: #f5f5f5;
-
-  a, span, em{
-    font-style: normal;
-    padding: .25em .75em;
-    text-decoration: none;
-    border: 1px solid #ddd;
-    border-radius: 2px;
-    display: inline-block;
-    background-color: #fff;
-    &.disabled {
-      opacity: .5;
-    }
-  }
-
-  a:hover,
-  a:focus,
-  em.current {
-    background-color: $primary_color;
-    border-color: $primary_color;
-    color: #fff;
-  }
-}