interface/themes/tabs_style_full.scss

   1 /**
   2  * Copyright (C) 2016 Kevin Yeh <kevin.y@integralemr.com>
   3  * Copyright (C) 2019 Brady Miller <brady.g.miller@gmail.com>
   4  * Copyright (C) 2020 Tyler Wrenn <tyler@tylerwrenn.com>
   5  *
   6  * LICENSE: This program is free software; you can redistribute it and/or
   7  * modify it under the terms of the GNU General Public License
   8  * as published by the Free Software Foundation; either version 3
   9  * of the License, or (at your option) any later version.
  10  * This program is distributed in the hope that it will be useful,
  11  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  12  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  13  * GNU General Public License for more details.
  14  * You should have received a copy of the GNU General Public License
  15  * along with this program. If not, see <http://opensource.org/licenses/gpl-license.php>;.
  16  *
  17  * @package OpenEMR
  18  * @author  Kevin Yeh <kevin.y@integralemr.com>
  19  * @author  Robert Down <robertdown@live.com>
  20  * @author  Brady Miller <brady.g.miller@gmail.com>
  21  * @author  Tyler Wrenn <tyler@tylerwrenn.com>
  22  * @link    http://www.open-emr.org
  23  */
  24
  25 /* TODO: Fully redesign the navbar to be better supported with BS4 */
  26
  27 @import "directional";
  28
  29 html {
  30   border: 0;
  31   display: flex;
  32   flex-direction: column;
  33   height: 100%;
  34   margin: 0;
  35   padding: 0;
  36 }
  37
  38 body {
  39   display: flex;
  40   flex: 1 0 auto;
  41   flex-direction: column;
  42   margin: 0;
  43 }
  44
  45 #mainBox {
  46   align-content: space-between;
  47   align-items: stretch;
  48   display: flex;
  49   flex: 1 0 auto;
  50   flex-direction: column;
  51   margin: 0;
  52   padding: 0;
  53   width: 100%;
  54
  55   .logo {
  56     height: 20px;
  57     margin-bottom: auto;
  58     margin-left: auto;
  59     margin-right: auto;
  60     margin-top: 0.1875rem;
  61     padding: 0;
  62     width: 20px;
  63     z-index: 10000;
  64   }
  65 }
  66
  67 #mainBox_vertical {
  68   align-content: space-between;
  69   align-items: stretch;
  70   flex: 1 0 auto;
  71   margin: 0;
  72   padding: 0;
  73
  74   .logo {
  75     height: 30px;
  76     margin-bottom: 0.5rem;
  77     margin-left: 0.75rem;
  78     margin-right: 0.75rem;
  79     margin-top: 0.5rem;
  80     padding: 0 !important;
  81     width: 30px;
  82     z-index: 10000;
  83   }
  84 }
  85
  86 #mainBox > div {
  87   flex: 0 1 auto;
  88   margin: 0;
  89
  90   &.mainFrames {
  91     display: flex;
  92     flex: 1 0 auto;
  93     flex-direction: column;
  94     margin: 0;
  95     padding: 0;
  96     z-index: 3;
  97   }
  98 }
  99
 100 #framesDisplay {
 101   display: flex;
 102   flex: 1 0 auto;
 103   flex-direction: row;
 104
 105   > div {
 106     align-content: stretch;
 107     align-items: stretch;
 108     display: flex;
 109     flex: 1 0 auto;
 110     flex-direction: column;
 111     margin: 0;
 112     padding: 0;
 113
 114     > iframe {
 115       border: 0 solid var(--black);
 116       flex: 1 0 auto;
 117       width: 100%;
 118     }
 119   }
 120 }
 121
 122 .tabControls {
 123   display: flex;
 124   flex-direction: row;
 125   margin: 0;
 126   overflow: auto;
 127   padding: 0;
 128   padding-top: 4px;
 129 }
 130
 131 .tabSpan {
 132   border-bottom: 0;
 133   border-left: 1px solid var(--primary);
 134   border-right: 1px solid var(--primary);
 135   border-top: 4px solid var(--primary);
 136   cursor: pointer;
 137   flex: 0 1 auto;
 138   font-size: 0.9rem;
 139   margin: 0;
 140   overflow: visible;
 141   padding: 8px;
 142   white-space: nowrap;
 143 }
 144
 145 .tabSpan .fa,
 146 .tabHidden {
 147   color: var(--gray);
 148 }
 149
 150 .tabNotchosen {
 151   border-bottom: 1px solid var(--primary);
 152   border-left: 0;
 153   border-right: 0;
 154   border-top: 4px solid transparent !important;
 155   display: block;
 156   opacity: 80%;
 157 }
 158
 159 .tabsNoHover {
 160   background: transparent !important;
 161   border-bottom: 1px solid var(--primary);
 162   border-left: 0;
 163   border-right: 0;
 164   border-top: 4px solid transparent;
 165   display: block;
 166 }
 167
 168 #attendantData {
 169   background-color: var(--light);
 170 }
 171
 172 .patientInfo a {
 173   color: var(--dark) !important;
 174 }
 175
 176 .patientPicture {
 177   margin-#{$right}: 7px;
 178   margin-top: -1px;
 179 }
 180
 181 .patientPicture img {
 182   height: 75px;
 183 }
 184
 185 .patientCurrentEncounter {
 186   display: inline;
 187 }
 188
 189 .patientCurrentEncounter a {
 190   color: var(--dark) !important;
 191 }
 192
 193 .patientDataColumn {
 194   display: block;
 195   float: $left;
 196   width: 33%;
 197 }
 198
 199 .messagesColumn {
 200   float: $right;
 201   padding-#{$right}: 20px;
 202 }
 203
 204 .patientEncounterList {
 205   background: var(--white);
 206   border: 1px solid var(--black);
 207   cursor: pointer;
 208   overflow: hidden;
 209   position: fixed;
 210   z-index: 1;
 211 }
 212
 213 .patientEncounterList table.encounters {
 214   display: none;
 215 }
 216
 217 .patientEncounterList:hover table.encounters {
 218   display: block;
 219 }
 220
 221 .patientEncounterList > div {
 222   padding: 2px;
 223 }
 224
 225 .patientEncounterList:hover {
 226   height: auto;
 227   overflow: visible;
 228   z-index: 4;
 229 }
 230
 231 .patientEncounterList > div:hover,
 232 .patientEncounterList table.encounters td:hover,
 233 .patientInfo .clear:hover i {
 234   color: var(--danger);
 235 }
 236
 237 .patientEncounterList .review {
 238   background-color: var(--gray);
 239   border: 1px solid var(--black);
 240   border-radius: 5px;
 241   padding: 2px;
 242 }
 243
 244 #userData {
 245   float: $right;
 246   position: relative;
 247 }
 248
 249 .patientInfo {
 250   padding: 1px 1px 1px 10px;
 251 }
 252
 253 /* TODO: Marked this class for removal */
 254 .top {
 255   vertical-align: top;
 256 }
 257
 258 .appMenu > span {
 259   float: $left;
 260   padding: 0;
 261   white-space: nowrap;
 262 }
 263
 264 .appMenu_small > span {
 265   padding: 0;
 266   white-space: nowrap;
 267 }
 268
 269 .appMenu > span:hover,
 270 .appMenu .appMenu > span:hover {
 271   background-color: var(--primary);
 272   color: var(--white);
 273   text-decoration: none;
 274   text-shadow: none;
 275 }
 276
 277 .appMenu ul,
 278 .appMenu_small ul {
 279   list-style: none;
 280   margin: 0;
 281   padding: 1px 5px 2px 1px;
 282 }
 283
 284 .appMenu li:hover > .menuDisabled {
 285   background-color: transparent;
 286 }
 287
 288 .appMenu_small .menuLabel {
 289   padding: 0.625rem;
 290 }
 291
 292 .appMenu .oe-show {
 293   display: none;
 294 }
 295
 296 .appMenu_small .oe-show {
 297   display: block;
 298 }
 299
 300 .menuSection {
 301   position: relative;
 302 }
 303
 304 .menuSection:hover {
 305   background-color: #cce3f8;
 306 }
 307
 308 .menuSection > .menuEntries {
 309   box-shadow: 0 5px 5px var(--gray);
 310   display: none;
 311   min-width: 175px;
 312   padding: 0;
 313   position: absolute;
 314   top: 40px;
 315   white-space: nowrap;
 316   z-index: 1000;
 317 }
 318
 319 .menuSection > .menuEntries .menuEntries {
 320   display: none;
 321   position: absolute;
 322   top: -3px;
 323   #{$left}: 161px;
 324 }
 325
 326 .menuSection:hover > .menuEntries {
 327   display: block;
 328 }
 329
 330 /* Needed for things that require it */
 331 .menu-shadow-ovr {
 332   box-shadow: 0 5px 5px var(--gray) !important;
 333 }
 334
 335
 336 /* Need separate styling for top level vs submenu items
 337  * This currently controls ALL links in menu, no bueno
 338  * --Robert Down */
 339 .menuLabel {
 340   color: var(--dark);
 341   font-weight: 700;
 342   padding: 0.9375rem 0.625rem;
 343   transition: background-color 0.1s ease;
 344   width: 100%;
 345 }
 346
 347 .menuLabel:hover {
 348   background: #cce3f8;
 349   color: var(--dark);
 350 }
 351
 352 /** Only apply if not an actual link **/
 353 div.menuLabel:hover {
 354   cursor: default !important;
 355 }
 356
 357 /** Sub menu **/
 358 .menuEntries li .menuLabel {
 359   display: block;
 360   float: none;
 361   padding: 10px 20px;
 362 }
 363
 364 .menuEntries li .menuLabel:hover {
 365   background-color: #cce3f8;
 366   color: var(--dark);
 367 }
 368
 369 .logo {
 370   padding: 10px 0;
 371 }
 372
 373 .menuDisabled {
 374   background-color: transparent;
 375   color: var(--gray300) !important;
 376   pointer-events: none;
 377 }
 378
 379 #username {
 380   cursor: pointer;
 381 }
 382
 383 .userSection {
 384   min-width: 200px;
 385   #{$right}: 10px;
 386 }
 387
 388 /* Main menu bar */
 389 .body_top {
 390   background-color: var(--light);
 391   color: var(--dark);
 392   margin: 0;
 393   padding: 0;
 394   z-index: 10;
 395 }
 396
 397 .body_title {
 398   background-color: var(--light);
 399   color: var(--black);
 400   padding: 10px 0 0;
 401 }
 402
 403 #username:hover > .userfunctions {
 404   display: block;
 405   width: 98%;
 406 }
 407
 408 #username > .userfunctions > div:hover {
 409   color: var(--danger);
 410 }
 411
 412 .menu_arrow {
 413   bottom: 0;
 414   margin: 7px 7px 2px;
 415 }
 416
 417 .topToolbarRight {
 418   border-top: 0;
 419 }
 420
 421 .closeButton {
 422   display: inline-block;
 423   float: $right;
 424   position: relative;
 425   top: 14px;
 426   #{$right}: 5px;
 427 }
 428
 429 .float-element {
 430   float: $left;
 431 }
 432
 433 #logout_icon {
 434   cursor: pointer;
 435   margin: 12px 5px 0 10px;
 436 }
 437
 438 #menu_icon {
 439   cursor: pointer;
 440   margin: 12px 25px;
 441 }
 442
 443 #patient_caret {
 444   font-size: 1.5rem;
 445   margin-top: -5px;
 446 }
 447
 448 @media (max-width: 768px) {
 449   .mainFrames {
 450     margin: 0;
 451     padding-#{$left}: 1px;
 452   }
 453
 454   #framesDisplay > div {
 455     height: 100vh;
 456     width: 100%;
 457   }
 458 }
 459
 460 @include if-rtl {
 461   #mainBox {
 462     padding: 0 5px 0 0 !important;
 463   }
 464
 465   #mainBox .logo {
 466     float: right !important;
 467     margin: 3px 10px 0 4px !important;
 468   }
 469
 470   #attendantData .patientDataColumn:nth-child(1) span {
 471     float: right;
 472     margin-left: 12px;
 473     margin-right: 5px;
 474   }
 475
 476   #attendantData .patientDataColumn {
 477     float: right;
 478   }
 479
 480   #attendantData .patientDataColumn:nth-child(1) .patientInfo .ptName span {
 481     float: none;
 482   }
 483
 484   #attendantData .patientDataColumn:nth-child(1) .patientInfo .ptName span:nth-child(2) {
 485     margin: 2px;
 486   }
 487
 488   .appMenu {
 489     display: flex;
 490     flex-direction: row;
 491     float: right;
 492     margin-right: 0;
 493     position: relative;
 494   }
 495
 496   .closeButton {
 497     padding-right: 7px;
 498     right: 0;
 499     top: 12px;
 500     transform: scaleX(-1);
 501   }
 502 }