#content {
flex: 1;
display: flex;
- min-height: 0px;
+ min-height: 0;
}
}
.flex-fill {
display: flex;
align-items: stretch;
- min-height: 0px;
- .flex, &.flex {
- min-height: 0px;
+ 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;
+}
+
+.flex.sidebar {
+ flex: 1;
+ background-color: #F2F2F2;
+ max-width: 360px;
+ min-height: 90vh;
+}
+.flex.sidebar + .flex.content {
+ flex: 3;
+ background-color: #FFFFFF;
+ padding: 0 $-l;
+ border-left: 1px solid #DDD;
+ max-width: 100%;
+}
+.flex.sidebar .sidebar-toggle {
+ display: none;
+}
+
+@include smaller-than($xl) {
+ body.sidebar-layout {
+ padding-left: 30px;
+ }
+ .flex.sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ z-index: 100;
+ padding-right: 30px;
+ width: 360px;
+ box-shadow: none;
+ transform: translate3d(-330px, 0, 0);
+ transition: transform ease-in-out 120ms;
+ display: flex;
+ flex-direction: column;
+ }
+ .flex.sidebar.open {
+ box-shadow: 1px 2px 2px 1px rgba(0,0,0,.10);
+ transform: translate3d(0, 0, 0);
+ .sidebar-toggle i {
+ transform: rotate(180deg);
+ }
+ }
+ .flex.sidebar .sidebar-toggle {
+ display: block;
+ position: absolute;
+ opacity: 0.9;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 30px;
+ fill: #666;
+ font-size: 20px;
+ vertical-align: middle;
+ text-align: center;
+ border: 1px solid #DDD;
+ border-top: 1px solid #BBB;
+ padding-top: $-m;
+ cursor: pointer;
+ svg {
+ opacity: 0.5;
+ transition: all ease-in-out 120ms;
+ margin: 0;
+ }
+ &:hover i {
+ opacity: 1;
+ }
+ }
+ .sidebar .scroll-body {
flex: 1;
+ overflow-y: scroll;
+ }
+ #sidebar .scroll-body.fixed {
+ width: auto !important;
}
}
+@include larger-than($xl) {
+ #sidebar .scroll-body.fixed {
+ z-index: 5;
+ position: fixed;
+ top: 0;
+ padding-right: $-m;
+ width: 30%;
+ left: 0;
+ height: 100%;
+ overflow-y: auto;
+ -ms-overflow-style: none;
+ //background-color: $primary-faded;
+ border-left: 1px solid #DDD;
+ &::-webkit-scrollbar { width: 0 !important }
+ }
+}
+
+
/** Rules for all columns */
div[class^="col-"] img {
max-width: 100%;
&.small {
max-width: 840px;
}
-}
-
-.center-box {
- margin: $-xl auto 0 auto;
- padding: $-m $-xxl $-xl*2 $-xxl;
- max-width: 346px;
- display: inline-block;
- text-align: left;
- vertical-align: top;
- &.login {
- background-color: #EEE;
- box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
- border: 1px solid #DDD;
+ &.nopad {
+ padding-left: 0;
+ padding-right: 0;
}
}
margin-right: -$-m;
}
+.grid {
+ display: grid;
+ grid-column-gap: $-l;
+ grid-row-gap: $-l;
+ &.third {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+}
+
+.grid-card {
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #ddd;
+ min-width: 100px;
+ .grid-card-content {
+ flex: 1;
+ }
+ .grid-card-content, .grid-card-footer {
+ padding: $-l;
+ }
+ .grid-card-content + .grid-card-footer {
+ padding-top: 0;
+ }
+}
+
+@include smaller-than($m) {
+ .grid.third {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+@include smaller-than($s) {
+ .grid.third {
+ grid-template-columns: 1fr;
+ }
+}
+
.float {
float: left;
&.right {