skyquake/plugins/composer/src/src/styles/_main.scss

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 @import 'variables';
  20
  21 path[data-outline-indicator-svg-outline-path] {
  22     stroke-dasharray: 0;
  23     stroke: #b58900;
  24     stroke-width: 5px;
  25 }
  26
  27 $font-path: '../assets';
  28 $robo-black: $font-path + '/Roboto-Black-webfont.woff';
  29 $robo-black-italic: $font-path + '/Roboto-BlackItalic-webfont.woff';
  30 $robo-bold: $font-path + '/Roboto-Bold-webfont.woff';
  31 $robo-bold-italic: $font-path + '/Roboto-BoldItalic-webfont.woff';
  32 $robo-light: $font-path + '/Roboto-Light-webfont.woff';
  33 $robo-light-italic: $font-path + '/Roboto-LightItalic-webfont.woff';
  34 $robo-medium: $font-path + '/Roboto-Medium-webfont.woff';
  35 $robo-medium-italic: $font-path + '/Roboto-MediumItalic-webfont.woff';
  36 $robo-reg: $font-path + '/Roboto-Regular-webfont.woff';
  37 $robo-reg-italic: $font-path + '/Roboto-Italic-webfont.woff';
  38 $robo-thin: $font-path + '/Roboto-Thin-webfont.woff';
  39 $robo-thin-italic: $font-path + '/Roboto-ThinItalic-webfont.woff';
  40
  41 $robo-cond-bold: $font-path + '/RobotoCondensed-Bold-webfont.woff';
  42 $robo-cond-bold-italic: $font-path + '/RobotoCondensed-BoldItalic-webfont.woff';
  43 $robo-cond-light: $font-path + '/RobotoCondensed-Light-webfont.woff';
  44 $robo-cond-light-italic: $font-path + '/RobotoCondensed-LightItalic-webfont.woff';
  45 $robo-cond-reg: $font-path + '/RobotoCondensed-Regular-webfont.woff';
  46 $robo-cond-reg-italic: $font-path + '/RobotoCondensed-Italic-webfont.woff';
  47
  48 @font-face {
  49   font-family: 'Roboto';
  50   src: url($robo-thin) format('woff');
  51   font-weight: 100;
  52   font-style: normal;
  53 }
  54 @font-face {
  55   font-family: 'Roboto';
  56   src: url($robo-thin-italic) format('woff');
  57   font-weight: 100;
  58   font-style: italic;
  59 }
  60 @font-face {
  61   font-family: 'Roboto';
  62   src: url($robo-light) format('woff');
  63   font-weight: 200;
  64   font-style: normal;
  65 }
  66 @font-face {
  67   font-family: 'Roboto';
  68   src: url($robo-light-italic) format('woff');
  69   font-weight: 200;
  70   font-style: italic;
  71 }
  72 @font-face {
  73   font-family: 'Roboto';
  74   src: url($robo-reg) format('woff');
  75   font-weight: 400;
  76   font-style: normal;
  77 }
  78 @font-face {
  79   font-family: 'Roboto';
  80   src: url($robo-reg-italic) format('woff');
  81   font-weight: 400;
  82   font-style: italic;
  83 }
  84 @font-face {
  85   font-family: 'Roboto';
  86   src: url($robo-medium) format('woff');
  87   font-weight: 500;
  88   font-style: normal;
  89 }
  90 @font-face {
  91   font-family: 'Roboto';
  92   src: url($robo-medium-italic) format('woff');
  93   font-weight: 500;
  94   font-style: italic;
  95 }
  96 @font-face {
  97   font-family: 'Roboto';
  98   src: url($robo-bold) format('woff');
  99   font-weight: 700;
 100   font-style: normal;
 101 }
 102 @font-face {
 103   font-family: 'Roboto';
 104   src: url($robo-bold-italic) format('woff');
 105   font-weight: 700;
 106   font-style: italic;
 107 }
 108 @font-face {
 109   font-family: 'Roboto';
 110   src: url($robo-black) format('woff');
 111   font-weight: 800;
 112   font-style: normal;
 113 }
 114 @font-face {
 115   font-family: 'Roboto';
 116   src: url($robo-black-italic) format('woff');
 117   font-weight: 800;
 118   font-style: italic;
 119 }
 120 @font-face {
 121   font-family: 'RobotoCondensed';
 122   src: url($robo-cond-light) format('woff');
 123   font-weight: 100;
 124   font-style: normal;
 125 }
 126 @font-face {
 127   font-family: 'RobotoCondensed';
 128   src: url($robo-cond-light-italic) format('woff');
 129   font-weight: 100;
 130   font-style: italic;
 131 }
 132 @font-face {
 133   font-family: 'RobotoCondensed';
 134   src: url($robo-cond-reg) format('woff');
 135   font-weight: 400;
 136   font-style: normal;
 137 }
 138 @font-face {
 139   font-family: 'RobotoCondensed';
 140   src: url($robo-cond-reg-italic) format('woff');
 141   font-weight: 400;
 142   font-style: italic;
 143 }
 144 @font-face {
 145   font-family: 'RobotoCondensed';
 146   src: url($robo-cond-bold) format('woff');
 147   font-weight: 700;
 148   font-style: normal;
 149 }
 150 @font-face {
 151   font-family: 'RobotoCondensed';
 152   src: url($robo-cond-bold-italic) format('woff');
 153   font-weight: 700;
 154   font-style: italic;
 155 }
 156
 157 $font-family-serif: Georgia, Times, 'Times New Roman', serif;
 158 $font-family-sans-serif: Roboto, Helvetica, Arial, sans-serif;
 159 $font-family-display: $font-family-sans-serif;
 160 $font-family-icons: 'FontAwesome';
 161 $font-family-default: $font-family-sans-serif;
 162
 163 html, body {
 164     background: $primary-bg-color;
 165     cursor: auto;
 166     font-family: $font-family-sans-serif;
 167     overflow: hidden;
 168 }
 169
 170 ::-webkit-scrollbar {
 171     /*display: none;*/
 172 }
 173
 174 html {
 175     box-sizing: border-box;
 176 }
 177
 178 * {
 179     margin: 0;
 180     border: 0;
 181     padding: 0;
 182     border-collapse: collapse;
 183 }
 184
 185 *, *:before, *:after {
 186     box-sizing: inherit;
 187 }
 188
 189 h1 {
 190     margin: 0;
 191     padding: 3px 6px;
 192     color: #323232;
 193     font-size: 0.75em;
 194     font-weight: normal;
 195     text-align: center;
 196     font-variant-caps: all-small-caps;
 197     font-variant: small-caps;
 198     text-transform: uppercase;
 199 }
 200
 201 img {
 202     vertical-align: middle;
 203 }
 204
 205 button,
 206 input[type="image"] {
 207
 208     box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
 209     color: #000000;
 210     display: inline-block;
 211     font-size: 12px;
 212     padding: 8px 34px;
 213     text-decoration: none;
 214     text-transform: uppercase;
 215
 216     &:hover {
 217         background-color: #7E9BC1;
 218         color:#ffffff;
 219     }
 220     &:active, &:visited{
 221         background-color:#4C5E74;
 222         color:#ffffff;
 223     }
 224
 225     &.-selected {
 226         background-color: rgb(159, 196, 244);
 227     }
 228
 229 }
 230
 231 input[type="image"] {
 232     width: 28px;
 233     height: 28px;
 234     margin-right: 12px;
 235     border: 0;
 236     border-radius: 4px;
 237     padding: 4px;
 238 }
 239
 240 input,
 241 select,
 242 textarea {
 243     height: 25px;
 244     line-height: 25px;
 245     max-width: 100%;
 246     min-width: 100%;
 247     margin: 0;
 248     padding: 0 8px;
 249     border: 1px solid $field-background-color !important;;
 250     border-radius: $field-border-radius;
 251     color: #002b36;
 252     background-color: $field-background-color !important;
 253     vertical-align: top;
 254     &:focus {
 255         color: #002b36;
 256         background-color: white !important;
 257     }
 258     &::-webkit-input-placeholder {
 259         color: #eee8d5 !important;
 260     }
 261
 262     &:-moz-placeholder { /* Firefox 18- */
 263         color: #eee8d5 !important;
 264     }
 265
 266     &::-moz-placeholder {  /* Firefox 19+ */
 267         color: #eee8d5 !important;
 268     }
 269
 270     &:-ms-input-placeholder {
 271         color: #eee8d5 !important;
 272     }
 273 }
 274
 275 select {
 276     padding-right: 0;
 277     margin-right: 0;
 278     -moz-appearance: none;
 279     text-indent: 0.01px;
 280     text-overflow: '';
 281     -webkit-appearance: none;
 282     -webkit-border-radius: $field-border-radius;
 283     &.-value-not-set {
 284         color: #eee8d5;
 285     }
 286 }
 287
 288 select {
 289     -webkit-appearance: none;
 290        -moz-appearance: none;
 291             appearance: none; /* using -prefix-free http://leaverou.github.io/prefixfree/*/
 292     background: $field-background-color url(../../../node_modules/open-iconic/svg/caret-bottom.svg) no-repeat right 6px center;
 293     background-size: 10px;
 294     border: {
 295         color: $field-background-color;
 296         radius: $field-border-radius;
 297         style: solid;
 298         width: 1px;
 299     }
 300 }
 301
 302 /* Removes default arrow for IE10+*/
 303 /* IE 8/9 get dafault arrow which covers caret image*/
 304 /* as long as caret image is small than and positioned*/
 305 /* behind default arrow*/
 306 select::-ms-expand {
 307     display: none;
 308 }
 309
 310 textarea {
 311     height: 50px;
 312 }
 313
 314 input[name$="id"],
 315 input.-is-guid {
 316     font-size: 10px;
 317     font-family: monospace;
 318 }
 319
 320 .ContentEditableDiv {
 321     margin: 0;
 322     border: 0;
 323     padding: 0;
 324     overflow: hidden;
 325     border-radius: $field-border-radius;
 326     height: 25px;
 327     line-height: 25px;
 328 }
 329
 330 .btn-group {
 331     white-space: nowrap;
 332     button {
 333         border-right: 1px solid $button-border-color;
 334         &:first-of-type {
 335             border-top-left-radius: 2px;
 336             border-bottom-left-radius: 2px;
 337         }
 338         &:last-of-type {
 339             border-right: none;
 340             border-top-right-radius: 2px;
 341             border-bottom-right-radius: 2px;
 342         }
 343     }
 344 }
 345
 346 .panel {
 347     overflow: hidden;
 348     -ms-overflow-style: -ms-autohiding-scrollbar;
 349     background-color: $panel-bg-color;
 350     > div {
 351         min-width: 200px;
 352     }
 353 }
 354 .panel-header {
 355     h1 {
 356         padding: 16px;
 357         white-space: nowrap;
 358         text-align: center;
 359     }
 360 }
 361 .panel-body {
 362     position: absolute;
 363     overflow: hidden;
 364     &:hover {
 365         overflow: auto;
 366     }
 367     -ms-overflow-style: -ms-autohiding-scrollbar;
 368     top: 111px;
 369     bottom: 0px;
 370     left: 0;
 371     right: 0;
 372
 373
 374 }
 375 .panel-footer {
 376     position: absolute;
 377     bottom: 0;
 378     left: 0;
 379     right: 0;
 380     height: 40px;
 381     padding: 0 12px;
 382     background-color: $panel-bg-color-contrast;
 383     border-top: 1px solid $panel-border-color-light;
 384     white-space: nowrap;
 385 }
 386
 387 .welcome-message {
 388     margin: 20px;
 389     color: #06173c;
 390     font-size: x-large;
 391     font-weight: 200;
 392     .Button {
 393         display: inline-block;
 394     }
 395 }
 396
 397 /* react-tooltip overrides */
 398 .__react_component_tooltip {
 399     transition: opacity 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000) !important;
 400 }
 401
 402 /* simple css-only drop-down menu */
 403 .menu {
 404     display: -ms-inline-flexbox;
 405     display: inline-flex;
 406     position: relative;
 407     z-index: 9999;
 408     > .Button:after {
 409         content: "ˇ";
 410         position: absolute;
 411         right: 4px;
 412         bottom: -13px;
 413         font-size: 20px;
 414     }
 415     .sub-menu {
 416         display: none;
 417         position: absolute;
 418         top: 30px;
 419         left: -4px;
 420         padding: 4px;
 421         background-color: #f1f1f1;
 422         box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
 423         border-radius: 3px;
 424         .Button {
 425             display: block;
 426             text-align: left;
 427         }
 428         &:hover {
 429             display: block;
 430         }
 431     }
 432     > .Button:hover .sub-menu {
 433         display: block;
 434     }
 435     &:hover .sub-menu {
 436         display: block;
 437     }
 438 }
 439
 440 .descriptor {
 441     text {
 442         &.badge {
 443             font-weight: 100;
 444             font-size: 12px;
 445             text-anchor: middle;
 446             fill: white;/* font color */
 447             stroke: white !important;/* font color */
 448         }
 449     }
 450 }
 451
 452 .hint {
 453     margin: 5px;
 454 }
 455
 456 .FileManager {
 457     margin-top:1rem;
 458 }