| Line 1: | Line 1: | 
|  | {{#css: |  | {{#css: | 
| − | 
 |  | 
| − | <!-- Styling for the columns -->
 |  | 
|  | .row{ |  | .row{ | 
|  | 	display:flex; |  | 	display:flex; | 
| Line 12: | Line 10: | 
|  |     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 24: | Line 23: | 
|  |    padding-left: 15px;   |  |    padding-left: 15px;   | 
|  | } |  | } | 
| − | 
 |  | 
| − | <!-- Mobile UI styling -->
 |  | 
|  | @media (max-width: 576px) { |  | @media (max-width: 576px) { | 
|  |    .col-sm-12 { |  |    .col-sm-12 { | 
| Line 31: | Line 28: | 
|  |      max-width: 100%; } |  |      max-width: 100%; } | 
|  |     .section{ |  |     .section{ | 
| − |     padding: 6px 0 20px 0; | + |     padding: 10px 0 20px 0; | 
|  | + |    } | 
|  | + |    .tabContainer{ | 
|  | + |    margin-bottom: -1rem !important; | 
|  |     } |  |     } | 
|  |     .navContainer{ |  |     .navContainer{ | 
|  |     padding-bottom: -1rem !important; |  |     padding-bottom: -1rem !important; | 
|  | + |    } | 
|  | + |    h2{ | 
|  | + |    padding-top: 21px; | 
|  |     } |  |     } | 
|  | } |  | } | 
| − | 
 |  | 
| − | <!-- Tablet UI styling -->
 |  | 
|  | @media screen and (min-width: 576px) { |  | @media screen and (min-width: 576px) { | 
|  |     .col-md-6 { |  |     .col-md-6 { | 
| Line 48: | Line 49: | 
|  |      max-width: 30%; } |  |      max-width: 30%; } | 
|  |    .section{ |  |    .section{ | 
| − |     padding: 6px 0 20px 20px; | + |     padding: 10px 0 20px 20px; | 
|  |     } |  |     } | 
|  |      .col-md-8{ |  |      .col-md-8{ | 
| Line 55: | Line 56: | 
|  |     } |  |     } | 
|  | } |  | } | 
| − | 
 |  | 
| − | <!-- Desktop UI styling -->
 |  | 
|  | @media screen and (min-width: 992px) { |  | @media screen and (min-width: 992px) { | 
|  |    .col-lg { |  |    .col-lg { | 
| Line 78: | Line 77: | 
|  |     } |  |     } | 
|  | } |  | } | 
| − | 
 |  | 
| − | <!-- Font styling -->
 |  | 
|  | h1,h2{ |  | h1,h2{ | 
|  |     font-family: 'Helvetica', sans-serif !important; |  |     font-family: 'Helvetica', sans-serif !important; | 
| Line 93: | Line 90: | 
|  |     font-weight: 700; |  |     font-weight: 700; | 
|  | } |  | } | 
| − |   | + | .mw-collapsible{ | 
| − | <!--Nav Menu Styling -->
 | + |    margin-bottom: 5px; | 
|  | + | } | 
|  | + | .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 114: | Line 122: | 
|  |     padding-bottom:0px !important; |  |     padding-bottom:0px !important; | 
|  | } |  | } | 
|  | + |  | 
|  | .navMenu li{ |  | .navMenu li{ | 
|  |     border: solid 1px #002D42; |  |     border: solid 1px #002D42; | 
| Line 131: | Line 140: | 
|  |    border-radius:10px; |  |    border-radius:10px; | 
|  | } |  | } | 
| − | .primary-btn a, .btn-info a, .arrow.up:hover { | + | .navMenu .active a, .primary-btn.active 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 139: | Line 152: | 
|  |     border: none !important; |  |     border: none !important; | 
|  |     border-radius: 10px 10px 0 0 !important; |  |     border-radius: 10px 10px 0 0 !important; | 
| − |     background-color: #002D42; | + |     background-color: #F5F5F5; | 
| − |    color:white; 
 |  | 
| − | }
 |  | 
| − | .primary-btn:hover{
 |  | 
| − |   background-color: #00131c !important;
 |  | 
| − | }
 |  | 
| − | .primary-btn.active, .primary-btn.active:hover{
 |  | 
| − |   background-color: #F5F5F5!important;
 |  | 
|  | } |  | } | 
| − | .primary-btn.active a{ | + | .primary-btn.active{ | 
| − |    color: black !important; | + |    background-color: #002D42; | 
|  | } |  | } | 
| − | 
 |  | 
| − | <!-- Checklist styling -->
 |  | 
|  | .checklistCont{ |  | .checklistCont{ | 
|  |    border: 1px solid black; |  |    border: 1px solid black; | 
| − |    margin: 1.5rem 0 1.5rem 0; | + |    padding: 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 184: | Line 174: | 
|  |    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 201: | Line 189: | 
|  |    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 248: | Line 220: | 
|  |      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 257: | Line 244: | 
|  |     <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"> Student(Coming Soon)</li> | + |     <li class="primary-btn"> [[ESDC_Onboarding_Executive|This is a Test tab]] </li>   | 
|  | </ul> |  | </ul> | 
|  | </div> |  | </div> |