3 #permalink Course Box

These are the restyled course boxes

3 #permalink Section Course

These are the restyled course section

3.1 #permalink My courses

This is the restyled course box used in My Courses
NB: The 'style' attributes are just for this representation only, when implementing be sure to delete them.

Example

Lorem ipsum dolor sit amet

60%
 <div class="row section-coourse">
   <div class="section-coourse__header col-lg-12">
     <div class="row">
       <div class="col-sm-3 text-center">
         <div class="row">
           <img src="path/to/img" class="img-responsive section-coourse__img">
         </div>
       </div>
       <div class="col-sm-9">
       <h1 class="section-coourse__title">Lorem ipsum dolor sit amet</h1>
         <div class="section-coourse__progress-cotainer">
           <div class="progress section-coourse__progress">
             <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
     <span class="glyphicon glyphicon-signal pull-right" aria-hidden="true"></span>
       </div>
     </div>
   </div>
 </div>
</div>
 <div class="clearfix"></div>
 <div class="section-coourse__menu">
   <div class="col-sm-3 text-center">
     <div class="row">
       <div class="col-xs-12">
           <div class="btn-group btn-flex">
               <button type="button" class="btn btn-default">Menu</button>
               <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
               </button>
             <ul class="dropdown-menu">
               <li><a href="#" data-id="menu_id"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span> <b>Lorem ipsum dolor</b></a></li>
             </ul>
           </div>
       </div>
   </div>
 </div>

3.1 #permalink Course

This is the restyled course section
NB: The 'style' attributes are just for this representation only, when implementing be sure to delete them.

Example

Lorem ipsum dolor sit amet

60%
 <div class="row section-coourse">
   <div class="section-coourse__header col-lg-12">
     <div class="row">
       <div class="col-sm-3 text-center">
         <div class="row">
           <img src="path/to/img" class="img-responsive section-coourse__img">
         </div>
       </div>
       <div class="col-sm-9">
       <h1 class="section-coourse__title">Lorem ipsum dolor sit amet</h1>
         <div class="section-coourse__progress-cotainer">
           <div class="progress section-coourse__progress">
             <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
     <span class="glyphicon glyphicon-signal pull-right" aria-hidden="true"></span>
       </div>
     </div>
   </div>
 </div>
</div>
 <div class="clearfix"></div>
 <div class="section-coourse__menu">
   <div class="col-sm-3 text-center">
     <div class="row">
       <div class="col-xs-12">
           <div class="btn-group btn-flex">
               <button type="button" class="btn btn-default">Menu</button>
               <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
               </button>
             <ul class="dropdown-menu">
               <li><a href="#" data-id="menu_id"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span> <b>Lorem ipsum dolor</b></a></li>
             </ul>
           </div>
       </div>
   </div>
 </div>

3.2 #permalink Course Catalogue

This is the restyled course box used in Course Catalogue
NB: The 'style' attributes are just for this representation only, when implementing be sure to delete them.
Also the id attribute of the forma-button here is used by YUI, so when the refactor ends
it will likely disappear.

Example
Lorem ipsum dolor sit amet
lorem ipsum
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Facilis ponatur infinito oderis obruamus. Effectices, terroribus cognosci elegans totam atilli arare p minuendas.
31 agosto 2016
30 novembre 2017
 <div style="max-width: 404px;">
   <div class="course-box">
     <div class="course-box__item">
       <div class="course-box__title">Lorem ipsum dolor sit amet</div>
     </div>
     <div class="course-box__item course-box__item--no-padding">
       <div class="course-box__img">
         <img src="" alt="">
         <div class="course-box__img-title">lorem ipsum</div>
       </div>
     </div>
     <div class="course-box__item">
       <div class="course-box__desc">
         Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Facilis ponatur
         infinito oderis obruamus. Effectices, terroribus cognosci elegans totam
         atilli arare p minuendas.
       </div>
     </div>
     <div class="course-box__item">
       <div class="course-box__date-box calendar-icon--check">31 agosto 2016</div>
       <i class="fa fa-angle-right" aria-hidden="true"></i>
       <div class="course-box__date-box course-box__date-box--end calendar-icon--green-cross">30 novembre 2017</div>
     </div>
     <div class="course-box__item" id="">
       <a class="forma-button forma-button--orange-hover forma-button--full" href="">
         <span class="forma-button__label">
           Entra nel corso
         </span>
       </a>
     </div>
   </div>
 </div>

3.3 #permalink Course Slider Menu

Internal menu of courses

<div class="section-coourse__menu col-xs-12">
   <div class="row-fluid">
     <div class="section-coourse__dropdown col-sm-5 text-center">
       <div class="row">
         <div class="col-xs-12">
           <div class="forma-dropdown">
             <button type="button" class="forma-dropdown__selected forma-button dropdown-toggle has-icon icon--coourse-menu icon--coourse-menu-area-corso" data-toggle="dropdown">Area corso</button>
             <button type="button" class="forma-dropdown__toggle forma-button dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="glyphicon glyphicon-chevron-down"></span>
               <span class="sr-only">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu">
                 <li>
                   <a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-area-corso">
                     <span class="" aria-hidden="true"></span>
                     Area corso
                   </a>
                 </li>
                 <li>
                   <a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-statistiche">
                     <span class="" aria-hidden="true"></span>
                     Statistiche
                   </a>
                 </li>
                 <li>
                   <a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-area-social">
                     <span class="" aria-hidden="true"></span>
                     Area social
                   </a>
                 </li>
                 <li>
                   <a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-gestione">
                     <span class="" aria-hidden="true"></span>
                     Gestione
                   </a>
                 </li>
            </ul>
           </div>
         </div>
       </div>
     </div>
       <div class="col-sm-7 section-coourse__menu-horizontal">
         <ul class="slider-menu">
           <li class="slider-menu__item is-selected">
             <a href="">Materiali</a>
           </li>
           <li class="slider-menu__item">
             <a href="">Valutazioni</a>
           </li>
           <li class="slider-menu__item">
             <a href="">Scheda corso</a>
           </li>
         </ul>
       </div>
     </div>
     <div class="clearfix"></div>
   </div>
Example
 <div class="section-coourse-modal">
 <div class="modal-body">
   <div class="row">
       <div class="modal__item col-sm-12 col-md-4">
         <h3 class="title">
             Tempo parziale
         </h3>
         <p class="text">
           00m
         </p>
       </div>
       <div class="modal__item col-sm-12 col-md-4">
         <h3 class="title">
             Tempo totale
         </h3>
         <p class="text">
             19h 49m
         </p>
       </div>
     <div class="modal__item col-sm-12 col-md-4">
       <h3 class="title">
           Utenti on line
       </h3>
       <p class="text">
           1
       </p>
     </div>
     <div class="modal__item col-sm-12 col-md-4">
       <h3 class="title">
           Materiali
       </h3>
       <p class="text">
           3
       </p>
     </div>
     <div class="modal__item col-sm-12 col-md-4">
       <h3 class="title">
           Completato
       </h3>
       <p class="text">
           1
       </p>
     </div>
     <div class="modal__item col-sm-12 col-md-4">
       <h3 class="title">
           progress failed
       </h3>
       <p class="text">
           2
       </p>
     </div>
     <div class="modal__item col-sm-12 col-md-6">
       <h3 class="title">
           passed
       </h3>
       <p class="text">
           1
       </p>
     </div>
     <div class="modal__item col-sm-12 col-md-6">
       <h3 class="title">
           failed
       </h3>
       <p class="text">
           0
       </p>
     </div>
   </div>
 </div>
 </div>