Skip to content

Commit

Permalink
fix(css): prefix all classes to prevent external style cascading (#114)
Browse files Browse the repository at this point in the history 
* fix: Prefixed all css classes

* chore: CSS properties alphabetized and formatted

* fix: spinner and code format

* fix: preview image
  • Loading branch information
@hardikpthv @UncleDave
hardikpthv authored and UncleDave committed Jul 22, 2017
1 parent 87c7e20 commit 277bcf7
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 133 deletions.
237 changes: 118 additions & 119 deletions src/image-upload/image-upload.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,167 +1,166 @@
.image-upload {
--common-radius: 3px;
--active-color: #33CC99;
position: relative;
border-radius: var(--common-radius);
border: #d0d0d0 dashed 1px;
font-family: sans-serif;
.img-ul {
--active-color: #3C9;
--common-radius: 3px;
border-radius: var(--common-radius);
border: #d0d0d0 dashed 1px;
font-family: sans-serif;
position: relative;
}

.file-is-over {
border-color: var(--active-color);
border-style: solid;
.img-ul-file-is-over {
border: var(--active-color) solid;
}

.hr-inline-group:after {
display: table;
clear: both;
content: "";
.img-ul-hr-inline-group:after {
clear: both;
content: "";
display: table;
}

.file-upload {
padding: 16px;
background-color: #f8f8f8;
.img-ul-file-upload {
background-color: #f8f8f8;
padding: 16px;
}

.drag-box-message {
float: left;
display: inline-block;
margin-left: 12px;
padding-top: 14px;
color: #9b9b9b;
font-weight: 600;
.img-ul-drag-box-msg {
color: #9b9b9b;
display: inline-block;
font-weight: 600;
margin-left: 12px;
padding-top: 14px;
}

label.button input[type=file] {
display: none;
position: fixed;
top: -99999px;
label.img-ul-button input[type=file] {
display: none;
position: fixed;
top: -99999px;
}

.clear {
background-color: #FF0000;
.img-ul-clear {
background-color: #FF0000;
}

.button {
cursor: pointer;
padding: 10px;
color: white;
font-size: 1.25em;
font-weight: 500;
text-transform: uppercase;
display: inline-block;
float: left;
-webkit-box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);
-moz-box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);
box-shadow: 2px 2px 4px 0px rgba(148, 148, 148, 0.6);
.img-ul-upload {
background-color: var(--active-color);
}

.button:active span {
position: relative;
display: block;
top: 1px;
.img-ul-button {
-moz-box-shadow: 2px 2px 4px 0 rgba(148, 148, 148, 0.6);
-webkit-box-shadow: 2px 2px 4px 0 rgba(148, 148, 148, 0.6);
box-shadow: 2px 2px 4px 0 rgba(148, 148, 148, 0.6);
color: #FFF;
cursor: pointer;
display: inline-block;
float: left;
font-size: 1.25em;
font-weight: 500;
padding: 10px;
text-transform: uppercase;
}

.upload {
background-color: var(--active-color);
.img-ul-button:active span {
display: block;
position: relative;
top: 1px;
}

.image-container {
background-color: #fdfdfd;
padding: 0 10px 0 10px;
.img-ul-container {
background-color: #fdfdfd;
padding: 0 10px;
}

.image {
float: left;
display: inline-block;
margin: 6px;
width: 86px;
height: 86px;
background: center center no-repeat;
background-size: contain;
position: relative;
.img-ul-image {
background: center center no-repeat;
background-size: contain;
display: inline-block;
float: left;
height: 86px;
margin: 6px;
position: relative;
width: 86px;
}

.x-mark {
width: 20px;
height: 20px;
text-align: center;
cursor: pointer;
border-radius: 2px;
float: right;
background-color: black;
opacity: .7;
color: white;
margin: 2px;
.img-ul-x-mark {
background-color: #000;
border-radius: 2px;
color: #FFF;
cursor: pointer;
float: right;
height: 20px;
margin: 2px;
opacity: .7;
text-align: center;
width: 20px;
}

.close {
width: 20px;
height: 20px;
opacity: .7;
position: relative;
padding-right: 3px;
.img-ul-close {
height: 20px;
opacity: .7;
padding-right: 3px;
position: relative;
width: 20px;
}

.x-mark:hover .close {
opacity: 1;
.img-ul-x-mark:hover .img-ul-close {
opacity: 1;
}

.close:before, .close:after {
border-radius: 2px;
position: absolute;
content: '';
height: 16px;
width: 2px;
top: 2px;
background-color: #FFFFFF;
.img-ul-close:before, .img-ul-close:after {
background-color: #FFF;
border-radius: 2px;
content: '';
height: 16px;
position: absolute;
top: 2px;
width: 2px;
}

.close:before {
transform: rotate(45deg);
.img-ul-close:before {
transform: rotate(45deg);
}

.close:after {
transform: rotate(-45deg);
.img-ul-close:after {
transform: rotate(-45deg);
}

.loading-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: black;
opacity: .7;
.img-ul-loading-overlay {
background-color: #000;
bottom: 0;
left: 0;
opacity: .7;
position: absolute;
right: 0;
top: 0;
}

.spinningCircle {
height: 30px;
width: 30px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0);
border-top: 3px solid white;
border-right: 3px solid white;
-webkit-animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);
animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);
.img-ul-spinning-circle {
height: 30px;
width: 30px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0);
border-top: 3px solid #FFF;
border-right: 3px solid #FFF;
-webkit-animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);
animation: spinner 2s infinite cubic-bezier(0.085, 0.625, 0.855, 0.360);
}

.file-too-large {
color: red;
padding: 0 15px;
.img-ul-file-too-large {
color: red;
padding: 0 15px;
}

@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
Expand All @@ -173,9 +172,9 @@ label.button input[type=file] {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);

}
}
}
28 changes: 14 additions & 14 deletions src/image-upload/image-upload.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
<div class="image-upload"
<div class="img-ul"
fileDrop
[accept]="supportedExtensions"
(fileOver)="onFileOver($event)"
(fileDrop)="onFileChange($event)"
[ngClass]="{'file-is-over': fileOver}"
[ngClass]="{'img-ul-file-is-over': fileOver}"
>
<div class="file-upload hr-inline-group">
<label class="upload button">
<div class="img-ul-file-upload img-ul-hr-inline-group">
<label class="img-ul-upload img-ul-button">
<span [innerText]="buttonCaption"></span>
<input
type="file"
[accept]="supportedExtensions"
multiple (change)="onFileChange(input.files)"
#input>
</label>
<label *ngIf="fileCounter > 0" class="clear button" (click)="deleteAll()">
<label *ngIf="fileCounter > 0" class="img-ul-clear img-ul-button" (click)="deleteAll()">
<span [innerText]="clearButtonCaption"></span>
</label>
<div class="drag-box-message" [innerText]="dropBoxMessage"></div>
<div class="img-ul-drag-box-msg" [innerText]="dropBoxMessage"></div>
</div>

<p class="file-too-large" *ngIf="showFileTooLargeMessage" [innerText]="fileTooLargeMessage"></p>
<p class="img-ul-file-too-large" *ngIf="showFileTooLargeMessage" [innerText]="fileTooLargeMessage"></p>

<div *ngIf="preview" class="image-container hr-inline-group">
<div *ngIf="preview" class="img-ul-container img-ul-hr-inline-group">
<div
class="image"
class="img-ul-image"
*ngFor="let file of files"
[ngStyle]="{'background-image': 'url('+ file.src +')'}"
>
<div *ngIf="file.pending" class="loading-overlay">
<div class="spinningCircle"></div>
<div *ngIf="file.pending" class="img-ul-loading-overlay">
<div class="img-ul-spinning-circle"></div>
</div>
<div *ngIf="!file.pending" class="x-mark" (click)="deleteFile(file)">
<span class="close"></span>
<div *ngIf="!file.pending" class="img-ul-x-mark" (click)="deleteFile(file)">
<span class="img-ul-close"></span>
</div>
</div>
</div>
</div>
</div>

0 comments on commit 277bcf7

Please sign in to comment.