| Line 1: |
Line 1: |
| | {{#css: | | {{#css: |
| | + | |
| | + | <!-- Styling for the columns --> |
| | .row{ | | .row{ |
| | display:flex; | | display:flex; |
| Line 10: |
Line 12: |
| | background-color:#F5F5F5; | | background-color:#F5F5F5; |
| | } | | } |
| − |
| |
| | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, | | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, |
| | .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, | | .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, |
| Line 23: |
Line 24: |
| | padding-left: 15px; | | padding-left: 15px; |
| | } | | } |
| | + | |
| | + | <!-- Mobile UI styling --> |
| | @media (max-width: 576px) { | | @media (max-width: 576px) { |
| | .col-sm-12 { | | .col-sm-12 { |
| Line 28: |
Line 31: |
| | max-width: 100%; } | | max-width: 100%; } |
| | .section{ | | .section{ |
| − | padding: 10px 0 20px 0; | + | padding: 6px 0 20px 0; |
| − | }
| |
| − | .tabContainer{
| |
| − | margin-bottom: -1rem !important;
| |
| | } | | } |
| | .navContainer{ | | .navContainer{ |
| Line 37: |
Line 37: |
| | } | | } |
| | h2{ | | h2{ |
| − | padding-top: 21px;
| + | padding-top:21px; |
| | + | } |
| | + | .card-body{ |
| | + | padding: 12px 0 12px 0; |
| | } | | } |
| | } | | } |
| | + | |
| | + | <!-- Tablet UI styling --> |
| | @media screen and (min-width: 576px) { | | @media screen and (min-width: 576px) { |
| | .col-md-6 { | | .col-md-6 { |
| Line 49: |
Line 54: |
| | max-width: 30%; } | | max-width: 30%; } |
| | .section{ | | .section{ |
| − | padding: 10px 0 20px 20px; | + | padding: 6px 0 20px 20px; |
| | } | | } |
| | .col-md-8{ | | .col-md-8{ |
| Line 56: |
Line 61: |
| | } | | } |
| | } | | } |
| | + | |
| | + | <!-- Desktop UI styling --> |
| | @media screen and (min-width: 992px) { | | @media screen and (min-width: 992px) { |
| | .col-lg { | | .col-lg { |
| Line 77: |
Line 84: |
| | } | | } |
| | } | | } |
| | + | |
| | + | <!-- Font styling --> |
| | h1,h2{ | | h1,h2{ |
| | font-family: 'Helvetica', sans-serif !important; | | font-family: 'Helvetica', sans-serif !important; |
| Line 90: |
Line 99: |
| | font-weight: 700; | | font-weight: 700; |
| | } | | } |
| − | .mw-collapsible{
| + | |
| − | margin-bottom: 5px;
| + | <!-- Nav Menu Styling --> |
| − | }
| |
| − | .checkbox{
| |
| − | display:inline-block;
| |
| − | width: 1rem;
| |
| − | height: 1rem !important;
| |
| − | border: solid 1px black;
| |
| − | margin-right: 10px;
| |
| − | }
| |
| − | .floatL{
| |
| − | float:left;
| |
| − | }
| |
| | .navMenu{ | | .navMenu{ |
| | list-style:none; | | list-style:none; |
| Line 122: |
Line 120: |
| | padding-bottom:0px !important; | | padding-bottom:0px !important; |
| | } | | } |
| − |
| |
| | .navMenu li{ | | .navMenu li{ |
| | border: solid 1px #002D42; | | border: solid 1px #002D42; |
| Line 140: |
Line 137: |
| | border-radius:10px; | | border-radius:10px; |
| | } | | } |
| − | .navMenu .active a, .primary-btn.active a, .btn-info a, .arrow.up:hover {
| + | .primary-btn a, .btn-info a, .arrow.up:hover { |
| | color: white !important; | | color: white !important; |
| | text-decoration:none; | | text-decoration:none; |
| − | }
| |
| − | .mw-parser-output .external{
| |
| − | background:none;
| |
| − | padding-right:0;
| |
| | } | | } |
| | .primary-btn{ | | .primary-btn{ |
| Line 152: |
Line 145: |
| | border: none !important; | | border: none !important; |
| | border-radius: 10px 10px 0 0 !important; | | border-radius: 10px 10px 0 0 !important; |
| − | background-color: #F5F5F5; | + | background-color: #002D42; |
| | + | color:white; |
| | + | } |
| | + | .primary-btn:hover{ |
| | + | background-color: #00131c !important; |
| | + | } |
| | + | .primary-btn.active, .primary-btn.active:hover{ |
| | + | background-color: #F5F5F5 !important; |
| | } | | } |
| − | .primary-btn.active{ | + | .primary-btn.active a{ |
| − | background-color: #002D42; | + | color: black !important; |
| | } | | } |
| | + | |
| | + | <!-- Checklist styling --> |
| | .checklistCont{ | | .checklistCont{ |
| | border: 1px solid black; | | border: 1px solid black; |
| − | padding: 1.5rem 0 1.5rem 0; | + | margin: 1.5rem 0 1.5rem 0; |
| | border-radius: 10px; | | border-radius: 10px; |
| | + | } |
| | + | .mw-parser-output .external{ |
| | + | background:none; |
| | + | padding-right:0; |
| | + | } |
| | + | .mw-collapsible{ |
| | + | margin-bottom: 5px; |
| | + | } |
| | + | .checkbox{ |
| | + | display:inline-block; |
| | + | width: 1rem; |
| | + | height: 1rem !important; |
| | + | border: solid 1px black; |
| | + | margin-right: 10px; |
| | } | | } |
| | .card { | | .card { |
| Line 174: |
Line 190: |
| | flex: 1 1 auto; | | flex: 1 1 auto; |
| | padding: 12px; } | | padding: 12px; } |
| | + | |
| | + | <!-- Back to top Button styling --> |
| | .btn-backtotop { | | .btn-backtotop { |
| | border: 1px solid #CECECE; | | border: 1px solid #CECECE; |
| Line 189: |
Line 207: |
| | color: white; | | color: white; |
| | text-decoration: none; | | text-decoration: none; |
| | + | } |
| | + | .fixed{ |
| | + | position:fixed; |
| | + | bottom:5px; |
| | + | right:5px; |
| | + | } |
| | + | .arrow { |
| | + | border: solid black; |
| | + | border-width: 0 3px 3px 0; |
| | + | display: inline-block; |
| | + | padding: 3px; |
| | + | } |
| | + | .up { |
| | + | transform: rotate(-135deg); |
| | + | -webkit-transform: rotate(-135deg); |
| | } | | } |
| | | | |
| | + | <!-- More Button styling --> |
| | .btn { | | .btn { |
| | display: inline-block; | | display: inline-block; |
| Line 220: |
Line 254: |
| | border-color: #F5F5F5; | | border-color: #F5F5F5; |
| | margin-bottom: 12px; | | margin-bottom: 12px; |
| − | }
| |
| − | .fixed{
| |
| − | position:fixed;
| |
| − | bottom:5px;
| |
| − | right:5px;
| |
| − | }
| |
| − | .arrow {
| |
| − | border: solid black;
| |
| − | border-width: 0 3px 3px 0;
| |
| − | display: inline-block;
| |
| − | padding: 3px;
| |
| − | }
| |
| − | .up {
| |
| − | transform: rotate(-135deg);
| |
| − | -webkit-transform: rotate(-135deg);
| |
| | } | | } |
| | }} | | }} |
| Line 244: |
Line 263: |
| | <li class="primary-btn active"> [https://wiki.gccollab.ca/ESDC_Onboarding Home]</li> | | <li class="primary-btn active"> [https://wiki.gccollab.ca/ESDC_Onboarding Home]</li> |
| | <li class="primary-btn"> [[ESDC_Onboarding/Executive|Executive]] </li> | | <li class="primary-btn"> [[ESDC_Onboarding/Executive|Executive]] </li> |
| − | <li class="primary-btn"> [[ESDC_Onboarding_Executive|This is a Test tab]] </li> | + | <li class="primary-btn"> Student(Coming Soon)</li> |
| | </ul> | | </ul> |
| | </div> | | </div> |