static/styles/_body.scss

   1 @font-face {
   2   font-family: "Nitti";
   3   src: url('fonts/nitti-normal.woff');
   4 }
   5
   6 @font-face {
   7   font-family: "Nitti Grotesk";
   8   src: url('fonts/nittigrotesk-normal.woff');
   9 }
  10
  11 @font-face {
  12   font-family: "Nitti Grotesk";
  13   font-weight: bold;
  14   src: url('fonts/nittigrotesk-medium.woff');
  15 }
  16
  17 @font-face
  18 {
  19   font-family: 'dotsfont';
  20   src: url('fonts/dotsfont/dotsfont.eot');
  21   src: url('fonts/dotsfont/dotsfont.eot?#iefix') format('embedded-opentype'),
  22   url('fonts/dotsfont/dotsfont.svg#dotsfontregular') format('svg'),
  23   url('fonts/dotsfont/dotsfont.woff') format('woff'),
  24   url('fonts/dotsfont/dotsfont.ttf') format('truetype');
  25 }
  26
  27 html {
  28   height: 100%;
  29   box-sizing: border-box;
  30 }
  31
  32 *,
  33 *:before,
  34 *:after {
  35   box-sizing: inherit;
  36 }
  37
  38 body {
  39   display: flex;
  40   flex-direction: column;
  41   position: relative;
  42   margin: 0 auto;
  43   min-height: 100%;
  44   min-width: $minWidth;
  45   color: $text-color;
  46 }
  47
  48 #root {
  49   display: flex;
  50   flex-direction: column;
  51   flex: 1;
  52
  53   > div {
  54     display: flex;
  55     flex-direction: column;
  56     flex: 1;
  57   }
  58 }
  59
  60 :focus, .focus {
  61   outline: none !important;
  62 }
  63
  64 .jumbotron p {
  65   margin-bottom: 0;
  66   color: $gray-light;
  67 }
  68
  69 p {
  70   line-height: 1.5;
  71   margin-bottom: $grid-gutter-width/2;
  72 }
  73
  74 label{
  75   font-weight: 500;
  76 }
  77
  78 b, strong{
  79   font-weight: 600;
  80 }
  81
  82 .flex-container {
  83   display: flex;
  84   flex-direction: column;
  85   flex: 1;
  86 }
  87
  88 pre{
  89  font-size: $font-size-nav;
  90 }
  91
  92 .btn-primary,
  93 .btn-default {
  94   height: 36px;
  95   padding: 0 20px;
  96   border-radius: $border-radius-standard;
  97 }
  98
  99 .btn-primary {
 100   border-color: $highlight-default;
 101   color: $text-inverse-color;
 102   background-color: $highlight-default;
 103 }
 104
 105 .btn-primary:hover,
 106 .btn-primary:active,
 107 .btn-primary:focus,
 108 .btn-primary:active:hover,
 109 .btn-primary:focus,
 110 .btn-primary:active:focus,
 111 .btn-primary:focus, .btn-primary.focus
 112 .btn-primary:active.focus, .btn-primary.active:hover,
 113 .btn-primary.active:focus, .btn-primary.active.focus {
 114   text-decoration: none;
 115   color: $text-inverse-color;
 116   background: $highlight-secondary;
 117   border-color: $highlight-secondary;
 118 }
 119
 120 .btn-default {
 121   background-color: $background-color;
 122   border-color: $border-strong-color;
 123 }
 124 .btn-default:active:hover,
 125 .btn-default:hover,
 126 .btn-default:focus,
 127 .btn-default:active:focus,
 128 .btn-default:focus, .btn-default.focus
 129 .btn-default:active.focus, .btn-default.active:hover,
 130 .btn-default.active:focus, .btn-default.active.focus,
 131 .open > .btn-default.dropdown-toggle:hover,
 132 .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle.focus {
 133   color: $text-strong-color;
 134   background-color: $background-content-color;
 135   border-color: $border-strong-color;
 136 }
 137
 138 a:hover,
 139 a:focus {
 140   color: $highlight-secondary;
 141   text-decoration: none;
 142 }
 143
 144 .form-control {
 145   height: 36px;
 146   &:focus {
 147     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 217, 194, 0.6);
 148   }
 149 }
 150 .help-block {
 151   color: $text-light-color;
 152 }
 153 .jumbotron {
 154   background: transparent;
 155 }
 156 .btn-lg {
 157   height: 44px;
 158   font-size: $font-size-btn-lg;
 159 }
 160 .label-primary {
 161   color: $text-color;
 162   background: $background-emphasis-color;
 163   border: 1px solid transparentize($border-color, 0.5);
 164 }
 165 .close {
 166   text-shadow: none;
 167   font-size: $font-size-close;
 168   font-weight: normal;
 169 }
 170
 171 .text-danger{
 172   color: $text-danger;
 173 }
 174
 175 div.react-console-prompt-box {
 176   padding-top: 1em;
 177   color: #444;
 178 }
 179
 180 span.react-console-prompt-label {
 181   font-weight: bold;
 182 }
 183
 184 div.react-console-focus span.react-console-cursor {
 185   background: #333;
 186   color: #eee;
 187 }
 188
 189 div.react-console-nofocus span.react-console-cursor {
 190   background: none;
 191   color: #444;
 192   outline: 0.1em solid #333;
 193   outline-offset: -0.1em;
 194 }
 195
 196 div.react-console-focus span.react-console-cursor-idle {
 197   animation: react-console-cursor-animation 1s infinite;
 198 }
 199
 200 @keyframes react-console-cursor-animation {
 201   0% {
 202     background: #333;
 203     color: #eee; }
 204   50% {
 205     background: #333;
 206     color: #eee; }
 207   51% {
 208     background: none;
 209     color: #444; }
 210   100% {
 211     background: none;
 212     color: #444; } }
 213
 214 div.react-console-message,
 215 span.react-console-prompt {
 216   white-space: pre-wrap;      /* CSS3 */
 217   white-space: -moz-pre-wrap; /* Firefox */
 218   white-space: -pre-wrap;     /* Opera <7 */
 219   white-space: -o-pre-wrap;   /* Opera 7 */
 220   word-wrap: break-word;      /* IE */
 221   padding: 0.1em;
 222 }
 223
 224 div.react-console-message-Error{
 225   color: $text-danger;
 226 }