top: 0;
bottom: 0;
width: 30px;
- color: #666;
+ fill: #666;
font-size: 20px;
vertical-align: middle;
text-align: center;
border-top: 1px solid #BBB;
padding-top: $-m;
cursor: pointer;
- i {
+ svg {
opacity: 0.5;
transition: all ease-in-out 120ms;
- padding: 0;
+ margin: 0;
}
&:hover i {
opacity: 1;
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 {
display: inline-block;
}
-@include larger-than(991px) {
- .row.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
-}
-
-@include smaller-than(992px) {
- .row.auto-clear .col-xs-6:nth-child(2n+1){clear:left;}
-}
-
.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;