Browse Source

settings view created

master
JayPY Code 7 months ago
parent
commit
f94a1d74d0
8 changed files with 245 additions and 0 deletions
  1. +28
    -0
      src/components/seetings/items/item--1.scss
  2. +28
    -0
      src/components/seetings/items/item--2.scss
  3. +29
    -0
      src/components/seetings/items/item-1.scss
  4. +28
    -0
      src/components/seetings/items/item-2.scss
  5. +23
    -0
      src/components/seetings/items/item.scss
  6. +85
    -0
      src/components/seetings/settings.item.scss
  7. +16
    -0
      src/components/settings.scss
  8. +8
    -0
      src/style.scss

+ 28
- 0
src/components/seetings/items/item--1.scss View File

@ -0,0 +1,28 @@
@mixin item--1 {
background: linear-gradient(70deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 13%, transparent 23%);
clip-path: circle(140% at 100% -100%);
span {
left: 60px;
}
&:hover {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 16%, rgba(9, 9, 121, 1) 78%, transparent 90%);
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 74%, rgba(9, 9, 121, 1) 79%, transparent 81%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 80%, rgba(9, 9, 121, 1) 85%, transparent 97%);
}
}
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 9%, rgba(9, 9, 121, 1) 64%, transparent 76%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 5%, rgba(9, 9, 121, 1) 70%, transparent 82%);
}
}

+ 28
- 0
src/components/seetings/items/item--2.scss View File

@ -0,0 +1,28 @@
@mixin item--2 {
background: linear-gradient(53deg, rgba(0, 212, 255, 1) 23%, rgba(9, 9, 121, 1) 28%, transparent 39%);
clip-path: circle(100% at 75% -140%);
span {
left: 120px;
}
&:hover {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 31%, rgba(9, 9, 121, 1) 78%, transparent 90%);
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 81%, rgba(9, 9, 121, 1) 86%, transparent 98%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 88%, rgba(9, 9, 121, 1) 93%, transparent 105%);
}
}
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 6%, rgba(9, 9, 121, 1) 71%, transparent 83%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 3%, rgba(9, 9, 121, 1) 78%, transparent 90%);
}
}

+ 29
- 0
src/components/seetings/items/item-1.scss View File

@ -0,0 +1,29 @@
@mixin item-1 {
background: linear-gradient(110deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 13%, transparent 23%);
clip-path: circle(140% at 100% 200%);
span {
left: 60px;
}
&:hover {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 16%, rgba(9, 9, 121, 1) 78%, transparent 90%);
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 80%, rgba(9, 9, 121, 1) 85%, transparent 97%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 74%, rgba(9, 9, 121, 1) 79%, transparent 81%);
}
}
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 5%, rgba(9, 9, 121, 1) 70%, transparent 82%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 9%, rgba(9, 9, 121, 1) 64%, transparent 76%);
}
}

+ 28
- 0
src/components/seetings/items/item-2.scss View File

@ -0,0 +1,28 @@
@mixin item-2 {
background: linear-gradient(128deg, rgba(0, 212, 255, 1) 23%, rgba(9, 9, 121, 1) 28%, transparent 39%);
clip-path: circle(100% at 75% 240%);
span {
left: 120px;
}
&:hover {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 31%, rgba(9, 9, 121, 1) 78%, transparent 90%);
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 88%, rgba(9, 9, 121, 1) 93%, transparent 105%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 81%, rgba(9, 9, 121, 1) 86%, transparent 98%);
}
}
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 3%, rgba(9, 9, 121, 1) 78%, transparent 90%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 6%, rgba(9, 9, 121, 1) 71%, transparent 83%);
}
}

+ 23
- 0
src/components/seetings/items/item.scss View File

@ -0,0 +1,23 @@
@mixin item {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 0%, rgba(9, 9, 121, 1) 5%, transparent 15%);
clip-path: circle(138% at 100% 50%);
span {
left: 30px;
}
&:hover {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 78%, transparent 90%);
&::after,
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 73%, rgba(9, 9, 121, 1) 78%, transparent 90%);
}
}
&::after,
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 63%, transparent 75%);
}
}

+ 85
- 0
src/components/seetings/settings.item.scss View File

@ -0,0 +1,85 @@
@import "./items/item-2.scss";
@import "./items/item-1.scss";
@import "./items/item.scss";
@import "./items/item--1.scss";
@import "./items/item--2.scss";
@mixin settings-item {
div.settings-item {
height: 95px;
width: 420px;
cursor: pointer;
margin: 3px 0;
span {
position: relative;
top: 20px;
font-size: 1.8em;
color: white;
&::before {
content: attr(data-text);
position: absolute;
top: -0.05em;
left: -0.15em;
right: -0.15em;
bottom: -0.1em;
font-size: 1.08em;
white-space: pre;
color: #002651;
opacity: 0;
z-index: -1;
}
}
&::after,
&::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
}
&::after {
margin-top: 95px;
}
&:hover span {
text-shadow: -3px -1px 3px #002651, -1px -3px 3px #002651, 3px 1px 3px #002651, 1px 3px 3px #002651;
}
&.item-2 {
@include item-2();
}
&.item-1 {
@include item-1();
}
&.item {
@include item();
}
&.item--1 {
@include item--1();
}
&.item--2 {
@include item--2();
}
}
}

+ 16
- 0
src/components/settings.scss View File

@ -0,0 +1,16 @@
@import "./seetings/settings.item.scss";
div.settings-view {
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1;
@include settings-item();
}

+ 8
- 0
src/style.scss View File

@ -4,6 +4,11 @@
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
html {
width: 1920px;
height: 1080px;
}
body {
background-color: #131313;
@ -15,7 +20,10 @@ body {
justify-content: center;
overflow: hidden;
margin: 0;
}
@import "./components/measurement.circle.scss";
@import "./components/measurement.pipe.scss";
@import "./components/settings.scss";

Loading…
Cancel
Save