60 lines
2.2 KiB
SCSS
60 lines
2.2 KiB
SCSS
// Dropimage plugin
|
|
// Allow to upload images in a sensible manner
|
|
|
|
|
|
// Variables
|
|
|
|
// The ratio for the images (responsive by default)
|
|
$picnic-dropimage-ratio: math.div(16, 9) !default;
|
|
|
|
// The percentage of height (respect of width)
|
|
$picnic-dropimage-height: percentage(math.div(1, $picnic-dropimage-ratio)) !default;
|
|
|
|
$picnic-dropimage-background-color: #ddd !default;
|
|
|
|
// This comes from camera.svg. Converted with:
|
|
// http://dopiaza.org/tools/datauri/index.php
|
|
$picnic-dropimage-background-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iNjQwIiB2ZXJzaW9uPSIxLjEiPjxnIHN0eWxlPSJmaWxsOiMzMzMiPjxwYXRoIGQ9Ik0gMTg3IDIzMCBDIDE3NSAyMzAgMTY1IDI0MCAxNjUgMjUyIEwgMTY1IDMwMCBMIDE2NSA0MDggQyAxNjUgNDIwIDE3NSA0MzAgMTg3IDQzMCBMIDQ2MyA0MzAgQyA0NzUgNDMwIDQ4NSA0MjAgNDg1IDQwOCBMIDQ4NSAzMDAgTCA0ODUgMjUyIEMgNDg1IDI0MCA0NzUgMjMwIDQ2MyAyMzAgTCAxODcgMjMwIHogTSAzNjAgMjU2IEEgNzAgNzIgMCAwIDEgNDMwIDMyOCBBIDcwIDcyIDAgMCAxIDM2MCA0MDAgQSA3MCA3MiAwIDAgMSAyOTAgMzI4IEEgNzAgNzIgMCAwIDEgMzYwIDI1NiB6Ii8+PGNpcmNsZSBjeD0iMzYwIiBjeT0iMzMwIiByPSI0MSIvPjxwYXRoIGQ9Im0yMDUgMjI1IDUtMTAgMjAgMCA1IDEwLTMwIDAiLz48cGF0aCBkPSJNMjg1IDIwMEwyNzAgMjI1IDM3NiAyMjUgMzYxIDIwMCAyODUgMjAwek0zMTAgMjA1TDMzNyAyMDUgMzM3IDIxOCAzMTAgMjE4IDMxMCAyMDV6Ii8+PHBhdGggZD0ibTQwNSAyMjUgNS0xMCAyMCAwIDUgMTAtMzAgMCIvPjwvZz48L3N2Zz4=' !default;
|
|
|
|
$picnic-dropimage-radius: $picnic-button-radius !default;
|
|
$picnic-dropimage-margin: $picnic-button-margin !default;
|
|
|
|
|
|
// Styles
|
|
// It is preferred to only use one top-level class or element
|
|
// It can be combined with other, specific classes with &.another
|
|
%dropimage {
|
|
|
|
@extend %button;
|
|
|
|
|
|
position: relative;
|
|
display: block;
|
|
padding: 0;
|
|
// Hack from http://stackoverflow.com/a/13976732/938236
|
|
padding-bottom: $picnic-dropimage-height;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border: 0;
|
|
margin: $picnic-dropimage-margin;
|
|
border-radius: $picnic-dropimage-radius;
|
|
|
|
background-color: $picnic-dropimage-background-color;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
background-image: url(#{$picnic-dropimage-background-image});
|
|
|
|
// Subelements
|
|
input {
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
}
|
|
}
|