-
-/** Flexbox styling rules **/
-body.flexbox {
- display: flex;
- flex-direction: column;
- align-items: stretch;
- height: 100%;
- min-height: 100%;
- max-height: 100%;
- overflow: hidden;
- #content {
- flex: 1;
- display: flex;
- min-height: 0;
- }
-}
-
-.flex-fill {
- display: flex;
- align-items: stretch;
- min-height: 0;
- max-width: 100%;
- position: relative;
- &.rows {
- flex-direction: row;
- }
- &.columns {
- flex-direction: column;
- }
-}
-
-.flex {
- min-height: 0;
- flex: 1;
-}
-
-.flex.scroll {
- //overflow-y: auto;
- display: flex;
- &.sidebar {
- margin-right: -14px;
- }
-}
-.flex.scroll .scroll-body {
- overflow-y: scroll;
- flex: 1;
-}
-
-.flex-child > div {
- flex: 1;
-}
-
-.dual-column-content {
- columns: 2;
-}
-
-@include smaller-than($m) {
- .dual-column-content {
- columns: 1;
- }
-}
-
-.content-wrap.card {
- padding: $-l $-xxl;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: $-xl;
- overflow: auto;
- min-height: 60vh;
- &.auto-height {
- min-height: 0;
- }
- &.fill-width {
- width: 100%;
- }
-}
-@include smaller-than($m) {
- .content-wrap.card {
- padding: $-m $-l;
- }
-}
-
-.tri-layout-container {
- display: grid;
- margin-left: $-xl;
- margin-right: $-xl;
- grid-template-columns: 1fr 4fr 1fr;
- grid-template-areas: "a b c";
- grid-column-gap: $-xxl;
- .tri-layout-right {
- grid-area: c;
- min-width: 0;
- }
- .tri-layout-left {
- grid-area: a;
- min-width: 0;
- }
- .tri-layout-middle {
- grid-area: b;
- padding-top: $-m;
- }
-}
-@include smaller-than($xxl) {
- .tri-layout-container {
- grid-template-areas: "c b b"
- "a b b";
- grid-template-columns: 1fr 3fr;
- grid-template-rows: max-content min-content;
- padding-right: $-l;
- .content-wrap.card {
- padding: $-l $-xl;
- }
- }
-}
-@include larger-than($xxl) {
- .tri-layout-left-contents, .tri-layout-right-contents {
- padding: $-m;
- position: sticky;
- top: $-m;
- max-height: 100vh;
- min-height: 50vh;
- overflow-y: scroll;
- overflow-x: hidden;
- scrollbar-width: none;
- -ms-overflow-style: none;
- &::-webkit-scrollbar {
- display: none;
- }
- }
- .tri-layout-middle-contents {
- max-width: 940px;
- margin: 0 auto;
- }
-}
-
-@include smaller-than($l) {
- .tri-layout-container {
- grid-template-areas: none;
- grid-template-columns: 10% 90%;
- grid-column-gap: 0;
- .tri-layout-left-contents, .tri-layout-right-contents {
- padding-left: $-m;
- padding-right: $-m;
- }
- .tri-layout-right-contents > div, .tri-layout-left-contents > div {
- opacity: 0.6;
- z-index: 0;
- }
- .tri-layout-left > *, .tri-layout-right > * {
- pointer-events: none;
- }
- .tri-layout-right, .tri-layout-left, .tri-layout-middle {
- grid-area: none;
- grid-column: 1/3;
- grid-row: 1;
- }
- .tri-layout-middle {
- grid-row: 1/3;
- grid-column: 2/3;
- z-index: 1;
- transition: transform ease-in-out 240ms;
- }
- .tri-layout-left {
- grid-row: 2;
- }
- &.mobile-open {
- overflow: hidden;
- .tri-layout-middle {
- transform: translateX(90%);
- }
- .tri-layout-right > *, .tri-layout-left > * {
- pointer-events: auto;
- }
- }
- }
-}
-
-.tri-layout-left-contents > div, .tri-layout-right-contents > div {
- opacity: 0.6;
- transition: opacity ease-in-out 120ms;
- &:hover {
- opacity: 1;
- }
-}
-
-/** Rules for all columns */
-div[class^="col-"] img {
- max-width: 100%;
-}
-
-.container {
- max-width: $xxl;
- margin-left: auto;
- margin-right: auto;
- padding-left: $-m;
- padding-right: $-m;
- &.fluid {
- max-width: 100%;
- }
- &.medium {
- max-width: 992px;
- }
- &.small {
- max-width: 840px;
- }
- &.very-small {
- max-width: 480px;
- }
- &.nopad {
- padding-left: 0;
- padding-right: 0;
- }
-}
-
-.row {
- margin-left: -$-m;
- margin-right: -$-m;
-}
-
-.grid {
- display: grid;
- grid-column-gap: $-l;
- grid-row-gap: $-l;
- &.half {
- grid-template-columns: 1fr 1fr;
- }
- &.third {
- grid-template-columns: 1fr 1fr 1fr;
- }
- &.left-focus {
- grid-template-columns: 2fr 1fr;
- }
- &.right-focus {
- grid-template-columns: 1fr 3fr;
- }
- &.gap-xl {
- grid-column-gap: $-xl;
- grid-row-gap: $-xl;
- }
- &.gap-xxl {
- grid-column-gap: $-xxl;
- grid-row-gap: $-xxl;
- }
-}
-
-.grid-card {
- display: flex;
- flex-direction: column;
- border: 1px solid #ddd;
- margin-bottom: $-l;
- border-radius: 4px;
- overflow: hidden;
- min-width: 100px;
- color: $text-dark;
- transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
- &:hover {
- color: $text-dark;
- text-decoration: none;
- box-shadow: $bs-card;
- }
- h2 {
- width: 100%;
- font-size: 1.5em;
- margin: 0 0 10px;
- }
- p {
- font-size: .7rem;
- margin: 0;
- line-height: 1.6em;
- }
- .grid-card-content {
- flex: 1;
- border-top: 0;
- border-bottom-width: 2px;
- }
- .grid-card-content, .grid-card-footer {
- padding: $-l;
- }
- .grid-card-content + .grid-card-footer {
- padding-top: 0;
- }
-}
-
-.bookshelf-grid-item .grid-card-content h2 a {
- color: $color-bookshelf;
- fill: $color-bookshelf;
-}
-
-.book-grid-item .grid-card-footer {
- p.small {
- font-size: .8em;
- margin: 0;
- }
-}
-
-@include smaller-than($m) {
- .grid.third {
- grid-template-columns: 1fr 1fr;
- }
- .grid.half, .grid.left-focus, .grid.right-focus {
- grid-template-columns: 1fr;
- }
- .grid.half.collapse-xs {
- grid-template-columns: 1fr 1fr;
- }
- .grid.gap-xl {
- grid-column-gap: $-m;
- grid-row-gap: $-m;
- }
- .grid.right-focus.reverse-collapse > *:nth-child(2) {
- order: 0;
- }
- .grid.right-focus.reverse-collapse > *:nth-child(1) {
- order: 1;
- }
-}
-
-@include smaller-than($s) {
- .grid.third {
- grid-template-columns: 1fr;
- }
-}
-
-@include smaller-than($xs) {
- .grid.half.collapse-xs {
- grid-template-columns: 1fr;
- }
-}
-
-.float {
- float: left;
- &.right {
- float: right;
- }
-}
-
-.block {
- display: block;
- position: relative;
-}
-
-.inline {
- display: inline;
-}
-
-.block.inline {
- display: inline-block;
-}
-
-
-// TODO - Remove old BS grid system
-.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
- position: relative;
- min-height: 1px;
- padding-left: $-m;
- padding-right: $-m;
-}
-.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
- float: left;
-}
-.col-xs-12 {
- width: 100%;
-}
-.col-xs-11 {
- width: 91.66666667%;
-}
-.col-xs-10 {
- width: 83.33333333%;
-}
-.col-xs-9 {
- width: 75%;
-}
-.col-xs-8 {
- width: 66.66666667%;
-}
-.col-xs-7 {
- width: 58.33333333%;
-}
-.col-xs-6 {
- width: 50%;
-}
-.col-xs-5 {
- width: 41.66666667%;
-}
-.col-xs-4 {
- width: 33.33333333%;
-}
-.col-xs-3 {
- width: 25%;
-}
-.col-xs-2 {
- width: 16.66666667%;
-}
-.col-xs-1 {
- width: 8.33333333%;
-}
-.col-xs-pull-12 {
- right: 100%;
-}
-.col-xs-pull-11 {
- right: 91.66666667%;
-}
-.col-xs-pull-10 {
- right: 83.33333333%;
-}
-.col-xs-pull-9 {
- right: 75%;
-}
-.col-xs-pull-8 {
- right: 66.66666667%;
-}
-.col-xs-pull-7 {
- right: 58.33333333%;
-}
-.col-xs-pull-6 {
- right: 50%;
-}
-.col-xs-pull-5 {
- right: 41.66666667%;
-}
-.col-xs-pull-4 {
- right: 33.33333333%;
-}
-.col-xs-pull-3 {
- right: 25%;
-}
-.col-xs-pull-2 {
- right: 16.66666667%;
-}
-.col-xs-pull-1 {
- right: 8.33333333%;
-}
-.col-xs-pull-0 {
- right: auto;
-}
-.col-xs-push-12 {
- left: 100%;
-}
-.col-xs-push-11 {
- left: 91.66666667%;
-}
-.col-xs-push-10 {
- left: 83.33333333%;
-}
-.col-xs-push-9 {
- left: 75%;
-}
-.col-xs-push-8 {
- left: 66.66666667%;
-}
-.col-xs-push-7 {
- left: 58.33333333%;
-}
-.col-xs-push-6 {
- left: 50%;
-}
-.col-xs-push-5 {
- left: 41.66666667%;
-}
-.col-xs-push-4 {
- left: 33.33333333%;
-}
-.col-xs-push-3 {
- left: 25%;
-}
-.col-xs-push-2 {
- left: 16.66666667%;
-}
-.col-xs-push-1 {
- left: 8.33333333%;
-}
-.col-xs-push-0 {
- left: auto;
-}
-.col-xs-offset-12 {
- margin-left: 100%;
-}
-.col-xs-offset-11 {
- margin-left: 91.66666667%;
-}
-.col-xs-offset-10 {
- margin-left: 83.33333333%;
-}
-.col-xs-offset-9 {
- margin-left: 75%;
-}
-.col-xs-offset-8 {
- margin-left: 66.66666667%;
-}
-.col-xs-offset-7 {
- margin-left: 58.33333333%;
-}
-.col-xs-offset-6 {
- margin-left: 50%;
-}
-.col-xs-offset-5 {
- margin-left: 41.66666667%;
-}
-.col-xs-offset-4 {
- margin-left: 33.33333333%;
-}
-.col-xs-offset-3 {
- margin-left: 25%;
-}
-.col-xs-offset-2 {
- margin-left: 16.66666667%;
-}
-.col-xs-offset-1 {
- margin-left: 8.33333333%;
-}
-.col-xs-offset-0 {
- margin-left: 0%;
-}
-@media (min-width: $screen-sm) {
- .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
- float: left;
- }
- .col-sm-12 {
- width: 100%;
- }
- .col-sm-11 {
- width: 91.66666667%;
- }
- .col-sm-10 {
- width: 83.33333333%;
- }
- .col-sm-9 {
- width: 75%;
- }
- .col-sm-8 {
- width: 66.66666667%;
- }
- .col-sm-7 {
- width: 58.33333333%;
- }
- .col-sm-6 {
- width: 50%;
- }
- .col-sm-5 {
- width: 41.66666667%;
- }
- .col-sm-4 {
- width: 33.33333333%;
- }
- .col-sm-3 {
- width: 25%;
- }
- .col-sm-2 {
- width: 16.66666667%;
- }
- .col-sm-1 {
- width: 8.33333333%;
- }
- .col-sm-pull-12 {
- right: 100%;
- }
- .col-sm-pull-11 {
- right: 91.66666667%;
- }
- .col-sm-pull-10 {
- right: 83.33333333%;
- }
- .col-sm-pull-9 {
- right: 75%;
- }
- .col-sm-pull-8 {
- right: 66.66666667%;
- }
- .col-sm-pull-7 {
- right: 58.33333333%;
- }
- .col-sm-pull-6 {
- right: 50%;
- }
- .col-sm-pull-5 {
- right: 41.66666667%;
- }
- .col-sm-pull-4 {
- right: 33.33333333%;
- }
- .col-sm-pull-3 {
- right: 25%;
- }
- .col-sm-pull-2 {
- right: 16.66666667%;
- }
- .col-sm-pull-1 {
- right: 8.33333333%;
- }
- .col-sm-pull-0 {
- right: auto;
- }
- .col-sm-push-12 {
- left: 100%;
- }
- .col-sm-push-11 {
- left: 91.66666667%;
- }
- .col-sm-push-10 {
- left: 83.33333333%;
- }
- .col-sm-push-9 {
- left: 75%;
- }
- .col-sm-push-8 {
- left: 66.66666667%;
- }
- .col-sm-push-7 {
- left: 58.33333333%;
- }
- .col-sm-push-6 {
- left: 50%;
- }
- .col-sm-push-5 {
- left: 41.66666667%;
- }
- .col-sm-push-4 {
- left: 33.33333333%;
- }
- .col-sm-push-3 {
- left: 25%;
- }
- .col-sm-push-2 {
- left: 16.66666667%;
- }
- .col-sm-push-1 {
- left: 8.33333333%;
- }
- .col-sm-push-0 {
- left: auto;
- }
- .col-sm-offset-12 {
- margin-left: 100%;
- }
- .col-sm-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-sm-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-sm-offset-9 {
- margin-left: 75%;
- }
- .col-sm-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-sm-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-sm-offset-6 {
- margin-left: 50%;
- }
- .col-sm-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-sm-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-sm-offset-3 {
- margin-left: 25%;
- }
- .col-sm-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-sm-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-sm-offset-0 {
- margin-left: 0%;
- }
-}
-@media (min-width: $screen-md) {
- .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
- float: left;
- }
- .col-md-12 {
- width: 100%;
- }
- .col-md-11 {
- width: 91.66666667%;
- }
- .col-md-10 {
- width: 83.33333333%;
- }
- .col-md-9 {
- width: 75%;
- }
- .col-md-8 {
- width: 66.66666667%;
- }
- .col-md-7 {
- width: 58.33333333%;
- }
- .col-md-6 {
- width: 50%;
- }
- .col-md-5 {
- width: 41.66666667%;
- }
- .col-md-4 {
- width: 33.33333333%;
- }
- .col-md-3 {
- width: 25%;
- }
- .col-md-2 {
- width: 16.66666667%;
- }
- .col-md-1 {
- width: 8.33333333%;
- }
- .col-md-pull-12 {
- right: 100%;
- }
- .col-md-pull-11 {
- right: 91.66666667%;
- }
- .col-md-pull-10 {
- right: 83.33333333%;
- }
- .col-md-pull-9 {
- right: 75%;
- }
- .col-md-pull-8 {
- right: 66.66666667%;
- }
- .col-md-pull-7 {
- right: 58.33333333%;
- }
- .col-md-pull-6 {
- right: 50%;
- }
- .col-md-pull-5 {
- right: 41.66666667%;
- }
- .col-md-pull-4 {
- right: 33.33333333%;
- }
- .col-md-pull-3 {
- right: 25%;
- }
- .col-md-pull-2 {
- right: 16.66666667%;
- }
- .col-md-pull-1 {
- right: 8.33333333%;
- }
- .col-md-pull-0 {
- right: auto;
- }
- .col-md-push-12 {
- left: 100%;
- }
- .col-md-push-11 {
- left: 91.66666667%;
- }
- .col-md-push-10 {
- left: 83.33333333%;
- }
- .col-md-push-9 {
- left: 75%;
- }
- .col-md-push-8 {
- left: 66.66666667%;
- }
- .col-md-push-7 {
- left: 58.33333333%;
- }
- .col-md-push-6 {
- left: 50%;
- }
- .col-md-push-5 {
- left: 41.66666667%;
- }
- .col-md-push-4 {
- left: 33.33333333%;
- }
- .col-md-push-3 {
- left: 25%;
- }
- .col-md-push-2 {
- left: 16.66666667%;
- }
- .col-md-push-1 {
- left: 8.33333333%;
- }
- .col-md-push-0 {
- left: auto;
- }
- .col-md-offset-12 {
- margin-left: 100%;
- }
- .col-md-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-md-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-md-offset-9 {
- margin-left: 75%;
- }
- .col-md-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-md-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-md-offset-6 {
- margin-left: 50%;
- }
- .col-md-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-md-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-md-offset-3 {
- margin-left: 25%;
- }
- .col-md-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-md-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-md-offset-0 {
- margin-left: 0%;
- }
-}
-@media (min-width: $screen-lg) {
- .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
- float: left;
- }
- .col-lg-12 {
- width: 100%;
- }
- .col-lg-11 {
- width: 91.66666667%;
- }
- .col-lg-10 {
- width: 83.33333333%;
- }
- .col-lg-9 {
- width: 75%;
- }
- .col-lg-8 {
- width: 66.66666667%;
- }
- .col-lg-7 {
- width: 58.33333333%;
- }
- .col-lg-6 {
- width: 50%;
- }
- .col-lg-5 {
- width: 41.66666667%;
- }
- .col-lg-4 {
- width: 33.33333333%;
- }
- .col-lg-3 {
- width: 25%;
- }
- .col-lg-2 {
- width: 16.66666667%;
- }
- .col-lg-1 {
- width: 8.33333333%;
- }
- .col-lg-pull-12 {
- right: 100%;
- }
- .col-lg-pull-11 {
- right: 91.66666667%;
- }
- .col-lg-pull-10 {
- right: 83.33333333%;
- }
- .col-lg-pull-9 {
- right: 75%;
- }
- .col-lg-pull-8 {
- right: 66.66666667%;
- }
- .col-lg-pull-7 {
- right: 58.33333333%;
- }
- .col-lg-pull-6 {
- right: 50%;
- }
- .col-lg-pull-5 {
- right: 41.66666667%;
- }
- .col-lg-pull-4 {
- right: 33.33333333%;
- }
- .col-lg-pull-3 {
- right: 25%;
- }
- .col-lg-pull-2 {
- right: 16.66666667%;
- }
- .col-lg-pull-1 {
- right: 8.33333333%;
- }
- .col-lg-pull-0 {
- right: auto;
- }
- .col-lg-push-12 {
- left: 100%;
- }
- .col-lg-push-11 {
- left: 91.66666667%;
- }
- .col-lg-push-10 {
- left: 83.33333333%;
- }
- .col-lg-push-9 {
- left: 75%;
- }
- .col-lg-push-8 {
- left: 66.66666667%;
- }
- .col-lg-push-7 {
- left: 58.33333333%;
- }
- .col-lg-push-6 {
- left: 50%;
- }
- .col-lg-push-5 {
- left: 41.66666667%;
- }
- .col-lg-push-4 {
- left: 33.33333333%;
- }
- .col-lg-push-3 {
- left: 25%;
- }
- .col-lg-push-2 {
- left: 16.66666667%;
- }
- .col-lg-push-1 {
- left: 8.33333333%;
- }
- .col-lg-push-0 {
- left: auto;
- }
- .col-lg-offset-12 {
- margin-left: 100%;
- }
- .col-lg-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-lg-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-lg-offset-9 {
- margin-left: 75%;
- }
- .col-lg-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-lg-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-lg-offset-6 {
- margin-left: 50%;
- }
- .col-lg-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-lg-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-lg-offset-3 {
- margin-left: 25%;
- }
- .col-lg-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-lg-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-lg-offset-0 {
- margin-left: 0%;
- }
-}
-.clearfix:before,
-.clearfix:after,
-.row:before,
-.row:after {
- content: " ";
- display: table;
-}
-.clearfix:after,
-.row:after {
- clear: both;
-}
-.center-block {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-
-
-
-
-
-.grid {
- display: grid;
- grid-column-gap: $-m;
- grid-row-gap: 0;
- &.contained {
- max-width: $xxl;
- padding-left: $-m;
- padding-right: $-m;
- margin-left: auto;
- margin-right: auto;
- }
- &.v-center {
- align-items: center;
- }
-}
-
-@each $sizeLetter, $size in $spacing {
- .grid.contained.space-#{$sizeLetter} {
- padding-left: $size;
- padding-right: $size;
- grid-column-gap: $size;
- }
-}
-
-@mixin grid-layout($name, $times) {
- .grid.#{$name} {
- grid-template-columns: repeat(#{$times}, 1fr);
- }
-}
-
-@include grid-layout('thirds', 3)
-@include grid-layout('halves', 2)
-
-@each $sizeLetter, $size in $screen-sizes {
- @include smaller-than($size) {
- .grid.break-#{$sizeLetter} {
- grid-template-columns: 1fr;
- }
- }
-}
-
-
-/**
- * Visibility
- */
-
-@each $sizeLetter, $size in $screen-sizes {
- @include smaller-than($size) {
- .hide-under-#{$sizeLetter} {
- display: none !important;
- }
- }
- @include larger-than($size) {
- .hide-over-#{$sizeLetter} {
- display: none !important;
- }
- }
-}
\ No newline at end of file