_landing_page_accordion.scss

/**
* first level property in $images is a view_class custom_init.
* landing_page view can be used many times, each of them uses different set of images.
*/
/* hiding icons for teacher section 29.11.2016 mc */
.view_landing_page_accordion.view_class_teacher section > ul > li {
    display: inline-block;
    float: left;
}

.view_landing_page_accordion.view_class_teacher section > ul > li:nth-child(3n + 1) {
    clear: inherit;
}

.view_landing_page_accordion.view_class_teacher section > ul > li > div,
.view_landing_page_accordion.view_class_teacher section > ul > li > a {
    background: color("purple");
}

.view_landing_page_accordion.view_class_teacher section > ul > li > div > span,
.view_landing_page_accordion.view_class_teacher section > ul > li > a > span {
    color: white;
}

.view_landing_page_accordion.view_class_teacher section > ul > li > div > img,
.view_landing_page_accordion.view_class_teacher section > ul > li > a > img {
    display: none;
}

.view_landing_page_accordion section > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.view_landing_page_accordion section > ul > li {
    display: block;
    float: left;
    padding: 0.5em 1em 1.5em 1em;
    width: calc(47% - 2em);
    /*
				> a:hover {
					background-color: color('purple');
					> span {
						color: color('white');
					}
				}
				*/
}

.view_landing_page_accordion section > ul > li:nth-child(3n + 1) {
    clear: both;
}

.view_landing_page_accordion section > ul > li > div,
.view_landing_page_accordion section > ul > li > a {
    position: relative;
    display: block;
    margin-bottom: 0.5em;
    padding: 0.75em 2.5em 0.75em 0.5em;
    width: calc(100% - 3.25em);
    height: 1.5em;
    line-height: 1.5em;
    text-decoration: none;
    border: 0.125em solid color("purple");
    transition: background-color 0.2s;
}

.view_landing_page_accordion section > ul > li > div > span,
.view_landing_page_accordion section > ul > li > a > span {
    font-weight: 900;
    color: color("purple");
    text-transform: uppercase;
    transition: color 0.2s;
}

.view_landing_page_accordion section > ul > li > div > span.locker:after,
.view_landing_page_accordion section > ul > li > a > span.locker:after {
    content: '';
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background-image: url("/data/ec694e1d-4462-4d59-8124-e79071e96b28");
    background-size: 1.25em 1.25em;
}

.view_landing_page_accordion section > ul > li > div > img,
.view_landing_page_accordion section > ul > li > a > img {
    position: absolute;
    right: 0.25em;
    bottom: -0.8em;
    width: 3.5em;
    height: 3.5em;
}

.view_landing_page_accordion section > ul > li > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.view_landing_page_accordion section > ul > li > ul > li {
    margin: 0;
    padding: 0;
}

.view_landing_page_accordion section > ul > li > ul > li > a {
    display: block;
    padding: 0.45em 0.75em;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #000;
    transition: all 0.2s;
}

.view_landing_page_accordion section > ul > li > ul > li > a:hover {
    color: #fff;
    background-color: color("purple");
    border-color: color("purple");
}

@media screen and (max-width: 799px) {
    .view_landing_page section > ul > li {
        width: calc(100% - 2em);
    }
}

@media screen and (min-width: 800px) and (max-width: 1023px) {
    .view_landing_page section > ul > li {
        width: calc(50% - 2em);
    }
}

@media screen and (min-width: 1366px) {
    .view_landing_page section > ul > li {
        width: calc(33.33% - 2em);
    }
}

/**
*	colors
*/
.view_landing_page_accordion #request_read_container_folder .title {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 0.5em;
    display: block;
}

.view_landing_page_accordion.view_color_green #request_read_container_folder .title {
    color: color("green");
}

.view_landing_page_accordion.view_color_blue #request_read_container_folder .title {
    color: color("blue");
}

.view_landing_page_accordion.view_color_orange #request_read_container_folder .title {
    color: color("orange");
}

.view_landing_page_accordion.view_color_green section > ul > li > ul > li > a:hover {
    color: #fff;
    background-color: color("green");
    border-color: color("green");
}

.view_landing_page_accordion.view_color_blue section > ul > li > ul > li > a:hover {
    color: #fff;
    background-color: color("blue");
    border-color: color("blue");
}

.view_landing_page_accordion.view_color_orange section > ul > li > ul > li > a:hover {
    color: #fff;
    background-color: color("orange");
    border-color: color("orange");
}

Spinner

Login