Skip to content
Snippets Groups Projects
Commit 473e04a9 authored by Jonny Ngo Luong's avatar Jonny Ngo Luong
Browse files

Merge branch '28-add-sass-styling-to-components' into 'master' 

"Add Sass styling to components"

Closes #29 and #28

See merge request !26
parents ac5a4d67 51c63d82
No related branches found
No related tags found
1 merge request!26"Add Sass styling to components"
Hide whitespace changes
Inline Side-by-side
Showing
with 504 additions and 136 deletions
client/src/app/app-routing.module.ts
+ 3
− 0
View file @ 473e04a9
......@@ -7,10 +7,13 @@ import { UserRegistrationFormComponent } from './users/user-registration-form/us
import { UserLoginFormComponent } from './users/user-login-form/user-login-form.component';
import { UserProfileComponent } from './users/user-profile/user-profile.component';
import { UserGuestProfileComponent } from './users/user-guest-profile/user-guest-profile.component';
import { HomeComponent } from './home/home.component';
import { UserProfileEditFormComponent } from './users/user-profile-edit-form/user-profile-edit-form.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'annonse/ny', component: PostFormComponent },
{ path: 'annonse/rediger/:id', component: PostFormComponent },
{ path: 'annonse', component: PostListComponent },
......
client/src/app/app.component.html
+ 24
− 37
View file @ 473e04a9
<div class="navbar">
<span class="logo" (click)="navigate('/')">SellPoint</span>
<nav>
<span (click)="navigate('/annonse')">Annonser</span>
<span (click)="navigate('/annonse/ny')">Lag annonse</span>
<span *ngIf="!user.getUserId" (click)="navigate('/register')">Registrer</span>
<span *ngIf="!user.getUserId" (click)="navigate('/login')">Logg inn</span>
<span *ngIf="user.getUserId" (click)="navigate('/profil')">Profil</span>
<span *ngIf="user.getUserId" (click)="logout()">Logg ut</span>
</nav>
</div>
<div class="splash">
<div class="title">
<h1>SELLPOINT</h1>
<div class="body">
<div class="navbar">
<span class="logo" (click)="navigate('/')">SellPoint</span>
<nav>
<span (click)="navigate('/annonse')">Annonser</span>
<span (click)="navigate('/annonse/ny')">Lag annonse</span>
<span *ngIf="!user.getUserId" (click)="navigate('/register')">Registrer</span>
<span *ngIf="!user.getUserId" (click)="navigate('/login')">Logg inn</span>
<span *ngIf="user.getUserId" (click)="navigate('/profil')">Profil</span>
<span *ngIf="user.getUserId" (click)="logout()">Logg ut</span>
</nav>
</div>
<div class="wave">
<div class="waveImg"></div>
<div class="categoryWrapper">
<p>Søk etter kategorier...</p>
<p>Kategorier...</p>
<div class="whiteBox"></div>
</div>
<div class="cta">
<h2>Lorem Ipsum</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
<div class="buttons">
<button (click)="navigate('/register')" class="btn">Registrer deg!</button>
<button (click)="navigate('/')" class="btn pink">Les mer</button>
</div>
<div class="splash">
<div class="title"><h1>SELLPOINT</h1></div>
<div class="wave">
<div class="waveImg"></div>
</div>
</div>
</div>
<div class="wrapper">
<router-outlet></router-outlet>
<div class="wrapper">
<router-outlet></router-outlet>
</div>
</div>
<div class="footer">
<div class="logo">
<h1>SELLPOINT LOGO</h1>
</div>
<div class="info">
<div class="bedrift">
<h3>Lorem ipsum</h3>
<h3>For bedrifter</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
......@@ -50,7 +37,7 @@
</ul>
</div>
<div class="omoss">
<h3>Lorem ipsum</h3>
<h3>Om SellPoint</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
......@@ -58,7 +45,7 @@
</ul>
</div>
<div class="personvern">
<h3>Lorem ipsum</h3>
<h3>Personvern</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
......@@ -66,4 +53,4 @@
</ul>
</div>
</div>
</div>
\ No newline at end of file
</div>
client/src/app/app.component.scss
+ 20
− 48
View file @ 473e04a9
div.body{
min-height: calc(100vh - 200px);
}
div.navbar {
background-color: #fff;
display: flex;
......@@ -18,14 +22,18 @@ div.navbar {
nav {
span{
padding: 10px;
margin: 10px;
cursor: pointer;
margin: 20px;
font-size: 25px;
background-color: #fff;
}
span:hover{
background-color: #eee;
}
}
}
div.splash {
position: relative;
position: absolute;
width: 100%;
height: 55vh;
background-color: springgreen;
......@@ -55,49 +63,6 @@ div.splash {
letter-spacing: 10px;
}
}
div.categoryWrapper {
padding: 10px;
margin-left: 5%;
background: linear-gradient(90deg, #14A35A 0%, #24e072 100%);
width: 40%;
height: 300px;
p {
margin-bottom: 10px;
}
div.whiteBox {
width: 100%;
height: 56%;
background-color: #ffffff;
}
}
div.cta {
color: #030303;
text-align: right;
margin-right: 5%;
margin-top: 60px;
width: 400px;
z-index: 2;
div.buttons {
display: flex;
text-align: center;
justify-content: flex-end;
}
button.btn {
background: #13D05E;
width: 200px;
margin: 10px 0 10px 10px;
padding: 20px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
border: none;
cursor: pointer;
}
button.pink {
background: #FFA1A1;
}
}
img {
position: absolute;
height: 100%;
......@@ -108,8 +73,10 @@ div.splash {
position: absolute;
left: 0;
bottom: 0;
height: 50%;
position: absolute;
top: 250px;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
......@@ -127,9 +94,11 @@ div.splash {
}
}
div.wrapper {
position: relative;
top: 125px;
padding: 5%;
min-height: calc(45vh - 200px);
width: 100%;
height: 100%;
}
div.footer {
color: #ffffff;
......@@ -137,7 +106,10 @@ div.footer {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Josefin Sans', sans-serif;
clear: both;
height: 200px;
width: 100%;
div.info {
display: flex;
flex-direction: row;
......
client/src/app/app.module.ts
+ 3
− 1
View file @ 473e04a9
......@@ -9,6 +9,7 @@ import { PostModule } from './posts/post.module';
import { UserModule } from './users/user.module';
import { AuthModule } from './authentication/auth.module';
import { SharedModule } from './shared/shared.module';
import { HomeComponent } from './home/home.component';
export function tokenGetter() {
return localStorage.getItem("token");
......@@ -16,7 +17,8 @@ export function tokenGetter() {
@NgModule({
declarations: [
AppComponent
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
......
client/src/app/home/home.component.html 0 → 100644
+ 14
− 0
View file @ 473e04a9
<div class="home">
<div class="categoryWrapper">
<p>Kategorier</p>
<div class="whiteBox"></div>
</div>
<div class="cta">
<h2>Lorem Ipsum</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="buttons">
<button (click)="navigate('/register')" class="btn">Registrer deg!</button>
<button (click)="navigate('/')" class="btn pink">Les mer</button>
</div>
</div>
</div>
\ No newline at end of file
client/src/app/home/home.component.scss 0 → 100644
+ 67
− 0
View file @ 473e04a9
div.home {
position: relative;
width: 100%;
height: 600px;
background-size: cover;
display: flex;
justify-content: space-between;
overflow: hidden;
color: #ffffff;
font-family: 'Inter', sans-serif;
button {
color: #ffffff;
text-decoration: none;
}
div {
position: relative;
}
div.categoryWrapper {
padding: 10px;
margin-left: 5%;
background: linear-gradient(90deg, #14A35A 0%, #24e072 100%);
width: 40%;
height: 300px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
p {
padding-left: 10px;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: white solid 1px;
width: 105px;
}
div.whiteBox {
width: 100%;
height: 250px;
background-color: #ffffff;
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5);
}
}
div.cta {
color: #030303;
text-align: right;
margin-right: 5%;
margin-top: 60px;
width: 400px;
z-index: 2;
div.buttons {
display: flex;
text-align: center;
justify-content: flex-end;
}
button.btn {
background: #13D05E;
width: 200px;
margin: 10px 0 10px 10px;
padding: 20px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
border: none;
cursor: pointer;
}
button.pink {
background: #FFA1A1;
}
}
}
\ No newline at end of file
client/src/app/home/home.component.ts 0 → 100644
+ 20
− 0
View file @ 473e04a9
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(private router: Router){}
ngOnInit(): void {
}
navigate(url) {
this.router.navigateByUrl(url);
}
}
client/src/app/posts/post-details/post-details.component.html
+ 26
− 14
View file @ 473e04a9
<h2>{{post.getTitle}}</h2>
<div class="container">
<div class="greenBox">
<h2>{{post.getTitle}}</h2>
<div class="whiteBox">
<div class="pinkBox">
<img [src]="post.getImageUrl">
</div>
<img [src]="post.getImageUrl">
<h4>{{post.getPrice}} kr</h4>
<p>{{post.getDescription}}</p>
<br>
<p>Publisert: {{post.getTimestamp}}</p>
<p>Eier: {{post.getOwner}}</p>
<div class="ownerInfo">
<p>Owner: {{owner.getUsername}}</p>
<p>E-mail: {{owner.getEmail}}</p>
</div>
<p>a: {{isAdmin}}</p>
<p>b: {{userId}}</p>
<hr>
<p>Pris:</p>
<h3>{{post.getPrice}} kr</h3>
<div *ngIf="userId == post.getOwner">
<app-button text="Rediger annonse" (click)="editPost()"></app-button>
</div>
<div *ngIf="userId == post.getOwner || isAdmin == 1">
<app-button text="Slett annonse" (click)="deletePost()"></app-button>
<p id="description">{{post.getDescription}}</p>
<br>
<p id="timestamp">Publisert: {{post.getTimestamp}}</p>
<div *ngIf="userId == post.getOwner" class="buttonContainer">
<app-button class="ownerButton" text="Rediger annonse" (click)="editPost()"></app-button>
<app-button class="ownerButton" text="Slett annonse" (click)="deletePost()"></app-button>
</div>
</div>
</div>
</div>
client/src/app/posts/post-details/post-details.component.scss
+ 70
− 0
View file @ 473e04a9
div.container{
margin-top: 250px;
margin-bottom: 50px;
font-family: 'Josefin Sans', sans-serif;
div.greenBox{
background: linear-gradient(#24e072 0%, #14A35A 100%);
padding: 20px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
width: 66%;
margin: auto;
h2{
color: white;
margin-bottom: 18px;
}
div.whiteBox{
background-color: white;
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5);
padding: 20px;
div.pinkBox{
background-color: #FFA1A1;
padding: 15px;
width: 66%;
margin: auto;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
img{
width: 100%;
}
}
div.ownerInfo{
width: 300px;
margin: auto;
margin-top: 20px;
}
div.buttonContainer{
margin-top: 30px;
display: grid;
gap: 15px;
}
hr{
margin: 20px;
}
p{
font-size: 16pt;
}
h3{
font-size: 30pt;
margin-left: 30px;
}
p#description{
margin-top: 30px;
}
p#timestamp{
margin-top: 30px;
font-size: 14pt;
}
}
}
}
\ No newline at end of file
client/src/app/posts/post-details/post-details.component.ts
+ 13
− 2
View file @ 473e04a9
......@@ -4,6 +4,7 @@ import { PostService } from '../post.service';
import { ActivatedRoute, Router } from '@angular/router'
import { AuthService } from 'src/app/authentication/auth.service';
import { User } from 'src/app/models/user.model';
import { UserService } from 'src/app/users/user.service';
@Component({
selector: 'app-post-details',
......@@ -13,15 +14,18 @@ import { User } from 'src/app/models/user.model';
export class PostDetailsComponent implements OnInit {
post: Post = new Post();
owner: User = new User();
user: User = new User();
isAdmin: number = 0;
userId: number = 0;
constructor(private postService: PostService, private activatedRoute: ActivatedRoute, private router: Router, private authService: AuthService) { }
constructor(private postService: PostService, private activatedRoute: ActivatedRoute, private router: Router,
private authService: AuthService, private userService: UserService) { }
ngOnInit(): void {
ngOnInit() {
// Gets current user information
this.user = this.authService.getCurrentUser(false);
// If user is logged in, assign userId and isAdmin
this.userId = this.user.getUserId; // 0
this.isAdmin = this.user.getIsAdmin; // 0
......@@ -32,6 +36,13 @@ export class PostDetailsComponent implements OnInit {
// Gets Post with id from database
this.postService.getPost(id).then(post => {
this.post = post;
// Gets Post owner from database
this.userService.getUser(this.post.getOwner).then(user => {
this.owner = user;
}).catch(error => {
console.log(error);
});
}).catch(error => {
console.log(error);
});
......
client/src/app/posts/post-form/post-form.component.html
+ 22
− 14
View file @ 473e04a9
<div class="postform">
<h3>{{id ? 'Rediger annonse' : 'Lag annonse'}}</h3>
<div class="title">
<h2>{{id ? 'REDIGER ANNONSE' : 'OPPRETT NY ANNONSE'}}</h2>
</div>
<app-text-input [(inputModel)]="title" label="Tittel" (blur)="checkForm()"></app-text-input>
<div class="postform">
<div class="greenBox">
<app-input [(inputModel)]="title" type="text" label="Annonsens tittel" (blur)="checkForm()" [dark]="false"></app-input>
<app-text-input [(inputModel)]="description" label="Beskrivelse" (blur)="checkForm()"></app-text-input>
<div class="whiteBox">
<app-text-area-input [(inputModel)]="description" label="Beskrivelse" (blur)="checkForm()"></app-text-area-input>
<app-number-input [(inputModel)]="price" label="Pris" (blur)="checkForm()"></app-number-input>
<div class="horizontalGrid">
<app-input [(inputModel)]="price" type="number" label="Pris" (blur)="checkForm()"></app-input>
<app-select [(inputModel)]="categoryid" (change)="checkForm()" label="Kategori">
<option value="0" [selected]="categoryid == 0" hidden>Velg kategori</option>
<option *ngFor="let category of categories" [value]="category.getCategoryId" [selected]="categoryid == category.getCategoryId">{{category.getName}}</option>
</app-select>
<app-select [(inputModel)]="categoryid" (change)="checkForm()">
<option value="0" [selected]="categoryid == 0" hidden>Velg kategori . . .</option>
<option *ngFor="let category of categories" [value]="category.getCategoryId" [selected]="categoryid == category.getCategoryId">{{category.getName}}</option>
</app-select>
</div>
<app-text-input [(inputModel)]="imageUrl" label="Bilde URL" (blur)="showImage(imageUrl)"></app-text-input>
<img [src]="displayImageUrl" (error)="showImage('https://i.stack.imgur.com/y9DpT.jpg')">
<app-input [(inputModel)]="imageUrl" type="text" label="Bilde URL" (blur)="showImage(imageUrl)"></app-input>
<img [src]="displayImageUrl" (error)="showImage('https://i.stack.imgur.com/y9DpT.jpg')">
<p>{{statusMessage}}</p>
<p>{{statusMessage}}</p>
<app-button (click)="publishPost()" text="Publiser"></app-button>
<app-button *ngIf="id" (click)="deletePost()" text="Slett annonse"></app-button>
<app-button (click)="publishPost()" text="Publiser"></app-button>
<app-button *ngIf="id" (click)="deletePost()" text="Slett annonse"></app-button>
</div>
</div>
</div>
client/src/app/posts/post-form/post-form.component.scss
+ 48
− 2
View file @ 473e04a9
div.title {
position: absolute;
top: 50px;
left: 50%;
width: 500px;
text-align: center;
transform: translateX(-50%);
font-family: 'Inter', sans-serif;
font-size: 2em;
text-shadow: -2px 2px 3px #000000;
color: white;
h2 {
letter-spacing: 10px;
}
}
div.postform {
display: flex;
flex-direction: column;
margin-bottom: 100px;
margin-top: 250px;
font-family: 'Josefin Sans', sans-serif;
div.greenBox{
background: linear-gradient(#24e072 0%, #14A35A 100%);
width: 50%;
margin: auto;
padding: 20px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
div.whiteBox{
margin-top: 20px;
background-color: white;
padding: 10px;
padding-top: 20px;
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5);
display: grid;
grid-template-columns: 1fr;
gap: 30px;
div.horizontalGrid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
img{
width: 100%;
}
}
}
}
client/src/app/posts/post-list/post-list.component.html
+ 16
− 6
View file @ 473e04a9
<div>
<app-select [(inputModel)]="selectedCategory" (change)="filterCategory()">
<option value="0" selected>Ingen kategori</option>
<option *ngFor="let category of categories" [value]="category.getCategoryId">{{category.getName}}</option>
</app-select>
<div class="title">
<h2>ANNONSER</h2>
</div>
<div class="container">
<div class="filterContainer">
<div class="whiteBox">
<app-select id="categorySelect" [(inputModel)]="selectedCategory" (change)="filterCategory()">
<option value="0" selected>Velg kategori . . .</option>
<option *ngFor="let category of categories" [value]="category.getCategoryId">{{category.getName}}</option>
</app-select>
</div>
</div>
<app-post-thumbnail *ngFor="let post of allPosts" [post]="post"></app-post-thumbnail>
<div class="postContainer">
<app-post-thumbnail *ngFor="let post of allPosts" [post]="post"></app-post-thumbnail>
</div>
</div>
client/src/app/posts/post-list/post-list.component.scss
+ 42
− 0
View file @ 473e04a9
div.title {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
font-family: 'Inter', sans-serif;
font-size: 2em;
text-shadow: -2px 2px 3px #000000;
color: white;
h2 {
letter-spacing: 10px;
}
}
div.container{
margin-bottom: 100px;
margin-top: 250px;
display: grid;
grid-template-columns: 400px 3fr;
gap: 25px;
div.filterContainer{
background: linear-gradient(#24e072 0%, #14A35A 100%);
height: 250px;
padding: 15px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
div.whiteBox{
background-color: #fff;
padding: 20px;
height: 100%;
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5);
}
}
div.postContainer{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, 384px);
gap: 30px;
}
}
\ No newline at end of file
client/src/app/posts/post-thumbnail/post-thumbnail.component.html
+ 5
− 2
View file @ 473e04a9
<div class="postthumb">
<a href="javascript:void(0)" (click)="goToPost()">{{post.getTitle}}</a>
<div class="postthumb" (click)="goToPost()">
<img [src]="post.getImageUrl">
<p class="price">{{post.getPrice}} kr</p>
<p class="title">{{post.getTitle}}</p>
</div>
client/src/app/posts/post-thumbnail/post-thumbnail.component.scss
+ 26
− 2
View file @ 473e04a9
div.postthumb {
padding: 10px;
margin: 10px;
background-color: rgba(0,0,0,.1);
background-color: #FFA1A1;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
font-family: 'Josefin Sans', sans-serif;
width: 384px;
cursor: pointer;
img{
object-fit: cover;
width: 364px;
height: 364px;
border: 4px #e98686 solid;
}
p.price{
position: relative;
top: -31px;
left: 15px;
text-shadow: -1px 1px 4px #000000;
color: white;
font-size: 16pt;
}
p.title{
margin-top: -10px;
font-size: 18pt;
}
}
client/src/app/posts/post.service.spec.ts
+ 3
− 3
View file @ 473e04a9
......@@ -339,7 +339,7 @@ describe('PostService', () => {
for (let i = 0; i < posts.length; i++) {
expect(posts[i].getId).toBe(i + 1);
expect(posts[i].getTitle).toBe("Test" + (i + 1));
expect(posts[i].getOwner).toBe("2");
expect(posts[i].getOwner).toBe(2);
}
}).catch(error => {
fail();
......@@ -354,7 +354,7 @@ describe('PostService', () => {
title: "Test1",
description: "TestDescription",
timestamp: 23947298234,
owner: "2",
owner: 2,
imageUrl: null,
price: 49,
categoryid: 2
......@@ -363,7 +363,7 @@ describe('PostService', () => {
title: "Test2",
description: "TestDescription",
timestamp: 23453246527,
owner: "2",
owner: 2,
imageUrl: null,
price: 159,
categoryid: 2
......
client/src/app/shared/button/button.component.scss
+ 16
− 1
View file @ 473e04a9
button{
padding: 5px;
padding: 10px;
width: 100%;
font-family: 'Josefin Sans', sans-serif;
font-size: 16pt;
border: none;
background-color: #FFA1A1;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
outline: none;
}
button:hover{
background-color: #e98686;
}
button:active{
background-color: #e07d7d;
}
\ No newline at end of file
client/src/app/shared/password-input/password-input.component.html → client/src/app/shared/input/input.component.html
+ 5
− 4
View file @ 473e04a9
<label>
<label [class]="dark?'dark':'light'">
{{label}}
<input
[type]="isVisible ? 'text' : 'password'"
<input
[class]="dark?'dark':'light'"
[type]="isVisible ? 'text' : type"
[placeholder]="placeholder"
[(ngModel)]="inputModel"
(ngModelChange)="inputModelChange.emit(inputModel)"
(change)="change.emit($event)"
(focus)="focus.emit($event)"
(blur)="blur.emit($event)">
<app-button (click)="togglePasswordVisible()" [text]="toggleText"></app-button>
<i *ngIf="type == 'password'" class="material-icons" (click)="togglePasswordVisible()">{{toggleText}}</i>
</label>
\ No newline at end of file
client/src/app/shared/input/input.component.scss 0 → 100644
+ 61
− 0
View file @ 473e04a9
label.light {
color: white;
}
label.dark {
color: black;
}
label {
position: relative;
font-family: 'Josefin Sans', sans-serif;
margin: 10px 0 5px 0;
display: flex;
flex-direction: column;
font-size: 1.3rem;
input{
padding: 10px 0 5px 0;
font-family: 'Josefin Sans', sans-serif;
border: none;
font-size: 1rem;
padding-right: 50px;
outline: none;
background-color: rgba(0, 0, 0, 0);
}
input.light{
border-bottom: 2px solid #fff;
color: white;
&:focus {
border-bottom: 2px solid #444;
}
}
input.dark{
border-bottom: 2px solid #797979;
color: black;
&:focus {
border-bottom: 2px solid #14A35A;
}
}
.material-icons {
position: absolute;
right: 2.5px;
bottom: 7.5px;
cursor: pointer;
}
}
/* Remove arrows from number input */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment