/** * 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"); }