change thema
This commit is contained in:
Mats van Reenen
parent
c5288b19a5
commit
d09f0b3f0a
@ -1,11 +0,0 @@
|
|||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#a8e063">
|
|
||||||
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
|
|
||||||
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
|
|
||||||
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
|
||||||
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
|
|
||||||
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
|
|
||||||
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
|
|
||||||
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
|
||||||
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1010 B |
@ -1,11 +0,0 @@
|
|||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#ffcc33">
|
|
||||||
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
|
|
||||||
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
|
|
||||||
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
|
||||||
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
|
|
||||||
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
|
|
||||||
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
|
|
||||||
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
|
||||||
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1010 B |
@ -1,11 +0,0 @@
|
|||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#3CD3AD">
|
|
||||||
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
|
|
||||||
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
|
|
||||||
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
|
||||||
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
|
|
||||||
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
|
|
||||||
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
|
|
||||||
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
|
||||||
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1010 B |
@ -1,11 +0,0 @@
|
|||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#ef473a">
|
|
||||||
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
|
|
||||||
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
|
|
||||||
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
|
||||||
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
|
|
||||||
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
|
|
||||||
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
|
|
||||||
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
|
||||||
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1010 B |
@ -1,11 +0,0 @@
|
|||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#3a7bd5">
|
|
||||||
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
|
|
||||||
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
|
|
||||||
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
|
||||||
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
|
|
||||||
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
|
|
||||||
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
|
|
||||||
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
|
||||||
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1010 B |
16
index.html
16
index.html
@ -103,13 +103,27 @@
|
|||||||
<script id="task-card-template" type="text/x-handlebars-template">
|
<script id="task-card-template" type="text/x-handlebars-template">
|
||||||
{{#each this}}
|
{{#each this}}
|
||||||
<div class="card" data-task-id="{{id}}">
|
<div class="card" data-task-id="{{id}}">
|
||||||
<a href="#" class="expand-card"></a>
|
<a href="#" class="expand-card">
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" >
|
||||||
|
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
|
||||||
|
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
|
||||||
|
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
||||||
|
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
|
||||||
|
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
|
||||||
|
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
|
||||||
|
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
|
||||||
|
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
<h5>{{title}}</h5>
|
<h5>{{title}}</h5>
|
||||||
<div class="card-details">
|
<div class="card-details">
|
||||||
|
<h6>Description</h6>
|
||||||
<p data-field="description">{{description}}</p>
|
<p data-field="description">{{description}}</p>
|
||||||
|
<h6>URL</h6>
|
||||||
<p data-field="remote_url">
|
<p data-field="remote_url">
|
||||||
{{#checkIfEmptyRemoteURL remote_url}}{{/checkIfEmptyRemoteURL}}
|
{{#checkIfEmptyRemoteURL remote_url}}{{/checkIfEmptyRemoteURL}}
|
||||||
</p>
|
</p>
|
||||||
|
<h6>Assigned to</h6>
|
||||||
<p data-field="assigned_to">
|
<p data-field="assigned_to">
|
||||||
{{#checkIfEmptyAssigned assigned_to}}{{/checkIfEmptyAssigned}}
|
{{#checkIfEmptyAssigned assigned_to}}{{/checkIfEmptyAssigned}}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
@import 'https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400';
|
@import 'https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap';
|
||||||
|
|
||||||
//Colors
|
//Colors
|
||||||
|
|
||||||
@ -17,9 +17,6 @@ $base-color: rgba(0,0,0,.4);
|
|||||||
$primary-color: #fff;
|
$primary-color: #fff;
|
||||||
$secondary-color: rgba(255,255,255,.1);
|
$secondary-color: rgba(255,255,255,.1);
|
||||||
|
|
||||||
$grad-start: #000428;
|
|
||||||
$grad-end: #004e92;
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -32,11 +29,16 @@ html, body, .wrapper {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-weight: 300;
|
font-family: 'Roboto', sans-serif;
|
||||||
font-family: Hind Vadodara;
|
background: #000;
|
||||||
background-image: linear-gradient(to left, $grad-start, $grad-end);
|
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
color: #CCC;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6{
|
||||||
|
font-family: 'Ubuntu', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@ -61,8 +63,6 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background-color: $base-color;
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
float: left;
|
float: left;
|
||||||
@ -70,6 +70,7 @@ header {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
border-right: 1px solid #333;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: "";
|
content: "";
|
||||||
@ -81,32 +82,38 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
&:after {
|
border-bottom: 1px solid #ef473a;
|
||||||
background: linear-gradient(to left, #cb2d3e , #ef473a);
|
& .card{
|
||||||
|
border-left: 1px solid #ef473a;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
&:after {
|
border-bottom: 1px solid #ffcc33;
|
||||||
background: linear-gradient(to left, #ffb347 , #ffcc33);
|
& .card{
|
||||||
|
border-left: 1px solid #ffcc33;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
&:after {
|
border-bottom: 1px solid #a8e063;
|
||||||
background: linear-gradient(to left, #56ab2f , #a8e063);
|
& .card{
|
||||||
|
border-left: 1px solid #a8e063;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(4) {
|
&:nth-child(4) {
|
||||||
&:after {
|
border-bottom: 1px solid #3a7bd5;
|
||||||
background: linear-gradient(to left, #00d2ff , #3a7bd5);
|
& .card{
|
||||||
|
border-left: 1px solid #3a7bd5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(5) {
|
&:nth-child(5) {
|
||||||
&:after {
|
border: none;
|
||||||
background: linear-gradient(to left, #4CB8C4 , #3CD3AD);
|
border-bottom: 1px solid #3CD3AD;
|
||||||
|
& .card{
|
||||||
|
border-left: 1px solid #3CD3AD;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -124,152 +131,105 @@ header {
|
|||||||
> div {
|
> div {
|
||||||
float: left;
|
float: left;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-right: 1px solid $base-color;
|
border-right: 2px solid #333;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
overflow: scroll;
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
transition: .1s ease-in-out background-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//Cards
|
//Cards
|
||||||
.card {
|
.card {
|
||||||
background-color: $base-color;
|
background-color: rgba(255, 255, 255, .125);
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 40px;
|
height: 50px;
|
||||||
box-shadow: 3px 3px 3px rgba(0,0,0,.1);
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p:before,
|
|
||||||
h5:after {
|
|
||||||
.rejected & {
|
|
||||||
color: #ef473a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pending & {
|
|
||||||
color: #ffcc33;
|
|
||||||
}
|
|
||||||
|
|
||||||
.development & {
|
|
||||||
color: #a8e063;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testing & {
|
|
||||||
color: #3a7bd5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.production & {
|
|
||||||
color: #3CD3AD;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
line-height: 50px;
|
padding: 16px 0 16px 10px;
|
||||||
padding-left: 10px;
|
|
||||||
font-weight: 300;
|
|
||||||
cursor: move;
|
cursor: move;
|
||||||
|
color: #CCC;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.edit-mode {
|
&.edit-mode {
|
||||||
h5 {
|
h5 {
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
top: 50%;
|
content: "*";
|
||||||
margin-left: 5px;
|
|
||||||
margin-top: 1px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
position: absolute;
|
|
||||||
font-size: 9px;
|
|
||||||
content: "(Edit Mode Enabled)";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rejected & {
|
|
||||||
&:before {
|
|
||||||
background: linear-gradient(to left, #cb2d3e , #ef473a);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pending & {
|
|
||||||
&:before {
|
|
||||||
background: linear-gradient(to left, #ffb347 , #ffcc33);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.development & {
|
|
||||||
&:before {
|
|
||||||
background: linear-gradient(to left, #56ab2f , #a8e063);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.testing & {
|
|
||||||
&:before {
|
|
||||||
background: linear-gradient(to left, #00d2ff , #3a7bd5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.production & {
|
|
||||||
&:before {
|
|
||||||
background: linear-gradient(to left, #4CB8C4 , #3CD3AD);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.expanded {
|
&.expanded {
|
||||||
overflow: auto !important;
|
overflow: auto !important;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.expand-card {
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
position: absolute;
|
||||||
|
top: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5:after {
|
||||||
|
.rejected & { color: #ef473a; }
|
||||||
|
.pending & { color: #ffcc33; }
|
||||||
|
.development & { color: #a8e063; }
|
||||||
|
.testing & { color: #3a7bd5; }
|
||||||
|
.production & { color: #3CD3AD; }
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
.rejected & { fill: #ef473a; }
|
||||||
|
.pending & { fill: #ffcc33; }
|
||||||
|
.development & { fill: #a8e063; }
|
||||||
|
.testing & { fill: #3a7bd5; }
|
||||||
|
.production & { fill: #3CD3AD; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.rejected & {
|
||||||
|
color: #ef473a;
|
||||||
|
border-left: 2px solid #ef473a;
|
||||||
|
}
|
||||||
|
.pending & {
|
||||||
|
color: #ffcc33;
|
||||||
|
border-left: 2px solid #ffcc33;
|
||||||
|
}
|
||||||
|
.development & {
|
||||||
|
color: #a8e063;
|
||||||
|
border-left: 2px solid #a8e063;
|
||||||
|
}
|
||||||
|
.testing & {
|
||||||
|
color: #3a7bd5;
|
||||||
|
border-left: 2px solid #3a7bd5;
|
||||||
|
}
|
||||||
|
.production & {
|
||||||
|
color: #3CD3AD;
|
||||||
|
border-left: 2px solid #3CD3AD;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-details {
|
.card-details {
|
||||||
padding: 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
word-wrap: break-word;
|
|
||||||
padding-top: 0;
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 10px;
|
color: #CCC;
|
||||||
position: relative;
|
padding: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&:before {
|
h6{
|
||||||
position: absolute;
|
padding: 5px;
|
||||||
left: 0;
|
padding-left: 10px;
|
||||||
}
|
font-size: 13px;
|
||||||
|
|
||||||
&:nth-child(1) {
|
|
||||||
padding-left: 67px;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: "Description : ";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(2) {
|
|
||||||
padding-left: 72px;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: "Remote URL : ";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(3) {
|
|
||||||
padding-left: 70px;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: "Assigned To : ";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@ -282,23 +242,16 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dragged-over {
|
.dragged-over {
|
||||||
background-color: rgba(0,0,0,.1);
|
background-color: rgba(128,128,128,.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rotate180 {
|
|
||||||
to {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-image: linear-gradient(to left, $grad-start, $grad-end);
|
background: #000;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -312,7 +265,7 @@ header {
|
|||||||
transform: translateX(-50%) translateY(-50%);
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
|
||||||
.close-modal {
|
.close-modal {
|
||||||
border: 1px solid rgba(255,255,255,.1);
|
border: 1px solid rgba(255,255,255,.4);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
@ -356,7 +309,7 @@ header {
|
|||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
padding: 15px 10px;
|
padding: 15px 10px;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
border: 1px solid rgba(255,255,255,.07);
|
border: 1px solid rgba(255,255,255,.25);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
transition: border-color .25s linear;
|
transition: border-color .25s linear;
|
||||||
|
|
||||||
@ -380,65 +333,28 @@ header {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.expand-card {
|
|
||||||
height: 19px;
|
|
||||||
width: 19px;
|
|
||||||
background-size: auto 100%;
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
cursor: pointer;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
right: 15px;
|
|
||||||
padding: 3px;
|
|
||||||
|
|
||||||
.rejected & {
|
|
||||||
background-image: url('../images/rejected-expand.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.pending & {
|
|
||||||
background-image: url('../images/pending-expand.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.development & {
|
|
||||||
background-image: url('../images/development-expand.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.testing & {
|
|
||||||
background-image: url('../images/testing-expand.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.production & {
|
|
||||||
background-image: url('../images/production-expand.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.removed-task-notification {
|
.removed-task-notification {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10%;
|
top: 90%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
padding: 5px 20px;
|
padding: 5px 20px;
|
||||||
color: #515151;
|
color: #FFF;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background-color: rgba(255,255,255,.8);
|
background-color: rgba(50,50,50,.8);
|
||||||
box-sizing: 0 0 3px rgba(0,0,0,.6);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-top: 1px solid $base-color;
|
border-top: 1px solid #333;
|
||||||
|
background-color: #151515;
|
||||||
}
|
}
|
||||||
|
|
||||||
.remove {
|
.remove {
|
||||||
display: block;
|
display: block;
|
||||||
background-color: #ef473a;
|
background-color: #ef473a;
|
||||||
border-radius: 50%;
|
border-radius: 15px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -468,11 +384,17 @@ footer {
|
|||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
img {
|
img {
|
||||||
animation: rotate180 .2s linear;
|
animation: rotate90 .14s linear;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes rotate90 {
|
||||||
|
to {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-tooltip] {
|
[data-tooltip] {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@ -511,7 +433,8 @@ footer {
|
|||||||
.create-task-branding {
|
.create-task-branding {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding: 10px;
|
padding: 14px;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
sup {
|
sup {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -521,7 +444,7 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: rgba(255,255,255,.6);
|
color: rgb(153,153,153);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -542,26 +465,26 @@ footer {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.onboard {
|
// .onboard {
|
||||||
position: fixed;
|
// position: fixed;
|
||||||
top: 0;
|
// top: 0;
|
||||||
left: 0;
|
// left: 0;
|
||||||
right: 0;
|
// right: 0;
|
||||||
bottom: 0;
|
// bottom: 0;
|
||||||
background-color: rgba(0, 0, 0, .7);
|
// background-color: rgba(0, 0, 0, .7);
|
||||||
z-index: 2;
|
// z-index: 2;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.onboard-modal {
|
// .onboard-modal {
|
||||||
height: 300px;
|
// height: 300px;
|
||||||
width: 450px;
|
// width: 450px;
|
||||||
background-color: #fff;
|
// background-color: #fff;
|
||||||
border-radius: 3px;
|
// border-radius: 3px;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
left: 50%;
|
// left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
// transform: translate(-50%, -50%);
|
||||||
}
|
// }
|
||||||
|
|
||||||
.tips {
|
.tips {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Reference in New Issue
Block a user