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         -webkit-box-sizing: border-box;
 176         -moz-box-sizing: border-box;
 177         box-sizing: border-box;
 178 }
 179
 180 * {
 181         margin: 0;
 182         border: 0;
 183         padding: 0;
 184         border-collapse: collapse;
 185 }
 186
 187 *, *:before, *:after {
 188         -webkit-box-sizing: inherit;
 189         -moz-box-sizing: inherit;
 190         box-sizing: inherit;
 191 }
 192
 193 h1 {
 194         margin: 0;
 195         padding: 3px 6px;
 196         color: #323232;
 197         font-size: 0.75em;
 198         font-weight: normal;
 199         text-align: center;
 200         font-variant-caps: all-small-caps;
 201         font-variant: small-caps;
 202         text-transform: uppercase;
 203 }
 204
 205 img {
 206         vertical-align: middle;
 207 }
 208
 209 button,
 210 input[type="image"] {
 211
 212     box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
 213     color: #000000;
 214     display: inline-block;
 215     font-size: 12px;
 216     padding: 8px 34px;
 217     text-decoration: none;
 218     text-transform: uppercase;
 219
 220         &:hover {
 221                 background-color: #7E9BC1;
 222                 color:#ffffff;
 223         }
 224         &:active, &:visited{
 225                 background-color:#4C5E74;
 226                 color:#ffffff;
 227         }
 228
 229         &.-selected {
 230                 background-color: rgb(159, 196, 244);
 231         }
 232
 233 }
 234
 235 input[type="image"] {
 236         width: 28px;
 237         height: 28px;
 238         margin-right: 12px;
 239         border: 0;
 240         border-radius: 4px;
 241         padding: 4px;
 242 }
 243
 244 input,
 245 select,
 246 textarea {
 247         height: 25px;
 248         line-height: 25px;
 249         max-width: 100%;
 250         min-width: 100%;
 251         margin: 0;
 252         padding: 0 8px;
 253         border: 1px solid $field-background-color !important;;
 254         border-radius: $field-border-radius;
 255         color: #002b36;
 256         background-color: $field-background-color !important;
 257         vertical-align: top;
 258         &:focus {
 259                 color: #002b36;
 260                 background-color: white !important;
 261         }
 262         &::-webkit-input-placeholder {
 263                 color: #eee8d5 !important;
 264         }
 265
 266         &:-moz-placeholder { /* Firefox 18- */
 267                 color: #eee8d5 !important;
 268         }
 269
 270         &::-moz-placeholder {  /* Firefox 19+ */
 271                 color: #eee8d5 !important;
 272         }
 273
 274         &:-ms-input-placeholder {
 275                 color: #eee8d5 !important;
 276         }
 277 }
 278
 279 select {
 280         padding-right: 0;
 281         margin-right: 0;
 282         -moz-appearance: none;
 283         text-indent: 0.01px;
 284         text-overflow: '';
 285         -webkit-appearance: none;
 286         -webkit-border-radius: $field-border-radius;
 287         &.-value-not-set {
 288                 color: #eee8d5;
 289         }
 290 }
 291
 292 select {
 293         appearance: none; // using -prefix-free http://leaverou.github.io/prefixfree/
 294     background: $field-background-color url(../../../node_modules/open-iconic/svg/caret-bottom.svg) no-repeat right 6px center;
 295         background-size: 10px;
 296         border: {
 297                 color: $field-background-color;
 298                 radius: $field-border-radius;
 299                 style: solid;
 300                 width: 1px;
 301         }
 302 }
 303
 304 // Removes default arrow for IE10+
 305 // IE 8/9 get dafault arrow which covers caret image
 306 // as long as caret image is small than and positioned
 307 // behind default arrow
 308 select::-ms-expand {
 309         display: none;
 310 }
 311
 312 textarea {
 313         height: 50px;
 314 }
 315
 316 input[name$="id"],
 317 input.-is-guid {
 318         font-size: 10px;
 319         font-family: monospace;
 320 }
 321
 322 .ContentEditableDiv {
 323         margin: 0;
 324         border: 0;
 325         padding: 0;
 326         overflow: hidden;
 327         border-radius: $field-border-radius;
 328         height: 25px;
 329         line-height: 25px;
 330 }
 331
 332 .btn-group {
 333         white-space: nowrap;
 334         button {
 335                 border-right: 1px solid $button-border-color;
 336                 &:first-of-type {
 337                         border-top-left-radius: 2px;
 338                         border-bottom-left-radius: 2px;
 339                 }
 340                 &:last-of-type {
 341                         border-right: none;
 342                         border-top-right-radius: 2px;
 343                         border-bottom-right-radius: 2px;
 344                 }
 345         }
 346 }
 347
 348 .panel {
 349         overflow: hidden;
 350         -ms-overflow-style: -ms-autohiding-scrollbar;
 351         background-color: $panel-bg-color;
 352         > div {
 353                 min-width: 200px;
 354         }
 355 }
 356 .panel-header {
 357         h1 {
 358                 padding: 16px;
 359                 white-space: nowrap;
 360                 text-align: center;
 361         }
 362 }
 363 .panel-body {
 364         position: absolute;
 365         overflow: hidden;
 366         &:hover {
 367                 overflow: auto;
 368         }
 369         -ms-overflow-style: -ms-autohiding-scrollbar;
 370         top: 111px;
 371         bottom: 0px;
 372         left: 0;
 373         right: 0;
 374
 375
 376 }
 377 .panel-footer {
 378         position: absolute;
 379         bottom: 0;
 380         left: 0;
 381         right: 0;
 382         height: 40px;
 383         padding: 0 12px;
 384         background-color: $panel-bg-color-contrast;
 385         border-top: 1px solid $panel-border-color-light;
 386         white-space: nowrap;
 387 }
 388
 389 .welcome-message {
 390         margin: 20px;
 391         color: #06173c;
 392         font-size: x-large;
 393         font-weight: 200;
 394         .Button {
 395                 display: inline-block;
 396         }
 397 }
 398
 399 /* react-tooltip overrides */
 400 .__react_component_tooltip {
 401         transition: opacity 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000) !important;
 402 }
 403
 404 /* simple css-only drop-down menu */
 405 .menu {
 406         display: inline-flex;
 407         position: relative;
 408         z-index: 9999;
 409         > .Button:after {
 410                 content: "ˇ";
 411                 position: absolute;
 412                 right: 4px;
 413                 bottom: -13px;
 414                 font-size: 20px;
 415         }
 416         .sub-menu {
 417                 display: none;
 418                 position: absolute;
 419                 top: 36px;
 420                 left: -4px;
 421                 padding: 4px;
 422                 background-color: #f1f1f1;
 423                 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
 424                 border-radius: 3px;
 425                 .Button {
 426                         display: block;
 427                         text-align: left;
 428                 }
 429                 &:hover {
 430                         display: block;
 431                 }
 432         }
 433         > .Button:hover .sub-menu {
 434                 display: block;
 435         }
 436         &:hover .sub-menu {
 437                 display: block;
 438         }
 439 }
 440
 441 .descriptor {
 442         text {
 443                 &.badge {
 444                         font-weight: 100;
 445                         font-size: 12px;
 446                         text-anchor: middle;
 447                         fill: white;/* font color */
 448                         stroke: white !important;/* font color */
 449                 }
 450         }
 451 }
 452
 453 .hint {
 454         margin: 5px;
 455 }