SCSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
$font: 'Galada', cursive;
$bgBody: #151d4a;
$bgThumbnail: rgba(0, 0, 0, .3);
$colorHandler: rgba(0, 0, 0, .8);
$colorHandlerActive: #E91E63;
$colorLoad: #fff;
$radius: 3px; //border radius
$frameWidth: 800px;
$frameHeight: 450px;
$thumbnailsHeight: 100px;
$infoHeight: 30px;
$newUrlHeight: 30px;
* {
outline: none;
}
body, html {
width: 100%;
height: 100%;
}
body {
background-color: $bgBody;
background: linear-gradient(-45deg, darken($bgBody, 10%), $bgBody, darken($bgBody, 10%));
padding: 0;
margin: 0;
font-family: $font;
}
.centered {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.grab {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.grabbing {
cursor: move;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.hue-rotate {
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.brightness {
-webkit-filter: brightness(200%);
filter: brightness(200%);
}
.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.saturate {
-webkit-filter: saturate(500%);
filter: saturate(500%);
}
.contrast {
-webkit-filter: contrast(200%);
filter: contrast(200%);
}
.sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.content {
@extend .centered;
width: $frameWidth;
height: $frameHeight + $thumbnailsHeight + $infoHeight + $newUrlHeight;
.new-url {
height: $newUrlHeight;
overflow: hidden;
input[type="text"] {
width: $frameWidth;
background-color: $bgThumbnail;
border: 0;
padding: 7px;
margin: 0 5px;
border-radius: $radius;
color: rgba($colorHandlerActive, 0.5);
font-family: $font;
&:focus {
color: $colorHandlerActive;
}
}
}
.thumbnails {
height: $thumbnailsHeight;
width: $frameWidth;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
.thumb {
width: calc(100% / 7);
height: $thumbnailsHeight - 20;
padding: 0;
border: none;
padding: 5px;
background-color: $bgThumbnail;
margin: 10px 4px;
cursor: pointer;
position: relative;
border-radius: $radius;
&:hover {
background-color: rgba(255, 255, 255, .1);
}
&.selected {
background-color: $colorHandlerActive;
&:after{
border-top: 3px solid $colorHandlerActive;
}
}
&:after{
@extend .centered;
content: "";
bottom: -3px;
top: initial;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid transparent;
width: 0;
height: 0;
}
img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: $radius;
}
}
}
.box {
width: $frameWidth;
height: $frameHeight;
border-radius: $radius;
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
position: relative;
background-color: $bgThumbnail;
.old, .new {
position: absolute;
left: 0;
top: 0;
height: $frameHeight;
img {
border-radius: $radius;
height: $frameHeight;
width: $frameWidth;
object-fit: cover;
}
}
.new {
width: $frameWidth / 2;
.img {
width: 100%;
overflow: hidden;
}
}
.description {
position: absolute;
left: 20px;
top: 20px;
color: #fff;
z-index: 2;
margin: 0;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4), 1px 1px 20px rgba(0, 0, 0, 1);
font-weight: normal;
line-height: 28px;
}
}
.info {
width: $frameWidth;
height: $infoHeight;
text-align: center;
font-weight: normal;
color: rgba(255, 255, 255, .6);
a {
color: rgba(255, 255, 255, .2);
text-decoration: none;
}
}
}
.ui-resizable {
.ui-resizable-e {
background-color: $colorHandler;
right: -2px;
width: 4px;
margin: 0;
height: $frameHeight;
cursor: default;
&:after {
@extend .centered;
@extend .grab;
content: "";
left: -4px;
width: 12px;
height: 40px;
background-color: $colorHandlerActive;
border-radius: $radius * 5;
}
}
&.ui-resizable-resizing {
.ui-resizable-e {
&:after {
@extend .grabbing;
}
@extend .grabbing;
}
}
}
.load-circle {
border-width: 2px;
border-color: rgba($colorLoad, 0.2);
border-top-color: rgba($colorLoad, 1);
border-style: solid;
border-radius: 50%;
animation: circRotate .6s infinite linear;
width: 16px;
height: 16px;
position: absolute;
right: 20px;
top: 20px;
}
@keyframes circRotate {
to { transform: rotate(360deg); }
}
JAVASCRIPT
var app = angular.module('app', []);
app.controller('ctrlThumb', function($scope) {
$scope.urlImage = "http://onehdwallpaper.com/wp-content/uploads/2015/07/River-HD-Wallpapers-7-800x450.jpg";
$scope.classApply = "grayscale";
});
$(function() {
$("#resizable").resizable({
handles: "e",
maxWidth: 798,
minWidth: 2
});
});
1 Response