dslak
/
coze_demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

drag once check

develop
Carmine De Rosa 7 years ago
parent
9ee3fdcd80
commit
b7e2b6d718
17 changed files with 463 additions and 2776 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 283
      css/styles.css
  2. BIN
      images/avatar/luca.png
  3. BIN
      images/avatar/sara.png
  4. 2
      index.php
  5. 56
      js/scripts.js
  6. 69
      modules.php
  7. BIN
      scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/fonts.scssc
  8. BIN
      scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/global.scssc
  9. BIN
      scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/header.scssc
  10. BIN
      scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/variables.scssc
  11. BIN
      scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/modules.scssc
  12. 9
      scss/fonts.scss
  13. 9
      scss/global.scss
  14. 2
      scss/header.scss
  15. 2660
      scss/package-lock.json
  16. 147
      scss/sections/modules.scss
  17. 2
      scss/variables.scss

283
css/styles.css
View File

@ -19,6 +19,7 @@
/* 48px */
/* 53px */
/* ?px */
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900");
/* line 47, variables.scss */
.font-8 {
font-size: 0.5rem !important;
@ -14385,13 +14386,13 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
}
/* line 3, fonts.scss */
.font-regular {
font-weight: 400 !important;
.font-light {
font-weight: 300 !important;
}
/* line 6, fonts.scss */
.font-light {
font-weight: 200 !important;
.font-regular {
font-weight: 400 !important;
}
/* line 9, fonts.scss */
@ -14410,110 +14411,116 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
}
/* line 18, fonts.scss */
.font-extrabold {
font-weight: 800 !important;
}
/* line 21, fonts.scss */
.font-normal {
font-style: normal !important;
}
/* line 21, fonts.scss */
/* line 24, fonts.scss */
.font-italic {
font-style: italic !important;
}
/* line 26, fonts.scss */
/* line 29, fonts.scss */
.text-right {
text-align: right;
}
/* line 29, fonts.scss */
/* line 32, fonts.scss */
.text-center {
text-align: center;
}
/* line 32, fonts.scss */
/* line 35, fonts.scss */
.text-left {
text-align: left;
}
/* line 36, fonts.scss */
/* line 39, fonts.scss */
.text-white {
color: white;
}
/* line 39, fonts.scss */
/* line 42, fonts.scss */
.text-black {
color: black;
}
/* line 42, fonts.scss */
/* line 45, fonts.scss */
.text-red {
color: #bf0f3d;
}
/* line 45, fonts.scss */
/* line 48, fonts.scss */
.text-grey {
color: #ddd;
color: #ccc;
}
/* line 48, fonts.scss */
/* line 51, fonts.scss */
.text-light-grey {
color: #f2f2f2;
}
/* line 53, fonts.scss */
/* line 56, fonts.scss */
.text-upper {
text-transform: uppercase;
}
/* line 1, global.scss */
/* line 3, global.scss */
body {
font-family: 'Montserrat';
letter-spacing: 1px;
/* letter-spacing: 1px; */
font-weight: 600;
}
/* line 6, global.scss */
/* line 9, global.scss */
p,
label {
margin: 0;
}
/* line 11, global.scss */
/* line 14, global.scss */
a {
color: white;
text-decoration: none;
transition: .4s;
outline: none;
}
/* line 16, global.scss */
/* line 19, global.scss */
a:active, a:visited, a:hover, a:focus {
outline: none;
color: white;
text-decoration: none;
}
/* line 24, global.scss */
/* line 27, global.scss */
a:hover {
color: #ddd;
color: #ccc;
}
/* line 30, global.scss */
/* line 33, global.scss */
.container {
width: 100%;
/* max-width: 1366px; */
padding: 0 20px;
}
/* line 36, global.scss */
/* line 39, global.scss */
.border {
border: 1px solid red;
}
/* line 41, global.scss */
/* line 44, global.scss */
.middle {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* line 47, global.scss */
/* line 50, global.scss */
.middle-right {
position: absolute;
right: 0;
@ -14521,7 +14528,7 @@ a:hover {
transform: translateY(-50%);
}
/* line 54, global.scss */
/* line 57, global.scss */
.full-middle {
position: absolute;
left: 50%;
@ -14529,12 +14536,12 @@ a:hover {
transform: translate(-50%, -50%);
}
/* line 63, global.scss */
/* line 66, global.scss */
.bg-alpha {
background: rgba(255, 255, 255, 0.5);
}
/* line 67, global.scss */
/* line 70, global.scss */
.pattern {
background: white;
background-image: url(../images/pattern.jpg);
@ -14542,24 +14549,24 @@ a:hover {
background-position: center bottom;
}
/* line 74, global.scss */
/* line 77, global.scss */
.radius {
border-radius: 3px;
}
/* line 78, global.scss */
/* line 81, global.scss */
.radius-bottom {
border-radius: 0 0 3px 3px;
}
/* line 83, global.scss */
/* line 86, global.scss */
#MainContent {
top: 0;
top: 50px;
z-index: 0;
overflow-x: hidden;
overflow: hidden;
}
/* line 89, global.scss */
/* line 92, global.scss */
#map {
width: 100%;
border-radius: 3px;
@ -14589,8 +14596,8 @@ input::-moz-focus-inner, button::-moz-focus-inner {
/* line 14, forms.scss */
input[type=text],
input[type=password] {
border: 1px solid #ddd;
color: #ddd;
border: 1px solid #ccc;
color: #ccc;
padding: 5px 20px;
width: 100%;
text-align: left;
@ -14615,7 +14622,7 @@ input[type=button]:hover,
input[type=submit]:hover,
button:hover {
color: white;
background-color: #ddd;
background-color: #ccc;
}
/* line 46, forms.scss */
@ -14651,26 +14658,28 @@ header {
background: #2f2f2f;
height: 50px;
width: 100%;
position: fixed;
z-index: 100;
}
/* line 9, header.scss */
/* line 11, header.scss */
header .container .row {
height: 50px;
}
/* line 12, header.scss */
/* line 14, header.scss */
header .container .row .logo {
height: 25px;
}
/* line 16, header.scss */
/* line 18, header.scss */
header .container .row .menu {
text-align: right;
}
/* line 18, header.scss */
/* line 20, header.scss */
header .container .row .menu ul {
list-style: none;
margin: 0;
right: 10px;
}
/* line 22, header.scss */
/* line 24, header.scss */
header .container .row .menu ul li {
display: inline-block;
color: white;
@ -14683,27 +14692,27 @@ header .container .row .menu ul li {
cursor: pointer;
transition: .4s;
}
/* line 35, header.scss */
/* line 37, header.scss */
header .container .row .menu ul li a .fa {
font-size: 0.875rem;
}
/* line 40, header.scss */
/* line 42, header.scss */
header .container .row .menu ul li.active, header .container .row .menu ul li:hover {
border-bottom: 4px solid #bf0f3d;
}
/* line 44, header.scss */
/* line 46, header.scss */
header .container .row .menu ul li.active a:hover, header .container .row .menu ul li:hover a:hover {
color: white;
}
/* line 2, sections/modules.scss */
.modules {
height: calc(100vh - 50px);
min-height: calc(100vh - 50px);
width: 100%;
}
/* line 6, sections/modules.scss */
.modules .sidebar {
height: calc(100vh - 50px);
min-height: calc(100vh - 50px);
padding: 50px;
}
/* line 10, sections/modules.scss */
@ -14712,7 +14721,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
height: 40px;
line-height: 40px;
margin: 20px 0 10px 0;
background: #ddd;
background: #ccc;
border-radius: 5px;
color: white;
text-align: center;
@ -14735,7 +14744,19 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
background: #f2f2f2;
padding: 50px;
}
/* line 40, sections/modules.scss */
/* line 39, sections/modules.scss */
.modules .content .drop-action {
transition: .4s;
}
/* line 41, sections/modules.scss */
.modules .content .drop-action.drop-inactive {
opacity: .3;
}
/* line 45, sections/modules.scss */
.modules .content .drop-action.droppable.drop-active {
border: 2px solid #bf0f3d;
}
/* line 51, sections/modules.scss */
.modules .content .dropdown {
height: 40px;
line-height: 36px;
@ -14746,21 +14767,13 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
position: relative;
transition: .4s;
}
/* line 51, sections/modules.scss */
.modules .content .dropdown.droppable.drop-active {
border: 2px solid #bf0f3d;
}
/* line 55, sections/modules.scss */
.modules .content .dropdown.drop-inactive {
opacity: .4;
}
/* line 59, sections/modules.scss */
/* line 61, sections/modules.scss */
.modules .content .dropdown .label {
font-size: 0.75rem;
font-weight: bold;
color: black;
}
/* line 65, sections/modules.scss */
/* line 67, sections/modules.scss */
.modules .content .dropdown .data {
position: absolute;
font-size: 0.625rem;
@ -14769,7 +14782,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
right: 10px;
top: 0;
}
/* line 74, sections/modules.scss */
/* line 76, sections/modules.scss */
.modules .content .dropdown:after {
content: '\f107';
font-family: "FontAwesome";
@ -14779,46 +14792,166 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
top: 0;
right: -25px;
}
/* line 84, sections/modules.scss */
/* line 86, sections/modules.scss */
.modules .content .dropdown.active {
border: 2px solid #ddd;
border: 2px solid #ccc;
}
/* line 86, sections/modules.scss */
/* line 88, sections/modules.scss */
.modules .content .dropdown.active:after {
color: #ddd;
color: #ccc;
}
/* line 95, sections/modules.scss */
/* line 97, sections/modules.scss */
.modules .content .dropdown-links .link {
width: 100%;
height: 20px;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
/* line 100, sections/modules.scss */
/* line 102, sections/modules.scss */
.modules .content .dropdown-links .link:first-child {
border-left: 1px solid #ddd;
border-left: 1px solid #ccc;
}
/* line 104, sections/modules.scss */
/* line 106, sections/modules.scss */
.modules .content .dropdown-links .link.source {
border: 0;
position: relative;
}
/* line 107, sections/modules.scss */
/* line 109, sections/modules.scss */
.modules .content .dropdown-links .link.source:before {
content: '';
position: absolute;
right: 50%;
height: 100%;
border-left: 1px solid #ddd;
border-left: 1px solid #ccc;
}
/* line 118, sections/modules.scss */
/* line 120, sections/modules.scss */
.modules .content .div-drop {
width: 100px;
padding: 10px;
margin: 20px 0 10px 0;
background: #ddd;
background: #ccc;
color: white;
text-align: center;
font-size: 0.75rem;
border-radius: 5px;
}
/* line 133, sections/modules.scss */
.modules .content .user-sheet {
position: relative;
background: white;
border: 2px solid #f2f2f2;
border-radius: 6px;
padding: 90px 15px 15px 15px;
}
/* line 140, sections/modules.scss */
.modules .content .user-sheet .fa {
position: absolute;
left: 15px;
top: 15px;
}
/* line 145, sections/modules.scss */
.modules .content .user-sheet .name {
position: absolute;
left: 35px;
top: 15px;
font-size: 0.75rem;
font-weight: 700;
}
/* line 152, sections/modules.scss */
.modules .content .user-sheet .rule {
position: absolute;
left: 35px;
top: 35px;
font-size: 0.625rem;
}
/* line 158, sections/modules.scss */
.modules .content .user-sheet .avatar {
position: absolute;
right: 15px;
top: 15px;
height: 60px;
width: 60px;
}
/* line 164, sections/modules.scss */
.modules .content .user-sheet .avatar img {
height: 60px;
width: 60px;
}
/* line 170, sections/modules.scss */
.modules .content .user-sheet .modules-title {
font-size: 0.5rem;
text-transform: uppercase;
}
/* line 176, sections/modules.scss */
.modules .content .user-sheet .modules-container .div-drag {
width: 100%;
height: 40px;
line-height: 36px;
margin: 10px 0;
background: #bf0f3d;
color: white;
text-align: center;
font-size: 0.75rem;
border-radius: 5px;
}
/* line 189, sections/modules.scss */
.modules .content .user-sheet .modules-empty {
width: 100%;
height: 40px;
line-height: 36px;
margin: 15px 0;
background: white;
color: #ccc;
text-align: center;
font-size: 0.75rem;
border: 2px dotted #ccc;
border-radius: 5px;
}
/* line 208, sections/modules.scss */
#dropConfirm {
display: none;
position: fixed;
left: 0;
top: 50px;
height: calc(100vh - 50px);
width: 100%;
background: rgba(0, 0, 0, 0.6);
overflow: hidden;
}
/* line 218, sections/modules.scss */
#dropConfirm .alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
text-align: center;
border-radius: 4px;
padding: 30px 80px;
}
/* line 229, sections/modules.scss */
#dropConfirm .alert .title {
margin: 10px 0 20px 0;
font-size: 0.75rem;
font-weight: 700;
}
/* line 236, sections/modules.scss */
#dropConfirm .alert .button {
padding: 5px 20px;
margin: 10px;
border-radius: 4px;
cursor: pointer;
text-align: center;
font-size: 0.625rem;
text-transform: uppercase;
color: white;
}
/* line 246, sections/modules.scss */
#dropConfirm .alert .button.confirm {
background: #bf0f3d;
}
/* line 249, sections/modules.scss */
#dropConfirm .alert .button.discard {
background: black;
}

BIN
images/avatar/luca.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
images/avatar/sara.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

2
index.php
View File

@ -28,7 +28,6 @@
<base href="<?php echo $BASE_URL;?>/">
<link href="<?php echo $BASE_URL;?>/css/styles.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body itemscope itemtype="http://schema.org/WebPage" class="<?php if($isHome){echo "is-home";}?>">
@ -46,6 +45,7 @@
</div>
</section>
<script type="text/javascript" src="<?php echo $BASE_URL;?>/node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/scripts.js"></script>

56
js/scripts.js
View File

@ -1,27 +1,53 @@
function allowDrop(ev) {
ev.preventDefault();
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
$('.dropdown').addClass('drop-inactive');
$('.droppable').removeClass('drop-inactive').addClass('drop-active');
ev.dataTransfer.setData("ID", ev.target.id)
$('.drop-action').addClass('drop-inactive')
$('.droppable').removeClass('drop-inactive').addClass('drop-active')
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var module = $('#'+data);
var parent = module.parent();
// parent.append($(module.get(0)));
// ev.target.appendChild(module.get(0));
console.log(module.text());
ev.preventDefault();
const target = $(ev.currentTarget).find('.modules-container')
const overlay = $('#dropConfirm')
const discard = overlay.find('.discard')
const confirm = overlay.find('.confirm')
const data = ev.dataTransfer.getData("ID")
let once = true
console.log('TARGET1:',target)
overlay.fadeIn()
discard.on('click',()=>{
if(once){
overlay.fadeOut()
once = false
}
})
confirm.on('click', ()=>{
if(once){
const module = $('#'+data)
target.append('<div class="div-drag">'+module.text()+'</div>')
overlay.fadeOut()
once = false
}
})
}
function dragLeave(ev) {
$('.dropdown').removeClass('drop-inactive');
$('.droppable').removeClass('drop-active');
$('.drop-action').removeClass('drop-inactive')
$('.droppable').removeClass('drop-active')
}

69
modules.php
View File

@ -27,7 +27,7 @@
<div class="row my-2">
<div class="col-3 p-0 mx-auto">
<div class="dropdown active">
<div class="dropdown drop-action active">
<div class="label">Italia</div>
<div class="data"><i class="fa fa-flag"></i> 20 <i class="fa fa-user"></i> 100</div>
</div>
@ -44,19 +44,19 @@
<div class="row my-2">
<div class="col-3 p-0 mx-auto">
<div class="dropdown">
<div class="dropdown drop-action">
<div class="label">Bari</div>
<div class="data"><i class="fa fa-flag"></i> 8 <i class="fa fa-user"></i> 40</div>
</div>
</div>
<div class="col-3 p-0 mx-auto">
<div class="dropdown active">
<div class="dropdown drop-action active">
<div class="label">Milano</div>
<div class="data"><i class="fa fa-flag"></i> 2 <i class="fa fa-user"></i> 20</div>
</div>
</div>
<div class="col-3 p-0 mx-auto">
<div class="dropdown">
<div class="dropdown drop-action">
<div class="label">Roma</div>
<div class="data"><i class="fa fa-flag"></i> 8 <i class="fa fa-user"></i> 40</div>
</div>
@ -72,13 +72,13 @@
<div class="row my-2">
<div class="col-3 p-0 mx-auto">
<div class="dropdown droppable active" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="dropdown drop-action active">
<div class="label"><i class="fa fa-flag"></i> Duomo</div>
<div class="data"><i class="fa fa-user"></i> 2</div>
</div>
</div>
<div class="col-3 p-0 mx-auto">
<div class="dropdown droppable" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="dropdown drop-action">
<div class="label"><i class="fa fa-flag"></i> Sempione</div>
<div class="data"><i class="fa fa-user"></i> 2</div>
</div>
@ -91,9 +91,64 @@
<div class="row my-2">
<div class="col-6 p-0">
<div class="row dropdown-links">
<div class="col-4 p-0 mx-auto link source"></div>
</div>
<div class="row dropdown-links">
<div class="col-6 p-0 mx-auto link"></div>
</div>
<div class="row">
<div class="col-6 p-2 mx-auto">
<div class="user-sheet drop-action droppable" ondrop="drop(event)" ondragover="allowDrop(event)">
<i class="fa fa-user"></i>
<div class="name">Luca</div>
<div class="rule">Stagista</div>
<div class="avatar"><img src="<?= $BASE_PATH;?>/images/avatar/luca.png"></div>
<p class="modules-title">Azioni in corso</p>
<div class="modules-container"></div>
<div class="modules-empty">+ Aggiungi corso</div>
</div>
</div>
<div class="col-6 p-2 mx-auto">
<div class="user-sheet drop-action droppable" ondrop="drop(event)" ondragover="allowDrop(event)">
<i class="fa fa-user"></i>
<div class="name">Sara</div>
<div class="rule">Venditore</div>
<div class="avatar"><img src="<?= $BASE_PATH;?>/images/avatar/sara.png"></div>
<p class="modules-title">Azioni in corso</p>
<div class="modules-container"></div>
<div class="modules-empty">+ Aggiungi corso</div>
</div>
</div>
</div>
</div>
</div>
<div class="div-drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
</div>
<div id="dropConfirm">
<div class="alert">
<div class="title">Attivare il corso sull'utente selezionato</div>
<button class="button confirm">Conferma</button>
<button class="button discard">Annulla</button>
</div>
</div>

BIN
scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/fonts.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/global.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/header.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/variables.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/modules.scssc
View File

Binary file not shown.

9
scss/fonts.scss
View File

@ -1,11 +1,11 @@
.font-light{
font-weight: 300 !important;
}
.font-regular{
font-weight: 400 !important;
}
.font-light{
font-weight: 200 !important;
}
.font-medium{
font-weight: 500 !important;
}
@ -15,6 +15,9 @@
.font-bold{
font-weight: 700 !important;
}
.font-extrabold{
font-weight: 800 !important;
}
.font-normal {
font-style: normal !important;
}

9
scss/global.scss
View File

@ -1,6 +1,9 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900');
body{
font-family: 'Montserrat';
letter-spacing: 1px;
/* letter-spacing: 1px; */
font-weight: 600;
}
p,
@ -81,9 +84,9 @@ a{
#MainContent{
top: 0;
top: 50px;
z-index: 0;
overflow-x: hidden;
overflow: hidden;
}
#map{

2
scss/header.scss
View File

@ -3,6 +3,8 @@ header{
background: $dark-grey;
height: 50px;
width: 100%;
position: fixed;
z-index: 100;
.container{

2660
scss/package-lock.json
View File

File diff suppressed because it is too large

147
scss/sections/modules.scss
View File

@ -1,10 +1,10 @@
.modules{
height: calc(100vh - 50px);
min-height: calc(100vh - 50px);
width: 100%;
.sidebar{
height: calc(100vh - 50px);
min-height: calc(100vh - 50px);
padding: 50px;
.div-drag-container{
@ -36,6 +36,17 @@
padding: 50px;
.drop-action{
transition: .4s;
&.drop-inactive{
opacity: .3;
}
&.droppable{
&.drop-active{
border: 2px solid $red;
}
}
}
.dropdown{
height: 40px;
@ -47,15 +58,6 @@
position: relative;
transition: .4s;
&.droppable{
&.drop-active{
border: 2px solid $red;
}
}
&.drop-inactive{
opacity: .4;
}
.label{
font-size: $font-12;
font-weight: bold;
@ -125,5 +127,128 @@
font-size: $font-12;
border-radius: 5px;
}
.user-sheet{
position: relative;
background: white;
border: 2px solid $light-grey;
border-radius: 6px;
padding: 90px 15px 15px 15px;
.fa{
position: absolute;
left: 15px;
top: 15px;
}
.name{
position: absolute;
left: 35px;
top: 15px;
font-size: $font-12;
font-weight: 700;
}
.rule{
position: absolute;
left: 35px;
top: 35px;
font-size: $font-10;
}
.avatar{
position: absolute;
right: 15px;
top: 15px;
height: 60px;
width: 60px;
img{
height: 60px;
width: 60px;
}
}
.modules-title{
font-size: $font-8;
text-transform: uppercase;
}
.modules-container{
.div-drag{
width: 100%;
height: 40px;
line-height: 36px;
margin: 10px 0;
background: $red;
color: white;
text-align: center;
font-size: $font-12;
border-radius: 5px;
}
}
.modules-empty{
width: 100%;
height: 40px;
line-height: 36px;
margin: 15px 0;
background: white;
color: $grey;
text-align: center;
font-size: $font-12;
border: 2px dotted $grey;
border-radius: 5px;
}
}
}
}
#dropConfirm{
display: none;
position: fixed;
left: 0;
top: 50px;
height: calc(100vh - 50px);
width: 100%;
background: rgba(0,0,0,0.6);
overflow: hidden;
.alert{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
text-align: center;
border-radius: 4px;
padding: 30px 80px;
.title{
margin: 10px 0 20px 0;
font-size: $font-12;
font-weight: 700;
}
.button{
padding: 5px 20px;
margin: 10px;
border-radius: 4px;
cursor: pointer;
text-align: center;
font-size: $font-10;
text-transform: uppercase;
color: white;
&.confirm{
background: $red;
}
&.discard{
background: black;
}
}
}
}

2
scss/variables.scss
View File

@ -52,6 +52,6 @@ $alpha: rgba(255,255,255,0.6);
$green: #4e984a;
$light-green: #71986e;
$red: #bf0f3d;
$grey: #ddd;
$grey: #ccc;
$light-grey: #f2f2f2;
$dark-grey: #2f2f2f;

Write Preview
Loading…
Cancel
Save