| 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> |