application/views/css/base-sass/common.sass

   1 $experimental-support-for-svg: true !default
   2 $experimental-support-for-mozilla: true !default
   3 $experimental-support-for-webkit: true !default
   4 $support-for-original-webkit-gradients: true !default
   5 $experimental-support-for-opera: true !default
   6 $experimental-support-for-microsoft: true !default
   7 $experimental-support-for-khtml: true !default
   8 $legacy-support-for-ie: true
   9
  10 @import "compass"
  11 @import "compass/reset"
  12 @import "compass/support"
  13 @import "compass/css3/images"
  14 @import "compass/css3/user-interface"
  15 @import "compass/typography/text/force-wrap"
  16
  17 // Auxiliary selectors
  18 //
  19 //      Used by javascript/php to add dynamic styles
  20 //
  21 //      These selectors are very abstracted from context, in and of
  22 //      themselves they do very litte.
  23 //
  24 //      Exception is .nullify which removes a lot of styling
  25
  26
  27 .width-33
  28         width: 33% !important
  29         margin: 0 0.2% !important
  30         box-sizing: border-box
  31         -moz-box-sizing: border-box
  32
  33 .width-66
  34         width: 66% !important
  35         margin: 0 0.2% !important
  36         box-sizing: border-box
  37         -moz-box-sizing: border-box
  38
  39 .width-50
  40         width: 49.4% !important
  41         margin: 0 0.2% !important
  42         box-sizing: border-box
  43         -moz-box-sizing: border-box
  44
  45 .width-80
  46         width: 79.5% !important
  47         margin: 0 0.2% !important
  48         box-sizing: border-box
  49         -moz-box-sizing: border-box
  50
  51 .width-20
  52         width: 19.5% !important
  53         margin: 0 0.2% !important
  54         box-sizing: border-box
  55         -moz-box-sizing: border-box
  56
  57 .alpha
  58         opacity: $inactive_opacity
  59         filter: alpha(opacity=#{$inactive_opacity * 100})
  60
  61 .white
  62         opacity: 0 !important
  63         filter: alpha(opacity=0) !important
  64
  65 .clear
  66         clear: both
  67
  68 .left
  69         float: left !important
  70         margin: 0
  71
  72 .right
  73         float: right !important
  74         margin: 0
  75
  76 .indent
  77         margin-left: 16px
  78
  79 .image-link
  80         border: none !important
  81         outline: none !important
  82
  83 .nullify
  84         background: transparent
  85         border-spacing: 0
  86         vertical-align: top
  87         outline: none
  88         border: none
  89         margin: 0
  90         padding: 0
  91
  92 .padding_plz
  93         padding: 0 2em 2em
  94
  95 .alert, #response .alert
  96         background: #FCF8E3
  97         border: 1px solid #FBEED5
  98         color: #C09853
  99         margin: 1em
 100         padding: 8px 35px 8px 14px
 101         @include border-radius(4px)
 102
 103 .alert.error, #response .alert.error
 104         background: #F2DEDE
 105         border-color: #EED3D7
 106         color: #B94A48
 107
 108 .alert.notice, #response .alert.notice
 109         background: #E3F8E3
 110         border-color: #D5EED5
 111         color: #539853
 112
 113 .long_output
 114         -ms-word-break: break-all
 115         word-break: break-all
 116         word-break: break-word
 117         -webkit-hyphens: auto
 118         -moz-hyphens: auto
 119         -ms-hyphens: auto
 120         hyphens: auto
 121         img
 122                 margin: 4px 8px
 123                 vertical-align: middle
 124
 125 // Common SASS
 126
 127 html
 128         height: 100%
 129
 130 body
 131         margin: 0
 132         padding: 0
 133         font: normal normal 0.75em $fonts
 134         color: $font_color
 135         height: 100%
 136         background: $general_background_color
 137
 138 form
 139         width: 100%
 140         display: block
 141
 142 .logo
 143         position: absolute
 144         top: 0
 145         left: 0
 146
 147 hr
 148         height: 0px
 149         border: none
 150         border-bottom: 1px solid $border-color-light
 151
 152 b, strong
 153         font-weight: bold
 154
 155 i, em
 156         font-style: italic
 157
 158 table
 159         @extend .nullify
 160         font-size: 0.95em
 161         margin: 0 0
 162         border-collapse: collapse
 163         border-spacing: 0
 164         width: 100%
 165
 166         caption
 167                 padding: 8px
 168
 169         tbody
 170                 @extend .nullify
 171
 172         .dark
 173                 background-color: $gradient-dark-hi
 174                 border: 1px solid $border-color-light
 175                 padding: 5px 3px 2px 3px
 176                 box-shadow: inset 0 0 2px 4px $gradient-dark-lo
 177
 178         th
 179                 @extend .nullify
 180                 background: #fafbf9
 181                 border-bottom: 1px solid #edebe9
 182                 padding: 5px 3px 4px 3px
 183
 184                 &:last-child
 185                         border-right: none
 186
 187                 &:first-child
 188                         border-left: none
 189
 190                 font-size: 1.1em
 191
 192         .header //Same name as general page header, null some properties
 193                 background: none
 194                 box-shadow: none
 195                 border: none
 196                 height: auto
 197                 min-width: 0
 198                 position: relative
 199                 width: auto
 200                 z-index: 0
 201
 202         .icon
 203                 width: 32px
 204                 min-width: 32px
 205                 text-align: center
 206
 207         .comments
 208                 width: 40px
 209                 text-align: center
 210
 211         tr
 212                 @extend .nullify
 213                 background: none
 214
 215         tr.odd
 216                 td
 217                         background: $table-odd-color
 218
 219         tr.even
 220                 td
 221                         background: $table-even-color
 222
 223         tr.odd:hover td, tr.even:hover td
 224                 background: $highlight-bg
 225                 color: $highlight-fg
 226
 227         td
 228                 @extend .nullify
 229                 border-bottom: 1px solid #dddbd9
 230                 padding: 3px 2px 5px 2px
 231                 text-align: left
 232                 vertical-align: middle
 233
 234                 &:last-child
 235                         border-right: 1px solid #dddbd9
 236
 237                 &:first-child
 238                         border-left: none
 239
 240         &.no_border td
 241                 border: none
 242
 243 #host_table, #service_table, .host_table, .service_table
 244         tr
 245                 &:hover
 246                         outline: 1px solid $border-color-dark
 247
 248 .no-borders
 249         td
 250                 border: none
 251
 252 .no_border
 253         border: none
 254
 255 .auto_width
 256         width: auto
 257
 258 h1, h2, h3, h4, h5, h6
 259         font-family: $fonts
 260         margin: 1px 0
 261
 262 h1
 263         font-size: 1.3em
 264         margin: 10px 0
 265
 266 h2
 267         font-size: 1.2em
 268         margin: 6px 0
 269
 270 h3
 271         font-size: 1.15em
 272
 273 h4
 274         font-size: 1.1em
 275
 276 h5
 277         font-size: 1.05em
 278
 279 h6
 280         font-size: 1.05em
 281
 282 a, input[type="submit"].plain, button.plain
 283         color: $link_color
 284         text-decoration: none
 285         border-bottom: 1px dotted $link_color
 286
 287         &.no_uline
 288                 border-bottom: 0 dotted $link_color
 289
 290         &:hover
 291                 color: $link_color_hover
 292                 border-bottom: 1px dotted $link_color_hover
 293
 294 .container
 295         overflow: auto
 296         min-width: 600px
 297         height: 100%
 298
 299 .content
 300         padding: 0
 301         height: 100%
 302         z-index: 0
 303         overflow-y: auto
 304         overflow-x: hidden
 305
 306         iframe#iframe, iframe#hypermap, object#geomap, iframe#nagvis
 307                 width: 100%
 308                 left: 0
 309
 310         p
 311                 width: 90%
 312                 margin: 8px 8px
 313
 314 input
 315         &[type="text"], &[type="password"]
 316                 border-radius: 3px
 317                 border: 1px solid $border-color-dark
 318                 padding: 3px 6px
 319         &[type="submit"].plain
 320                 background: transparent
 321                 border-width: 0 0 1px
 322                 -moz-border-radius: 0
 323                 -webkit-border-radius: 0
 324                 display: inline
 325                 margin: 0
 326                 padding: 0 !important
 327
 328
 329 code
 330         font-family: monospace
 331
 332
 333 .login_field
 334         width: 200px
 335
 336 .header_right
 337         float: right
 338         padding: 2px 8px 0 8px
 339
 340 .global_search
 341         z-index: 4
 342         text-align: right
 343         background: transparent
 344         padding: 0px 3px 0 3px
 345         float: right
 346
 347         input
 348                 display: inline-block
 349                 width: 70%
 350                 color: #444
 351                 margin-top: 5px !important
 352                 padding: 2px 2px 2px 20px
 353                 background: $input_background_color
 354                 background-position: left center
 355
 356 .autocomplete
 357         display: none
 358         position: fixed
 359         top: 48px
 360         right: 40px
 361         width: 230px !important
 362         background: $general_background_color
 363         border: 1px solid $border_color_dark
 364         z-index: 20
 365
 366         div
 367                 padding: 2px
 368
 369         .selected
 370                 background-color: #ccc
 371
 372 #login-table
 373         background: url($login_image_src) no-repeat
 374         background-position: center top
 375         padding-top: $login_image_height
 376         margin: 10% auto
 377         width: $login_image_width
 378
 379         td, tbody, tr
 380                 border: none !important
 381
 382 #page_links
 383         margin-bottom: 1em
 384         width: 100%
 385         vertical-align: middle
 386         border: none
 387         box-shadow: none
 388         z-index: 1
 389
 390         .page-links-label
 391                 float: left
 392                 max-width: 20%
 393                 padding-top: 10px
 394
 395         ul
 396                 float: left
 397                 margin: 0px
 398                 margin-left: 8px
 399                 padding: 0px
 400                 width: 100%
 401                 max-width: 80%
 402
 403                 li
 404                         list-style: none
 405                         display: inline-block
 406                         margin: 4px 2px 0 6px
 407                         padding: 5px
 408                         font-size: 0.9em
 409                         border-radius: 3px
 410                         border: 1px solid $hard_shadow_color
 411                         box-shadow: 0 0 3px $weak_shadow_color
 412
 413                         a
 414                                 border: none
 415
 416 .report-links
 417         float: right
 418
 419         form
 420                 input
 421                         border: 0
 422                         padding: 0
 423
 424         a, form
 425                 float: left
 426                 width: auto
 427
 428         img
 429                 margin: 2px 0 2px 8px
 430
 431         input[type="image"]
 432                 margin: 2px 0 2px 8px
 433
 434 #version_info
 435         position: fixed
 436         display: none
 437         top: $header_height
 438         left: 230px
 439         width: 200px
 440         z-index: 10
 441         background: $general_background_color
 442         border: 1px solid $border_color_light
 443         box-shadow: 0 2px 3px $weak_shadow_color
 444
 445         li
 446                 padding: 2px 4px
 447                 border-bottom: #eee
 448
 449 .page_settings
 450         position: fixed
 451         display: none
 452         top: $header_height
 453         left: 230px
 454         width: 300px
 455         z-index: 10
 456         background: $general_background_color
 457         border: 1px solid $border_color_light
 458         box-shadow: 0 2px 3px $weak_shadow_color
 459
 460         .ninja_page_refresh_value
 461                 display: none
 462
 463         .widget-selector
 464                 margin-left: 10px
 465
 466         .unselected
 467                 background: url('images/checkbox.png') no-repeat
 468
 469         .selected
 470                 background: url('images/checkbox-selected.png') no-repeat
 471
 472         li
 473                 padding: 4px 4px 4px 25px
 474                 border-bottom: $border_color_dark
 475                 background-color: $gradient-dark-hi
 476
 477 .jGrowl-notification
 478         background-color: #000
 479         background-color: rgba(0,0,0,0.5)
 480
 481 #jGrowl
 482
 483         position: fixed
 484         top: 54px
 485         right: 30%
 486         z-index: 9999
 487         width: 40%
 488         color: #fff
 489
 490         .header //Same name as general page header, null some properties
 491                 background: none
 492                 box-shadow: none
 493                 border: none
 494                 height: auto
 495                 min-width: 0
 496                 position: relative
 497                 width: auto
 498                 z-index: 0
 499                 color: #fff
 500                 font-weight: bold
 501                 border-color: #000
 502                 padding: 4px
 503                 float: left
 504
 505         .message
 506                 clear: both
 507                 display: inline-block
 508                 color: #fff
 509                 border-color: #000
 510                 padding: 4px
 511
 512         .close
 513                 color: #fff
 514                 border-color: #000
 515                 float: right
 516                 margin: 2px 6px
 517
 518 .enabled_monfeat, .disabled_monfeat
 519         font-size: 95%
 520         cite
 521                 font-weight: bold
 522         em
 523                 border-bottom: 1px dotted #555
 524                 &:hover
 525                         color: #000
 526
 527 .showlog .showlog_options
 528         vertical-align: top
 529         float: left
 530         margin-right: 32px
 531
 532 td.comments
 533         max-width: 200px
 534
 535 .comments .content
 536         margin-top: 0
 537         padding: 4px
 538
 539 #property_menu
 540         font-size: 90%
 541
 542 .notification-bar,
 543 .license-bar,
 544 .print-notification-bar
 545         clear: both
 546         padding: 3px 8px
 547
 548         border: 1px solid #c49400
 549         background: #efd556
 550         box-shadow: inset 0 0 4px 2px #ffe566
 551
 552         text-align: center
 553         font-weight: 600
 554         color: #544420
 555
 556         a
 557                 color: #4e3e18
 558                 border-bottom: none !important
 559                 text-decoration: underline !important
 560                 &:hover
 561                         color: #3e2e10
 562
 563         span
 564                 display: inline-block
 565                 margin: 0 8px
 566
 567 .license-bar,
 568 .print-notification-bar
 569         background: #f0a000
 570         box-shadow: inset 0 0 4px 2px #ffaa10
 571         text-shadow: 0 0 1px #703000
 572         padding: 8px
 573         color: #fff
 574
 575         a
 576                 color: #fff
 577                 &:hover
 578                         color: #fff
 579
 580 .print-notification-bar
 581         display: none
 582
 583 .main-toolbar
 584         border-top: 1px solid $border-color-dark
 585         background: #f7f6f5
 586         clear: both
 587
 588         .main-toolbar-title
 589                 display: inline-block
 590                 vertical-align: middle
 591                 margin-right: 8px
 592                 padding: 5px 24px 4px 12px
 593                 border-right: 1px solid $border-color-light
 594                 font-size: 120%
 595
 596         .main-toolbar-subtitle
 597                 display: inline-block
 598                 vertical-align: middle
 599                 margin-right: 6px
 600                 padding: 5px 16px 4px 6px
 601                 font-size: 120%
 602
 603         .main-toolbar-info
 604                 display: inline-block
 605                 vertical-align: middle
 606                 padding: 2px 0 1px 0
 607
 608                 a
 609                         display: inline-block
 610                         min-height: 14px
 611                         margin: 0 8px
 612
 613                 li a
 614                         margin: 0
 615
 616                 span
 617                         display: inline-block
 618                         min-height: 14px
 619
 620                 form
 621                         display: inline-block
 622                         width: auto
 623
 624                         input, select
 625                                 margin: 0
 626
 627         .main-toolbar-buttons
 628                 float: right
 629
 630                 button
 631                         margin: 0
 632                         padding: 0px 8px !important
 633                         border-width: 0 1px
 634
 635 .command-button
 636         margin: 2px
 637         border-radius: 2px
 638
 639 .command-button[disabled]
 640         opacity: 0.5
 641
 642 .command-button[disabled]:hover
 643         cursor: default
 644
 645 .qtip-pnp
 646         min-width: 620px
 647
 648 #user_settings, #command_form
 649         input[type="submit"]
 650                 margin-left: 8px
 651
 652 .padd-table
 653         margin: 4px 0
 654         td:first-child, th:first-child
 655                 padding-left: 8px
 656
 657 #backups td img
 658         margin: 0 4px
 659
 660 .restricted-output
 661         word-wrap: break-word
 662         min-width: 300px
 663         max-width: 640px
 664         width: 35%
 665
 666 // Import form SASS
 667 @import "sprites"
 668
 669 // Import header SASS
 670 @import "header"
 671
 672
 673 // Import nav SASS
 674 @import "nav"
 675
 676
 677 // Import widget SASS
 678 @import "widget"
 679
 680 // Import extended pagination SASS
 681 @import "pagination"
 682
 683 // Import form SASS
 684 @import "form"
 685
 686 @import "reports"