Main Action Buttons

Main Button - Spacing

Main Action buttons appear in the action bar. These buttons are generally to start an action like exporting or importing a list, creating a new event or series.


Main Button - Navigation
    
      / [ Main Button ] /
      .action-nav-bar .btn-group .add {
      
        
          color
          :
          
             #FFFFFF
          
        ;
        
          background-color
          :
          
             #39c985
          
        ;
        
          background-image
          :
           linear-gradient(
            #39c985,
            #2d9b67)
          
          
        ;
          
            border
            :
             1px solid
              #193043
            
          
        ;
      }
    
  

Main Button - Modal
    
      /* [ Modal Button - Accept ] */
      .modal
       a {
      
        
          color
          :
          
             #FFFFFF
          
        ;
        
          background-color
          :
          
             #39c985
          
        ;
        
          background-image
          :
           linear-gradient(
            #39c985,
            #2d9b67)
          
        
        ;
        
          border
          :
           1px solid
            #20724b
          
        ;
      }
    
  


Cancel Button - Modal

/ [ Modal Button - Cancel / Return ] /
.modal a.cancel
 {
  color:
   #666666;
  background-color:
   #FFFFFF;
  background-image:
   linear-gradient(#FFFFFF,
  #f7f7f7);
  border:
   1px solid #c9d0d3;
}

Action buttons

Action buttons are used to allow the user to control steps in a process. Usually placed within a table view, actions include options to delete, process and view statistics. These action buttons will generally open a modal and should be placed in a specific hierarchical order for consistency.

  1. Detail Actions
  2. Sub Actions
  3. Delete Actions
More Information Edit Time Preview Plus Play Play Active Remove