// Index Page (List of lists)

//=== TITLE
.all-lists {

    p.hide-switches {
        margin: 0;
        padding-top: 0.5em;
        label:first-child {
            display: inline;
            margin-right: 2em;
        }
        input {
            margin: 0;
        }
    }

    .filter-lists {
        padding-bottom: 20px;
    }

    hr {
        margin-top: 0;
    }
}

//=== NAV SIDE MENU
$headerNavPadding: 7px;

.all-lists {
    .header {
        position: relative;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        h1 {
            margin-bottom: 0;
            small {
                font-size: 60%;
            }
        }
        .sort-type {
            margin-top: -3px;
        }
    }
    nav.sort-mode {
        padding-top: 0;
        background-color: white;
        position: absolute;
        bottom: 0;
        right: 0;
        ul {
            margin-bottom: 0;
            padding-bottom: $headerNavPadding;
        }
        .active {
            font-weight: bold;
            border-bottom: 4px solid $rowHoverColor;
            padding-bottom: $headerNavPadding + 5;
        }
        a {
            color: black;
            border-bottom: 4px solid transparent;
        }
    }
    .dropdown-toggle {
        margin-left: 25px !important; // override bootstrap defaults
    }
}

//=== MAIN CONTENT
// table of lists
.all-lists .table-responsive {
    border: none;
}
.all-lists .condensed-table {
    display: none;
}
.all-lists table.lists {


    th {
        @extend .small-caps;
        border-bottom: none;
    }

    tr.list {
        &:hover {
            @extend .row-hover;
            a {
                @extend .row-link-hover;
            }
            .chart-data .bars rect {
                @extend .row-chart-hover;
            }
        }
    }

    td {
        vertical-align: middle;
        padding: 8px 12px;
        border-top: 1px solid $rowBorderColor;
        border-bottom: 1px solid $rowBorderColor;
    }
    td:first-child {
        border-left: 1px solid $rowBorderColor;
    }
    td:last-child {
        border-right: 1px solid $rowBorderColor;
    }

    .list-name {
        font-size: 120%;
        color: black;
        font-weight: bold;
    }
    .list-tags {
        font-size: 80%;
        color: $subheadingColor;
        font-style: italic;
    }
    .list-address {
        font-size: 90%;
    }

    // charts, show x-axis on index page
    .chart {
        height: 35px;
        .ajaxloader {
            margin: 0 auto;
            padding-top: 0.5em;
        }
        .x.axis path, x.axis line {
            display: inline;
            stroke: $rowBorderColor;
            stroke-width: 1px;
            shape-rendering: crispEdges;
            fill: none;
        }
    }

    ul.list-stats {
        font-size: 90%;
        li:first-child {
            padding-right: 1em;
        }
        li+li {
            // Override setting in _hyperkitty-common.scss
            padding-left: 0;
        }
    }
    .participant {
        padding-left: 10px;
    }

    tr.private {
        background-color: #e6f2f5;
        .list-name {
            color: #2e6c83;
        }
    }

    tr.inactive {
        background-color: #eee;
       .list-name {
            color: $subheadingColor;
        }
        ul.list-stats .fa {
            color: $subheadingColor;
        }
    }

    // 'new' label in front of list name
    tr span.new {
        @extend .labels;
        margin-right: 0.5em;
    }
}

.back-to-top {
    @extend .bordered;
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: black;
    background-color: $navbarColor;
    font-size: smaller;
    padding: 1em;
    display: none;
    &:hover {
        background-color: $linkHoverColor;
    }
}

// at screens <= 610px, convert to a different layout
// rows are too long, so only display some info (list name, list stats)
// @media (max-width: $screen-xs-max) {
@include media-breakpoint-down(xs) {
		.all-lists .row {
				margin-right: 0;
		}
}
// force header onto 1 row by removing extra padding/gutter
@include media-breakpoint-between(xs, sm) {
		// @media (max-width: $screen-xs-max) and (min-width: $screen-xs) {
		.all-lists .header {
				h1 {
						padding-right: 0;
				}
				.sort-type {
						padding-right: 0;
						padding-left: 2px;
						font-size: 55%;
						margin-top: 0;
				}
				.btn-group {
						padding-left: 0;
				}
		}
		.all-lists .filter-lists {
				p.hide-switches label:first-child {
						margin-right: 1em;
				}
		}
		.participant {
				padding-left: 0;
		}

		.all-lists table.lists {
				.chart {
						display: inline-block;
				}
				ul.list-stats {
						display: inline-block;
						padding-left: 8px;
						li {
								padding-right: 0;
								display: block;
						}
				}
		}
		}


		//=== Logo

		.all-lists .logo {
				display: block;
				margin: 50px auto 0 auto;
		}
