alvarocastro/ember-draggable-modifiers

View on GitHub
docs/assets/test-app-03dc02bfae7a9aa7a0ef7e7997478b25.css

Summary

Maintainability
Test Coverage
.drop-target-item{background:gray}.is-dragging{opacity:.5}[data-drop-tree-intruction]::before{content:"";position:absolute;inset:0}.board-column{width:260px}.desktop{position:relative;background:teal;height:400px;overflow:hidden}.desktop-icon{position:absolute;width:96px}.desktop-icon img{pointer-events:none;margin:0 auto 4px;width:48px;height:48px;display:block}.desktop-icon span{display:block;font-size:14px;text-align:center}.bsod{position:absolute;width:100%;height:100%;background:#00f;font-family:monospace}.bsod .message{max-width:400px}.bsod .title{text-align:center}.bsod .title span{background:gray;color:#00f;padding:0 8px}.fancy-background-1{--c:var(--bs-tertiary-bg);--v:3;--s:200px;--c1:var(--c);--c2:hsl(from var(--c) h s calc(l + var(--v)));--g:#0000 8%,var(--c1) 0 17%,#0000 0 58%;background:linear-gradient(135deg,#0000 20.5%,var(--c1) 0 29.5%,#0000 0) 0 calc(var(--s)/ 4),linear-gradient(45deg,var(--g)) calc(var(--s)/ 2) 0,linear-gradient(135deg,var(--g),var(--c1) 0 67%,#0000 0),linear-gradient(45deg,var(--g),var(--c1) 0 67%,#0000 0 83%,var(--c1) 0 92%,#0000 0),var(--c2);background-size:var(--s) var(--s)}.fancy-background-2{--c:var(--bs-tertiary-bg);--v:3;--s:60px;--c1:hsl(from var(--c) h s calc(l + var(--v)));--c2:hsl(from var(--c) h s calc(l - var(--v)));--c3:var(--c);background:var(--s) var(--s)/calc(var(--s) * 2) calc(var(--s) * 2) linear-gradient(135deg,var(--c1) 10%,var(--c2) 0 25%,transparent 0 75%,var(--c2) 0 90%,var(--c1) 90%),0 0/calc(var(--s) * 2) calc(var(--s) * 2) linear-gradient(135deg,var(--c1) 10%,var(--c3) 0 25%,transparent 0 75%,var(--c3) 0 90%,var(--c1) 90%),0 0/calc(var(--s) * 2) calc(var(--s) * 2) linear-gradient(45deg,var(--c1) 10%,var(--c2) 0 25%,var(--c3) 0 40%,var(--c1) 0 60%,var(--c3) 0 75%,var(--c2) 0 90%,var(--c1) 90%)}.fancy-background-3{--c:var(--bs-tertiary-bg);--v:3;--s:50px;--c1:hsl(from var(--c) h s calc(l + var(--v)));--c2:var(--c);background:radial-gradient(circle at 100% 50%,transparent 20%,var(--c1) 21%,var(--c1) 34%,transparent 35%,transparent),radial-gradient(circle at 0 50%,transparent 20%,var(--c1) 21%,var(--c1) 34%,transparent 35%,transparent) 0 calc(var(--s) * -1);background-color:var(--c2);background-size:calc(var(--s) * 1.5) calc(var(--s) * 2)}.fancy-background-4{--c:var(--bs-tertiary-bg);--v:3;--s:150px;--c1:var(--c);--c2:hsl(from var(--c) h s calc(l + var(--v)));--c3:hsl(from var(--c) h s calc(l + var(--v) * 2));--c4:hsl(from var(--c) h s calc(l + var(--v) * 3));--gp:50%/var(--s) var(--s);background:repeating-conic-gradient(from 90deg at 75% 75%,var(--c4) 0 25%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 180deg at 50% 75%,var(--c1) 0 12.5%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 135deg at 62.5% 62.5%,var(--c4) 0 25%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 134.5deg at 25% 75%,var(--c1) 0 12.65%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 135deg at 12.5% 62.5%,var(--c4) 0 25%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 225deg at 12.5% 62.5%,var(--c3) 0 25%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 225deg at 25% 50%,var(--c2) 0 12.5%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 90deg at 75% 75%,var(--c1) 0 25%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 135deg at 50% 50%,var(--c1) 0 37.5%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 225deg at 75% 50%,var(--c2) 0 12.5%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 45deg at 62.5% 62.5%,var(--c3) 0 25%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 90deg at 75% 25%,var(--c3) 0 25%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 45deg at 62.5% 12.5%,var(--c3) 0 25%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from -45deg at 62.5% 12.5%,var(--c4) 0 25%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 45deg at 50% 25%,var(--c2) 0 12.5%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from -45deg at 12.5% 12.5%,var(--c4) 0 25%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from 0deg at 0 25%,var(--c3) 0 12.5%,#fff0 0 100%) var(--gp),repeating-conic-gradient(from -90deg at 25% 25%,var(--c2) 0 12.5%,#fff0 0 100%) var(--gp),repeating-linear-gradient(180deg,var(--c1) 0 25%,var(--c2) 0 50%,var(--c1) 0 100%) var(--gp);background-color:var(--c1)}.fancy-background-5{--c:var(--bs-tertiary-bg);--v:3;--s:100px;--t:4px;--o:10px;--c1:hsl(from var(--c) h s calc(l + var(--v)));--c2:var(--c);background-color:var(--c2);background-size:calc(var(--s) * 2 + var(--t) * 2) calc(var(--s) * 2 + var(--t) * 2);background-image:radial-gradient(transparent var(--s),var(--c1) var(--s),var(--c1) calc(var(--s) + var(--t)),transparent calc(var(--s) + var(--t))),radial-gradient(transparent var(--s),var(--c1) var(--s),var(--c1) calc(var(--s) + var(--t)),transparent calc(var(--s) + var(--t)));background-position:var(--o) var(--o),calc(var(--s) + var(--t) + var(--o)) calc(var(--s) + var(--t) + var(--o))}.fancy-background-6{--c:var(--bs-tertiary-bg);--v:3;--s:200px;--c1:hsl(from var(--c) h s calc(l + var(--v)));--c2:var(--c);background:linear-gradient(135deg,#0000 18.75%,var(--c2) 0 31.25%,#0000 0),repeating-linear-gradient(45deg,var(--c2) -6.25% 6.25%,var(--c1) 0 18.75%);background-size:var(--s) var(--s)}.fancy-background-7{--c:var(--bs-tertiary-bg);--v:3;--s:50px;--c1:hsl(from var(--c) h s calc(l + var(--v)));--c2:var(--c);background:linear-gradient(135deg,var(--c1) 25%,transparent 25%) calc(var(--s) * -1.5) 0,linear-gradient(225deg,var(--c1) 25%,transparent 25%) calc(var(--s) * -1.5) 0,linear-gradient(315deg,var(--c1) 25%,transparent 25%),linear-gradient(45deg,var(--c1) 25%,transparent 25%);background-size:var(--s) var(--s);background-color:var(--c2)}.fancy-background-8{--c:var(--bs-tertiary-bg);--v:3;--s:90px;--c1:hsl(from var(--c) h s calc(l + var(--v)));--c2:hsl(from var(--c) h s calc(l - var(--v)));--c3:var(--c);--s1:calc(var(--s) * 0.5);--s2:calc(var(--s) * 0.6);background:radial-gradient(circle,var(--c1) calc(var(--s1)/ 2),#0000 calc(var(--s1)/ 2),#0000 var(--s1),var(--c2) var(--s1),var(--c2) var(--s2),#0000 var(--s2)) 0 0,radial-gradient(circle,var(--c2) calc(var(--s1)/ 2),#0000 calc(var(--s1)/ 2),#0000 var(--s1),var(--c1) var(--s1),var(--c1) var(--s2),#0000 var(--s2)) var(--s) var(--s),radial-gradient(circle,var(--c1) calc(var(--s1)/ 4),#0000 calc(var(--s1)/ 4)) var(--s) 0,radial-gradient(circle,var(--c2) calc(var(--s1)/ 5),#0000 calc(var(--s1)/ 5)) 0 var(--s);background-size:calc(var(--s) * 2) calc(var(--s) * 2);background-color:var(--c3);background-repeat:repeat}.fancy-background-9{--c:var(--bs-tertiary-bg);--v:3;--s:110px;--c1:hsl(from var(--c) h s calc(l + var(--v)));--c2:var(--c);background:linear-gradient(-45deg,#0000 50%,var(--c1) 50%,var(--c1) 60%,#0000 60%);background-size:var(--s) var(--s);background-color:var(--c2)}.fancy-background-10{--c:var(--bs-tertiary-bg);--v:3;--s:100px;--c1:hsl(from var(--c) h s calc(l + var(--v) * 6));--c2:hsl(from var(--c) h s calc(l + var(--v) * 2));--c3:var(--c);--s1:var(--s);--s2:calc(var(--s) / 5);background-color:var(--c3);background-image:linear-gradient(var(--c1) 2px,transparent 2px),linear-gradient(90deg,var(--c1) 2px,transparent 2px),linear-gradient(var(--c2) 1px,transparent 1px),linear-gradient(90deg,var(--c2) 1px,transparent 1px);background-size:var(--s1) var(--s1),var(--s1) var(--s1),var(--s2) var(--s2),var(--s2) var(--s2);background-position:-10px -2px,-2px -2px,-1px -1px,-1px -1px}