daily pastebin goal
40%
SHARE
TWEET

Untitled

a guest Dec 16th, 2018 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $primary: #07889B;
  2. $secondary: #66B9BF;
  3. $dragging: #EEAA7B;
  4. $text: white;
  5. $dt-background: #E0E1D7;
  6.  
  7. #pagewrapper {
  8.     height: 100%;
  9.  
  10.     .todos-section-wrapper {
  11.         display: flex;
  12.         flex-direction: column;
  13.         height: 100%;
  14.         width: 100%;
  15.  
  16.         .card {
  17.             display: flex;
  18.             flex-direction: column;
  19.             flex: 1 1 50%;
  20.             padding: 0;
  21.  
  22.             .card-header {
  23.                 background-color: $primary;
  24.                 color: $text;
  25.                 display: flex;
  26.                 flex-direction: row;
  27.                 justify-content: center;
  28.                 padding: .5em;
  29.  
  30.                 .card-title {
  31.                     font-size: 2em;
  32.                     margin: 0;
  33.                 }
  34.             }
  35.  
  36.             .card-content {
  37.                 height: 100%;
  38.                 padding: .25em;
  39.  
  40.                 .list {
  41.                     display: flex;
  42.                     flex-direction: column;
  43.                     height: 100% !important;
  44.  
  45.                     .todo-item {
  46.                         background-color: $secondary;
  47.                         border-bottom: 1px solid $text;
  48.                         color: $text;
  49.                         font-size: 1.5em;
  50.                         padding: .5em;
  51.                     }
  52.                 }
  53.             }
  54.         }  
  55.     }
  56. }
  57.  
  58. .cdk-drag-preview {
  59.     background-color: $dragging;
  60.     color: $text;
  61.     box-sizing: border-box;
  62.     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
  63.                 0 8px 10px 1px rgba(0, 0, 0, 0.14),
  64.                 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  65.     font-size: 1.5em;
  66.     padding: .5em;
  67. }
  68.  
  69. .cdk-drag-placeholder {
  70.     opacity: 0;
  71. }
  72.  
  73. .cdk-drag-animating {
  74.     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  75. }
  76.  
  77. .cdk-drop-list-dragging .todo-item:not(.cdk-drag-placeholder) {
  78.     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  79. }
  80.  
  81. /********* MEDIA QUERIES ***********/
  82.  
  83. @media screen and (min-width: 768px) {
  84.     #pagewrapper {
  85.         .todos-section-wrapper {
  86.             flex-direction: row;
  87.             .card {
  88.                 flex: 1 1 50%;
  89.             }
  90.         }
  91.     }
  92. }
  93.  
  94. @media screen and (min-width: 1200px) {
  95.     #pagewrapper {
  96.         background-color: $dt-background;
  97.         display: flex;
  98.         flex-direction: row;
  99.         justify-content: center;
  100.         padding: 5em;  
  101.  
  102.         .todos-section-wrapper {
  103.             width: 75%;
  104.             height: 75%;
  105.         }
  106.     }
  107. }
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