/* Ultranet 2.7.4 Bootstrap build. ------------------------------ This style sheet contains the base style overrides for Ultranet 2.7.4 +. All CSS elements can be overridden Via CSS. Note that this is the entire stylesheet (not a subset of styles like in styles.css). Bootstrap Framework : 3.3.5 Bootstrap documentation : https://getbootstrap.com/css/ 1. Page body 2. Toolbar changes 3. Styling 3.1. Responsive thumbnails 3.2. CSS polyfils 3.2.1 Support for viewport units. 3.2.2 Support for calc for width and height. 3.2.3 Support for 'position: sticky' 3.3 Formatting 3.3.1 Heading Sizes (Heading widget). 3.3.2 Paragraph columns (Paragraph widget). 3.3.4 Gradients. 3.3.5 CSS transition delay. 4. Module structure 4.1 Nav Bar. 4.2 News centre slide show. 4.2.1 Replace the sliding effect of the carousel with a fade effect. 4.3 News centre card view. 4.4 List of 6 images with links 5. Styling for the footer 6. Other components that are not yet finalized. ============================================================================================================== /* 1. Page body */ body {background:#fff } /* 2. Toolbar changes These css changes area to reset bootstrap default values for non-bootstrap based components (Such as personal toolbar) and dialog box. */ /* Logged out */ .toolbar-loggedout { z-index: 100; position: fixed; width: 100%; } .PublicToolbarBase { box-sizing:content-box;} /* Logged in */ .PersonalToolbarWrapper { box-sizing:content-box;font-size:11px} /*Fix to makesure personal toolbar doesn't inherit bootstrap styling.*/ personal * { box-sizing: content-box; } .PersonalToolbarWrapper footer { padding:0;} #htmlBodyFrame { padding :15px} /* Close button position for dialog boxes. */ .close { width:25px;height:25px;} /* 3.1 Responsive thumbnails Default bootstrap '.img-responsive' only provide the option to scale an image down. This following code will allow the image to scale up when required. */ .thumbnail .img-responsive { width:100%; max-width:none; max-width:unset;} /* 3.2 CSS polyfils Following CSS options are included via polyfils. 3.2.1 Support for viewport units. Both height and width can be set via 'vh' and 'vw' units. 3.2.2 Support for calc for width and height. calc function can be used to compute height and width.*/ .carousel[data-authenticated='0'] .carousel-item .slide { height: 100vh; height: calc(100vh - 100px); } .carousel[data-authenticated='1'] .carousel-item .slide { height: 100vh; height: calc(100vh - 134px); } /* 3.2.3 Support for 'position: sticky' Support for position sticky is added via a plugin. Note that this will not function for iOS. For iOS use the native prefixed attribute. When scrolling up sticky element will reach the top position and will behave as position : fixed. At the switching point '.stuck' class is added to that element. */ .u2-menu-outer { top: 0; z-index: 90; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky;background-color:#fff;} .u2-menu-outer.stuck { box-shadow: 0 4px 13px rgba(0, 0, 0, .2); z-index: 90; top:0; padding-top:34px;} .u2-menu-outer[data-authenticated="0"].stuck + main:before { display:block;height:84px; content:' '} .u2-menu-outer[data-authenticated="1"].stuck + main:before { display:block;height:50px; content:' '} /* 3.3 Formatting 3.3.1 Heading Sizes (Heading) ------------------------------------------------------------------------------------------------------------- When in published view Page builder (view) Page builder (edit) */ h3.u2-heading[data-size], .outer > .inner li[data-lock='1'][data-size] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size] .Heading .u2-editview {font-weight: 300;line-height: 1.2;padding: 0;margin:0;text-transform: uppercase;text-align:center;} h3.u2-heading[data-size='1'], .outer > .inner li[data-lock='1'][data-size='1'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='1'] .Heading .u2-editview {font-size: 1rem;} h3.u2-heading[data-size='2'], .outer > .inner li[data-lock='1'][data-size='2'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='2'] .Heading .u2-editview {font-size: 1.25rem;} h3.u2-heading[data-size='3'], .outer > .inner li[data-lock='1'][data-size='3'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='3'] .Heading .u2-editview {font-size: 1.5rem;} h3.u2-heading[data-size='4'], .outer > .inner li[data-lock='1'][data-size='4'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='4'] .Heading .u2-editview {font-size: 1.75rem;} h3.u2-heading[data-size='5'], .outer > .inner li[data-lock='1'][data-size='5'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='5'] .Heading .u2-editview {font-size: 2.0rem;} h3.u2-heading[data-size='6'], .outer > .inner li[data-lock='1'][data-size='6'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='6'] .Heading .u2-editview {font-size: 2.369em;} /* 3.3.2 Paragraph columns (Paragraph) Paragraphs are collapsed when screen size is smaller than 767px to a single column. This can be changed by altering the following CSS block. ------------------------------------------------------------------------------------------------------------- When in published view. Page builder (view) Page builder (edit) */ .u2-paragraph[data-cols], .outer > .inner li[data-lock='1'][data-cols] .Paragraph .u2-content, body[data-cols].u2-paragraph {line-height: 1.62em;margin-bottom: 1.3em;} .u2-paragraph[data-cols='1'], .outer > .inner li[data-lock='1'][data-cols='1'] .Paragraph .u2-content, body[data-cols='1'].u2-paragraph { } @media(max-width:767px) { .u2-paragraph[data-cols='2'], .outer > .inner li[data-lock='1'][data-cols='2'] .Paragraph .u2-content, body[data-cols='2'].u2-paragraph { -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-fill: balance; -moz-column-span: all; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-fill: balance; -webkit-column-span: all; column-count: 2; column-gap: 20px; column-fill: balance; column-span: all; } .u2-paragraph[data-cols='3'], .outer > .inner li[data-lock='1'][data-cols='3'] .Paragraph .u2-content, body[data-cols='3'].u2-paragraph { -moz-column-count: 3; -moz-column-gap: 20px; -moz-column-fill: balance; -moz-column-span: all; -webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-fill: balance; -webkit-column-span: all; column-count: 3; column-gap: 20px; column-fill: balance; column-span: all; } .u2-paragraph[data-cols='4'], .outer > .inner li[data-lock='1'][data-cols='4'] .Paragraph .u2-content, body[data-cols='4'].u2-paragraph { -moz-column-count: 3; -moz-column-gap: 20px; -moz-column-fill: balance; -moz-column-span: all; -webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-fill: balance; -webkit-column-span: all; column-count: 3; column-gap: 20px; column-fill: balance; column-span: all; } } /* 3.3.4 Gradients Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100*/ .carousel-caption{ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } /* 3.3.5 CSS transition delay Configure delay between css transitions. */ .u2-menu-outer , .u2-menu-outer .navbar-toggle .icon-bar {transition: all 350ms ease-in-out;} /* ============================================================================================================== 4. Modules Structure of a module is as follows. Container class {container} can be either 'container-fluid' or 'container'. User can set the values for margin, padding and background via the page builder. Also can select the box-shadow effect. -------------------------------------------------------------------------------------------------------------
{Module content}
============================================================================================================== 4.1 Nav Bar Bootstrap documentation: https://getbootstrap.com/components/#navbar Navbar (main menu bar on the top) is using mostly default bootstrap layout with the exception of 'navbar-brand' which usually hold just the logo. navbar-brand is extended in this case to hold two additional lines of text for school name and a tag line. Note : 1. "data-authenticated" attribute is set to 1 when the user is logged in. this can be used to style nav bar diffrently for logged in and logged out state if required. 2. Bootstrap 3.x provide the affix class to make menu sticky. However we are not using this built in plugin. (depricated on bootstrap 4.x) 3. Text for school name and tagline can be set under '/Admin/Config/'. -------------------------------------------------------------------------------------------------------------
*/ .u2-menu-outer .main-navigation { margin-bottom:0} .u2-menu-outer .navbar-nav a {cursor:default; color:#666;font-size:14px;border-radius:4px} .u2-menu-outer .navbar-nav a[href]:hover { color:#39c; cursor:pointer} .u2-menu-outer .navbar-nav .dropdown-menu a {font-size:12px;border-radius:4px;line-height:30px;text-overflow:ellipsis;overflow:hidden} /* Navbar Expand collapse menu */ .u2-menu-outer .dropdown-menu {border: 1px solid rgba(0,0,0,0.05);} .u2-menu-outer .navbar-toggle .icon-bar { position: relative;background-color: #B9B9B9; } .u2-menu-outer .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) { top: 6px; transform: rotate(45deg); } .u2-menu-outer .navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) { background-color: transparent; } .u2-menu-outer .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) { top: 0px; transform: rotate(-45deg); } .u2-menu-outer .navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) { background-color: transparent; } .u2-menu-outer .navbar-collapse { max-height: calc(100vh - 80px); overflow-y:auto;} /* Sub menu expand style*/ .u2-menu-outer .dropdown-submenu { position: relative;} .u2-menu-outer .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-radius: 0; } /* Arrow indicator for sub menu items */ .u2-menu-outer .expand-left-pointer > a:after, .u2-menu-outer .dropdown-submenu:hover > a:after, .u2-menu-outer .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #cccccc; margin-top: 10px; margin-right: -10px; } .u2-menu-outer .expand-right-pointer:hover > a:after, .u2-menu-outer .expand-right-pointer > a:after { border-color: transparent; border-style: solid; border-width: 5px 5px 5px 0; border-right-color: #cccccc; } .u2-menu-outer .navbar-brand a { display:block; width:80px;float:left} .u2-menu-outer .navbar-brand {height:50px;padding:0;} .u2-menu-outer .navbar-brand img { width:50px;} .u2-menu-outer .navbar-brand .name { display: block; width: 130px; padding: 8px 8px; margin: 0; float: left; } .u2-menu-outer .navbar-brand .name a { text-decoration:none} .u2-menu-outer .name h1 { font-size:12px;width:100px;margin:0;padding:0;display:block;clear:both;} .u2-menu-outer .name h1 small { font-size:12px;width:100px;margin:8px 0 0 0;padding:0;display:block;clear:both;} /*Ensure there is a slight space above the menu at all times so collapsing logic works as expected. (When the menu is placed at the very top)*/ .Spacer{height:1px;display: block;background:none;content:' '} /*Any styles to be applied when the menu is not floating.*/ .u2-menu-outer:not(.stuck){padding:30px 0 15px 0} /* Drop down expanding style for non-collapsed menu */ @media (min-width: 768px) { .u2-menu-outer .dropdown-submenu > .expand-right.dropdown-menu { left: -100%; width: 100%; } .u2-menu-outer .dropdown-submenu > .expand-right.dropdown-menu > .dropdown-menu { left: -100%; } .u2-menu-outer .dropdown-submenu > .expand-left.dropdown-menu { left: 100%; width: 100%; } .u2-menu-outer .dropdown-submenu > .expand-left.dropdown-menu > .dropdown-menu { left: 100%; } .u2-menu-outer .expand-right > .dropdown-submenu > .expand-left, .u2-menu-outer .dropdown-menu:not(.expand-right) > .dropdown-submenu > .expand-right, .u2-menu-outer .expand-left > .dropdown-submenu > .expand-right { top: 40px; } } @media (max-width: 768px) { .u2-menu-outer .dropdown-submenu { margin-left:10px;border-left:solid 1px #eee} } /* ============================================================================================================== 4.2 News centre slide show (NewsCentreBanner) Bootstrap documentation: https://getbootstrap.com/javascript/#carousel Attribute {data-authenticated} changes between logged in and not logged in state. This can be used to compute heights for the two different toolbars and their different sizes.'vh' viewport unit is supported via a plugin. ------------------------------------------------------------------------------------------------------------- */ .NewsCentreBanner.col, .NewsCentreBanner .row .col {padding:0;margin:0;} .NewsCentreBanner.container-fluid {padding:0;margin:0;} .NewsCentreBanner .carousel-caption {position: absolute;max-width: 100%; right: 0; left: 0; bottom: 0; text-align: left; padding: 90px 30px 30px 30px;} .NewsCentreBanner .carousel-caption h1 {display: block; max-width: 800px;} .NewsCentreBanner .carousel-caption p {display: block; max-width: 800px; padding: 0 15px;} .NewsCentreBanner .carousel-caption p .posted-on{display: block; clear: both; margin: 15px 0;} .NewsCentreBanner .carousel-caption p a {display: block; clear: both; margin: 15px 0;} .NewsCentreBanner .carousel-control {width: 40px;} .carousel[data-authenticated='0'] .slide { height: 100vh; height:calc(100vh - 102px); background-size: cover; background-repeat: no-repeat;} .carousel[data-authenticated='1'] .slide { height: 90vh; height:calc(100vh - 136px); background-size: cover; background-repeat: no-repeat;} /* 4.2.1 Replace the sliding effect of the carousel with a fade effect.*/ .carousel .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel .carousel-inner .item, .carousel .carousel-inner .active.left, .carousel .carousel-inner .active.right { opacity: 0; } .carousel .carousel-inner .active, .carousel .carousel-inner .next.left, .carousel .carousel-inner .prev.right { opacity: 1; } .carousel .carousel-inner .next, .carousel .carousel-inner .prev, .carousel .carousel-inner .active.left, .carousel .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel .carousel-control {z-index: 2;} /* 4.3 News centre card view */ /* Cards with link image and short title */ .u2-news-card { border: 1px solid #dadada; margin-bottom: 0; } .u2-news-card .u2-content { padding: 20px 30px; text-align: center; } .u2-news-card .u2-thumb { width: 100%; height: 340px; display: block; background-size: cover; background-color: #eee; } .u2-news-card .u2-description { border-bottom: 1px solid #dadada; height: 140px; display: block; } .u2-news-card .u2-description h4 { margin-bottom: 1em; } .u2-news-card .u2-description p { font-size: 0.85em; } .u2-news-card .u2-link { padding-top: 12px; } .u2-news-card .u2-link a { margin: 0 3px; font-size: 12px; color: #39c;} /* More news item block with the list of links */ .u2-news-card .u2-find-more p { padding: 30px 30px;margin:0} .u2-news-card .u2-more { height:482px;padding: 20px 0;margin:0; border-top: 1px solid #dadada;} .u2-news-card .u2-more > a{ color: #39c;padding:5px 30px;font-size:0.85em;border:none;background:none} .u2-news-card .u2-more > a:hover { background : #fff} .u2-news-card a.list-group, .u2-news-card a.list-group-item:first-child, .u2-news-card a.list-group-item:last-child { border-radius: 0; } .u2-news-card .list-group:empty:after {display:block; content : 'No news items found.'; font-style:italic;color: #969595;text-align:center;font-size:12px} /* ============================================================================================================== 4.4 List of 6 images with links This module is simply a 6 column grid with brake points set to extra small, small and medium size screens differently. Bootstrap documentation: https://getbootstrap.com/css/#grid -------------------------------------------------------------------------------------------------------------
.....
*/ .IconLinks .thumbnail {display:block;background-size:contain;background-position: center center;background-repeat:no-repeat; } .IconLinks .thumbnail[href]:hover {} .IconLinks .thumbnail-block .img-responsive {display:none} .thumbnail { border:none;background-color:transparent;} /* ============================================================================================================== 5. Styling for the footer ------------------------------------------------------------------------------------------------------------- */ /* Links to other pages */ footer { background-color: rgba(0,0,0,0.8); padding: 50px 0; } footer .list-unstyled { display: block; margin: 10px 0 25px 0; } footer .col a { color: #eee; font-size: 12px;} footer .col li a { color: #999; font-size: 11px;} /* Links to help terms of use etc. (Configured via '/Admin/Config/' under 'Terms of Use & Privacy Policy' section) */ .footer-nav { background-color: #2d2d2d; border-radius: 0px; margin-bottom: 0px;} .footer-nav li a { color: #6b6b6b; font-size: 12px;} .footer-nav li a:hover {background-color: transparent;color: #fff;} .footer-nav .navbar-brand a {font-size: 12px;color: #6b6b6b;} /* ============================================================================================================== 6. Other components that are not yet finalized. Cards (module with 3 columns with an image, text and links) this module will get rebuilt to allow other types of content such as embedded iframes etc. ------------------------------------------------------------------------------------------------------------- */ .card { border: 1px solid #dadada; margin-bottom: 0; } .card a.list-group, .card a.list-group-item:first-child, .card a.list-group-item:last-child { border-radius: 0; } .card .card-block p { padding: 30px 30px;margin:0} .card .list-group { background:#eee; padding: 20px 0;margin:0; border-top: 1px solid #dadada;} .card .list-group > a{ color: #39c;padding:5px 30px;font-size:0.85em;border:none;background:none} .card .list-group > a:hover { background : #fff} .ContentWithLinks .Text { line-height: 1.62em; } .card .list-group:empty:after{ display:block; content : 'No resources attached'; font-style:italic;color: #969595;text-align:center;font-size:12px} [data-theme="1"] .u2-content, [data-theme="1"] .u2-paragraph, [data-theme="1"] .u2-heading, [data-theme="1"] .ContentWithLinks .Text, [data-theme="1"] .card-text, [data-theme="1"] .u2-find-more, [data-theme="1"] .u2-description p { color:#eee;} [data-theme="1"] .u2-news-card .u2-more, [data-theme="1"] .u2-news-card .u2-content {background:rgba(0,0,0,0.5); } [data-theme="0"] .u2-content, [data-theme="0"] .u2-paragraph, [data-theme="0"] .u2-heading, [data-theme="0"] .ContentWithLinks .Text, [data-theme="0"] .card-text, [data-theme="0"] .u2-find-more, [data-theme="0"] .u2-description p { color:#969595;} [data-theme="0"] .u2-news-card .u2-more, [data-theme="0"] .u2-news-card .u2-content {background:#fff } /* Styles for 6 image links */ .IconLinks .col h4:empty { display:none; } .IconLinks .col p:empty { display: none; } .IconLinks .col .u2_icon_title { font-size: 0.85em; line-height:1.5em; color: #666; word-wrap: break-word; overflow: hidden; text-align: center; font-weight:700;} .IconLinks .col .u2_icon_content { font-size: 0.85em; line-height:1.5em; color: #999; word-wrap: break-word; overflow: hidden; text-align: center; } /* Optional - make icon wrap nicely when screen size change.*/ @media only screen and (max-width : 479px) {.IconLinks .col:nth-child(2n+1){clear:left;}} @media only screen and (max-width : 991px) and (min-width : 768px){.IconLinks .col:nth-child(4n+1){clear:left;}} /* Style for divider module */ .Divider hr {border-top: 1px solid rgba(0,0,0,0.2)} /*.Divider {background: url('http://server1.decorcamp.com/images/menopausemoxie.com/wp-content/uploads/2013/04/divider_scroll.jpg') no-repeat center center;background-size: contain;}*/