Skip to content

Instantly share code, notes, and snippets.

@kingRayhan
Last active February 18, 2022 04:18
Show Gist options
  • Save kingRayhan/42d14a0d4efa5fb4a4ea3ecd01216798 to your computer and use it in GitHub Desktop.
Save kingRayhan/42d14a0d4efa5fb4a4ea3ecd01216798 to your computer and use it in GitHub Desktop.

Vue notes markup and styles

@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");
* {
box-sizing: border-box;
}
button {
cursor: pointer;
}
button:focus {
outline: none;
}
body {
font-family: sans-serif;
font-weight: 300;
background: #fc00ff;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #00dbde, #fc00ff);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #00dbde, #fc00ff);
font-family: "Roboto", sans-serif;
}
.header {
text-align: center;
}
.header .app-title {
display: inline-block;
padding: 15px;
text-transform: uppercase;
font-weight: 800;
color: rgba(0, 0, 0, 0.3);
}
.app {
width: 600px;
max-width: 100%;
margin: 0 auto;
}
.contextbox {
background-color: #fff;
padding: 15px;
padding-bottom: 5px;
border-radius: 5px;
}
.contextbox textarea,
.contextbox input {
width: 100%;
resize: none;
padding: 8px;
border: none;
font-size: 16px;
}
.contextbox textarea:focus,
.contextbox input:focus {
outline: none;
}
.contextbox .controls {
height: 35px;
display: flex;
justify-content: space-between;
align-items: center;
}
.contextbox .controls button {
background: #fc00ff;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #00dbde, #fc00ff);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #00dbde, #fc00ff);
color: #fff;
border: none;
text-transform: uppercase;
font-size: 16px;
padding: 4px 18px;
border-radius: 20px;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.15);
transition: 300ms;
cursor: pointer;
}
.contextbox .controls button:focus {
outline: none;
}
.contextbox .controls button:hover {
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.35);
}
.contextbox .controls .colors {
display: flex;
}
.contextbox .controls .colors span {
margin-right: 5px;
height: 25px;
width: 25px;
content: "";
display: inline-block;
background: red;
}
.contextbox .controls .colors span.c1 {
background-color: #d8e2dc;
}
.contextbox .controls .colors span.c2 {
background-color: #ffe5d9;
}
.contextbox .controls .colors span.c3 {
background-color: #fbfaf0;
}
.contextbox .controls .colors span.c4 {
background-color: #ffe9ee;
}
.contextbox .controls .colors span.c5 {
background-color: #ffdde4;
}
.contextbox .controls .colors span.selected {
border: 2px solid #000;
}
.filter {
margin-top: 25px;
text-align: center;
}
.filter button {
border: none;
border: none;
padding: 5px 10px;
}
.filter button.selected {
border: 2px solid #000;
}
.notes {
margin-top: 25px;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 15px;
row-gap: 15px;
}
@media all and (max-width: 600px) {
.notes {
grid-template-columns: 1fr;
}
}
.notes .note {
border-radius: 5px;
background-color: #fff;
padding: 15px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
transition: 300px;
display: flex;
justify-content: space-between;
flex-direction: column;
position: relative;
}
.notes .note:hover {
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}
.notes .note h3 {
margin: 0;
}
.notes .note .time {
margin-bottom: 0;
color: #333;
}
.notes .note:hover .buttons {
opacity: 1;
}
.notes .note .buttons {
transition: 300ms;
opacity: 0;
display: flex;
position: absolute;
top: 0;
right: 0;
border: none;
position: absolute;
top: 0;
right: 0;
border: none;
}
.notes .note .buttons button {
cursor: pointer;
border: none;
background-color: transparent;
}
.notes .note .buttons button:focus {
outline: none;
}
.notes .note .buttons .delete {
color: red;
font-size: 20px;
}
.notes .note .buttons .edit {
padding-top: 5px;
font-size: 16px;
}
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap');
* {
box-sizing: border-box;
}
$radius: 20px;
@mixin gradient {
background: #fc00ff; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #00dbde, #fc00ff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #00dbde, #fc00ff);
}
button {
&:focus {
outline: none;
}
cursor: pointer;
}
body {
font-family: sans-serif;
font-weight: 300;
@include gradient;
font-family: 'Roboto', sans-serif;
}
.header {
text-align: center;
.app-title {
// background-color: #fddb19;
display: inline-block;
padding: 15px;
text-transform: uppercase;
font-weight: 800;
color: rgba(#000000, 0.3);
}
}
.app {
width: 600px;
max-width: 100%;
margin: 0 auto;
}
.contextbox {
background-color: #fff;
padding: 15px;
padding-bottom: 5px;
border-radius: 5px;
textarea,
input {
width: 100%;
resize: none;
padding: 8px;
border: none;
font-size: 16px;
&:focus {
outline: none;
}
}
.controls {
height: 35px;
display: flex;
justify-content: space-between;
align-items: center;
button {
@include gradient;
color: #fff;
border: none;
text-transform: uppercase;
font-size: 16px;
padding: 4px 18px;
border-radius: $radius;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.15);
transition: 300ms;
cursor: pointer;
&:focus {
outline: none;
}
&:hover {
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.35);
}
}
.colors {
display: flex;
span {
margin-right: 5px;
$s: 25px;
height: $s;
width: $s;
content: '';
display: inline-block;
background: red;
$c1: #d8e2dc;
$c2: #ffe5d9;
$c3: #fbfaf0;
$c4: #ffe9ee;
$c5: #ffdde4;
&.c1 {
background-color: $c1;
}
&.c2 {
background-color: $c2;
}
&.c3 {
background-color: $c3;
}
&.c4 {
background-color: $c4;
}
&.c5 {
background-color: $c5;
}
&.selected {
border: 2px solid #000;
}
}
}
}
}
.filter {
margin-top: 25px;
text-align: center;
button {
border: none;
border: none;
padding: 5px 10px;
&.selected {
border: 2px solid #000;
}
}
}
.notes {
margin-top: 25px;
display: grid;
grid-template-columns: 1fr 1fr;
@media all and (max-width: 600px) {
grid-template-columns: 1fr;
}
column-gap: 15px;
row-gap: 15px;
.note {
border-radius: 5px;
background-color: #fff;
padding: 15px;
box-shadow: 0 5px 5px rgba(#000000, 0.3);
transition: 300px;
display: flex;
justify-content: space-between;
flex-direction: column;
&:hover {
box-shadow: 0 5px 25px rgba(#000000, 0.3);
}
h3 {
margin: 0;
}
.time {
margin-bottom: 0;
color: #333;
}
&:hover {
.buttons {
opacity: 1;
}
}
position: relative;
.buttons {
transition: 300ms;
opacity: 0;
display: flex;
position: absolute;
top: 0;
right: 0;
border: none;
position: absolute;
top: 0;
right: 0;
border: none;
button {
&:focus {
outline: none;
}
cursor: pointer;
border: none;
background-color: transparent;
}
.delete {
color: red;
font-size: 20px;
}
.edit {
padding-top: 5px;
font-size: 16px;
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Notes</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="app">
<div class="header"><h1 class="app-title">Vue Notes</h1></div>
<div class="contextbox">
<input type="text" placeholder="Title" />
<textarea
rows="8"
placeholder="Description"
class=""
spellcheck="false"
></textarea>
<div class="controls">
<div class="colors">
<span class="c1" data-note-color="#D8E2DC"></span>
<span class="c2" data-note-color="#FFE5D9"></span>
<span class="c3" data-note-color="#FBFAF0"></span>
<span class="c4" data-note-color="#FFE9EE"></span>
<span class="c5" data-note-color="#FFDDE4"></span>
</div>
<button>Add</button>
</div>
</div>
<div class="filter">
<button>All (2)</button>
<button style="background-color: rgb(216, 226, 220)">1</button>
<button style="background-color: rgb(255, 229, 217)">0</button>
<button style="background-color: rgb(251, 250, 240)">0</button>
<button style="background-color: rgb(255, 233, 238)">0</button>
<button style="background-color: rgb(255, 221, 228)">1</button>
<button style="background-color: rgb(255, 255, 255)">0</button>
</div>
<div class="notes">
<div class="note" style="background-color: rgb(216, 226, 220)">
<div>
<h3 class="title">very important note</h3>
<p>heyyy</p>
</div>
<p class="time">a few seconds ago</p>
<div class="buttons"><button class="delete">×</button></div>
</div>
<div class="note" style="background-color: rgb(255, 221, 228)">
<div>
<h3 class="title">Learn Vue</h3>
<p>Vue is a easy going library</p>
</div>
<p class="time">a few seconds ago</p>
<div class="buttons"><button class="delete">×</button></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment