daily pastebin goal
9%
SHARE
TWEET

Untitled

a guest Mar 20th, 2019 50 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .flex, .cards, .card {
  2.   display: flex;
  3. }
  4.  
  5. .flex {
  6.   flex-wrap:wrap;
  7.   margin-bottom: 20px;
  8. }
  9.  
  10. .cards, .card {
  11.   align-items:center;
  12. }
  13.  
  14. .cards {
  15.   padding: 1em;
  16.   background-color: $color-lightest;
  17.   box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
  18. }
  19.  
  20. .card {
  21.   justify-content: space-around;
  22.   width:100%;
  23.  
  24.   .card-img {
  25.     margin: 10px;
  26.     width: 25%;
  27.     text-align:center;
  28.   }
  29.  
  30.   .card-content {
  31.     padding: 10px;
  32.     width: 65%;
  33.   }
  34.  
  35.   .card-status {
  36.     width:10%;
  37.   }
  38. }
  39.  
  40. .finished {
  41.   color: $success;
  42. }
  43.  
  44. .overdue {
  45.   color: $overdue;
  46. }
  47.  
  48. .pending {
  49.   color: $due-today;
  50. }
  51.  
  52. //************************************MEDIA QUERIES************************************//
  53.  
  54. @media screen and (max-width: 768px) {
  55.   .flex {
  56.     align-items:center;
  57.     flex-direction:column;
  58.   }
  59.  
  60.   .cards {
  61.     width: 75%;
  62.     margin:1%;
  63.   }
  64.  
  65.   .cards:first-of-type {
  66.     margin-top: 0;
  67.   }
  68.  
  69.   .cards:last-of-type {
  70.     margin-bottom: 0;
  71.   }
  72. }
  73.  
  74. @media screen and (min-width: 769px) {
  75.   .cards {
  76.     width: 49%;
  77.     margin: 1%;  
  78.   }
  79.  
  80.   .cards:nth-of-type(even) {
  81.     margin-right: 0;
  82.   }
  83.  
  84.   .cards:nth-of-type(odd) {
  85.     margin-left: 0;
  86.   }
  87. }
  88.  
  89. <div class="flex" ng-init="init(user.sys_id)">
  90.   <!--<div  class="cards" ng-repeat="task in data.tasks | orderBy: ['order']">-->
  91.   <div  class="cards" ng-repeat="task in data.tasks | orderBy: ['due_date']" ng-if="!task.finished">
  92.     <div  class="card" ng-click="c.onWidget(task);">
  93.       <!--<i ng-if="task.finished" class="{{task.icon}} fa-5x card-img finished" aria-hidden="true"></i>-->
  94.       <div class="card-img">
  95.         <i ng-if="!task.finished && task.isOverDue" class="{{task.icon}} fa-5x overdue" aria-hidden="true"></i>
  96.         <i ng-if="!task.finished && !task.isOverDue" class="{{task.icon}} fa-5x pending" aria-hidden="true"></i>
  97.       </div>
  98.       <div class="card-content">
  99.         <h4>
  100.           <!--<a href="?id=hri_task_details&table=sn_hr_core_task&sys_id={{task.sys_id}}" id="task_{{$index}}">{{::task.short_description}}</a>-->
  101.           <a ng-click="">{{::task.short_description}}</a>
  102.         </h4>
  103.         <p class="text-normal">${For:} {{::task.taskInfo.subject_person}}</p>
  104.         <span ng-if="!task.finished">
  105.           <span class="text-normal" ng-if="task.due_date">${Due by} {{::task.due_date | date: 'mediumDate' }}
  106.             <span class="text-warning" ng-if="task.isOverDue"> (${Overdue})</span>
  107.           </span>
  108.         </span>
  109.         <!--<span ng-if="task.finished" class="text-muted">${Completed at} {{::task.closed_at | date: 'mediumDate'}}</span>-->
  110.       </div>
  111.       <div class="card-status">
  112.         <i alt="${Open}" ng-if="!task.finished && task.isOverDue" class="m-l-sm far fa-square fa-2x overdue"></i>
  113.         <i alt="${Open}" ng-if="!task.finished && !task.isOverDue" class="m-l-sm far fa-square fa-2x pending"></i>
  114.         <!--<i alt="${Completed}" ng-if="task.finished" class="m-l-sm far fa-check-square fa-2x finished"></i>-->
  115.       </div>  
  116.     </div>
  117.   </div>
  118. </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top