koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss

   1 @import "mixins";
   2
   3 @media only screen and ( min-width: 0 ) and ( max-width: 304px ) {
   4     /* Screens bewteen 0 and 304 pixels wide */
   5     input,
   6     select,
   7     textarea {
   8         max-width: 11em;
   9         width: auto;
  10     }
  11 }
  12
  13 @media only screen and ( min-width: 0 ) and ( max-width: 390px ){
  14     /* Screens bewteen 0 and 390 pixels wide */
  15     .ui-tabs .ui-tabs-nav li a,
  16     .statictabs li a {
  17         padding: .1em .5em;
  18     }
  19
  20     .input-fluid {
  21         width: 90%;
  22     }
  23 }
  24
  25 @media only screen and ( min-width: 342px ) and ( max-width: 479px ) {
  26     /* Screens bewteen 342 and 479 pixels wide */
  27     .input-fluid {
  28         width: 75%;
  29     }
  30
  31     .searchsuggestion {
  32         display: block;
  33     }
  34 }
  35 /* Override Bootstrap Responsive CSS fixed navbar */
  36 @media ( max-width: 979px ) {
  37     .navbar-fixed-top,
  38     .navbar-fixed-bottom {
  39         margin-left: 0;
  40         margin-right: 0;
  41         position: fixed;
  42     }
  43 }
  44
  45 @media only screen and ( max-width: 608px ) {
  46     /* Screens below 608 pixels wide */
  47     fieldset {
  48         &.rows {
  49             label {
  50                 display: block;
  51                 float: none;
  52                 text-align: left;
  53             }
  54
  55             li {
  56                 padding-bottom: .5em;
  57             }
  58
  59             ol {
  60                 margin-left: 0;
  61             }
  62
  63             .hint {
  64                 margin-left: 0;
  65             }
  66         }
  67     }
  68
  69     body {
  70         padding: 0;
  71     }
  72
  73     .tdlabel {
  74         display: inline;
  75     }
  76
  77     .navbar-fixed-top,
  78     .navbar-static-top {
  79         margin: 0;
  80     }
  81
  82     .navbar-inner {
  83         padding: 0;
  84     }
  85
  86     .checkall,
  87     .clearall,
  88     .highlight_controls,
  89     #selections-toolbar,
  90     .selectcol,
  91     .list-actions,
  92     #remove-selected {
  93         display: none;
  94     }
  95
  96     .table td.bibliocol {
  97         padding-left: 1.3em;
  98     }
  99
 100     .actions {
 101         display: block;
 102
 103         a,
 104         #login4tags {
 105             @include border-radius-all( 4px );
 106             background-color: #F2F2EF;
 107             border: 1px solid #DDD;
 108             display: block;
 109             font-size: 120%;
 110             font-weight: bold;
 111             margin: 2px 0;
 112         }
 113
 114         .label {
 115             display: block;
 116             font-weight: bold;
 117         }
 118
 119         #login4tags {
 120             margin-right: 1em;
 121         }
 122     }
 123
 124     #opac-main-search {
 125         button,
 126         input,
 127         select,
 128         .librarypulldown .transl1,
 129         .input-append {
 130             @include border-radius-all( 5px );
 131             box-sizing: border-box;
 132             display: block;
 133             height: 120%;
 134             margin: .5em 0;
 135             max-width: 100%;
 136             width: 97%;
 137         }
 138
 139         .input-append {
 140             margin: 0;
 141             width: 100%;
 142         }
 143
 144         .librarypulldown .transl1 {
 145             width: 94.5%;
 146         }
 147     }
 148
 149     #toolbar .resort {
 150         @include border-radius-all( 5px );
 151         font-size: 14px;
 152         margin: .5em 0;
 153         max-width: 100%;
 154         padding: 4px 6px;
 155     }
 156
 157     .mastheadsearch {
 158         @include border-radius-all( 0 );
 159         margin: 0;
 160
 161     }
 162
 163     .main {
 164         @include border-radius-all( 0 );
 165         margin: .5em 0;
 166         padding: 15px;
 167     }
 168
 169     .breadcrumb {
 170         margin: 10px 0;
 171     }
 172
 173     #moresearches {
 174         text-align: center;
 175     }
 176
 177     #searchsubmit {
 178         font-weight: bold;
 179     }
 180
 181     .ui-tabs-panel,
 182     .tabs-container,
 183     #topissues,
 184     #usertags,
 185     #usersuggestions {
 186         .item-thumbnail {
 187             margin: .5em 0 0 .5em;
 188         }
 189
 190         .table-bordered {
 191             border: 0;
 192         }
 193
 194         .table {
 195             th,
 196             thead {
 197                 display: none;
 198             }
 199
 200             td {
 201                 border-left: 1px solid #DDDDDD;
 202                 border-right: 1px solid #DDDDDD;
 203                 border-top: 0;
 204                 display: block;
 205                 padding: .2em;
 206             }
 207
 208             p {
 209                 margin-bottom: 2px;
 210             }
 211         }
 212
 213         tr {
 214             display: block;
 215             margin-bottom: .6em;
 216
 217             td:first-child {
 218                 border-radius: 5px 5px 0 0;
 219                 border-top: 1px solid #DDDDDD;
 220             }
 221
 222             td:last-child {
 223                 border-bottom: 2px solid #CACACA;
 224                 border-radius: 0 0 5px 5px;
 225             }
 226         }
 227     }
 228
 229     .no-image {
 230         display: none;
 231     }
 232 }
 233
 234 @media only screen and ( max-width: 700px ) {
 235     /* Screens below 700 pixels wide */
 236     #opac-main-search {
 237         label {
 238             display: none;
 239         }
 240     }
 241
 242     #logo {
 243         background: transparent url( "../lib/bootstrap/img/glyphicons-halflings-white.png" ) no-repeat;
 244         background-position: 0 -24px;
 245         margin: 14px 14px 0 14px;
 246         width: 14px;
 247
 248         a {
 249             padding: 14px 0 0;
 250             width: 14px;
 251         }
 252     }
 253
 254     #user-menu-trigger {
 255         display: inline;
 256         margin-right: 12px;
 257     }
 258
 259     #members {
 260         clear: both;
 261         display: none;
 262
 263         li {
 264             border-bottom: 1px solid #555;
 265             padding-right: 20px;
 266             text-align: right;
 267
 268             &:first-child {
 269                 border-top: 1px solid #555;
 270             }
 271
 272             &:last-child {
 273                 border-bottom: 0;
 274             }
 275         }
 276
 277         .nav {
 278             float: none;
 279
 280             > li {
 281                 float: none;
 282             }
 283
 284             &.pull-right {
 285                 float: none;
 286             }
 287         }
 288
 289         .divider-vertical {
 290             border: 0;
 291             height: 0;
 292             margin: 0;
 293         }
 294     }
 295 }
 296
 297 @media only screen and ( min-width: 480px ) and ( max-width: 608px ) {
 298     /* Screens between 480 and 608 pixels wide */
 299     .input-fluid {
 300         width: 75%;
 301     }
 302 }
 303
 304 @media only screen and ( min-width: 608px ) {
 305     #views {
 306         border-bottom: 1px solid #D6D6D6;
 307         margin: 0;
 308         padding: 0;
 309         white-space: nowrap;
 310     }
 311
 312     .view {
 313         border-bottom-width: 0;
 314         border-radius: 0;
 315         border-right-width: 0;
 316         border-top-width: 0;
 317     }
 318
 319     .current-view {
 320         border: 0;
 321         box-shadow: none;
 322     }
 323 }
 324
 325 @media only screen and ( min-width: 608px ) and ( max-width: 767px ) {
 326     /* Screens between 608 and 767 pixels wide */
 327     .main {
 328         padding: .8em 20px;
 329     }
 330
 331     .breadcrumb {
 332         margin: 10px 0;
 333     }
 334
 335     .navbar-static-bottom {
 336         margin-left: -20px;
 337         margin-right: -20px;
 338     }
 339
 340     .row-fluid input.span6 {
 341         width: 48.9362%;
 342     }
 343 }
 344
 345 @media only screen and ( max-width: 767px ) {
 346     /* Screens below 767 pixels wide */
 347     a {
 348         &.title {
 349             font-size: 120%;
 350         }
 351     }
 352
 353     #userresults {
 354         margin: 0 -20px;
 355     }
 356
 357     .breadcrumb,
 358     #top-pages,
 359     .menu-collapse {
 360         display: none;
 361     }
 362
 363     #search-facets,
 364     #menu {
 365         margin-bottom: .5em;
 366
 367         h4 {
 368             display: block;
 369             margin: 0;
 370             padding: 0;
 371
 372             a {
 373                 @include border-radius-all( 7px );
 374                 border-bottom: 0;
 375                 font-weight: normal;
 376                 padding: .7em .2em;
 377             }
 378         }
 379
 380         ul {
 381             padding: 0;
 382         }
 383     }
 384
 385     #menu {
 386         li {
 387             a {
 388                 @include border-radius-all( 0 );
 389                 border: 0;
 390                 border-bottom: 1px solid #D8D8D8;
 391                 display: block;
 392                 font-size: 120%;
 393                 margin: 0;
 394                 text-decoration: none;
 395             }
 396
 397             &.active {
 398                 a {
 399                     border-right-width: 1px;
 400                     border-top: 1px solid #D8D8D8;
 401                 }
 402             }
 403
 404             &:last-child {
 405                 a {
 406                     border-radius: 0 0 7px 7px;
 407                 }
 408             }
 409         }
 410     }
 411
 412     #search-facets {
 413         li {
 414             padding: .4em;
 415         }
 416
 417         h5 {
 418             margin: .2em;
 419         }
 420     }
 421
 422     #menu h4 a.menu-open,
 423     #search-facets h4 a.menu-open {
 424         border-bottom: 1px solid #D8D8D8;
 425         border-radius: 7px 7px 0 0;
 426     }
 427
 428     #loginModal {
 429         margin: 0;
 430         width: auto;
 431     }
 432 }
 433
 434 @media only screen and ( max-width: 800px ) {
 435     /* Screens below 800 pixels wide */
 436     .cartlabel,
 437     .listslabel {
 438         display: none;
 439     }
 440
 441     .navbar {
 442         .divider-vertical {
 443             margin: 0 2px;
 444         }
 445
 446         #members {
 447             .divider-vertical {
 448                 margin: 0 9px;
 449             }
 450         }
 451     }
 452 }
 453
 454 @media only screen and ( min-width: 768px ) {
 455     /* Screens above 768 pixels wide */
 456     .main {
 457         margin-left: 20px;
 458         margin-right: 20px;
 459     }
 460
 461     #menu {
 462         @include border-radius-all( 0 );
 463         border: 0;
 464         border-right: 1px solid #D8D8D8;
 465
 466         h4 {
 467             display: none;
 468         }
 469
 470         ul {
 471             padding: 1em 0 1em 0;
 472         }
 473     }
 474
 475     #didyoumean {
 476         margin: 0;
 477     }
 478
 479     .searchsuggestion {
 480         white-space: nowrap;
 481     }
 482 }
 483
 484 @media only screen and ( min-width: 768px ) and ( max-width: 984px ) {
 485     /* Screens between 768 and 984 pixels wide */
 486     .librarypulldown .transl1 {
 487         width: 38%;
 488     }
 489 }
 490
 491 @media only screen and ( min-width: 984px ) {
 492     /* Screens above 969 pixels wide */
 493     .librarypulldown .transl1 {
 494         width: 53%;
 495     }
 496
 497 }
 498
 499 @media only screen and ( max-width: 1040px ) {
 500     #a_listResults,
 501     #close_pagination {
 502         padding: 5px;
 503     }
 504
 505     .pg_menu {
 506         li {
 507             a {
 508                 display: block;
 509                 float: none;
 510                 text-align: left;
 511             }
 512
 513             &.back_results {
 514                 a {
 515                     border: 0;
 516                     border-bottom: 1px solid #DDD;
 517                     border-top: 1px solid #DDD;
 518                 }
 519             }
 520         }
 521     }
 522
 523     #ulactioncontainer {
 524         min-width: 0;
 525     }
 526 }