Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-03-21 17:24:14 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

#37 some more scss conversion

Browse Source
This commit is contained in:
Daniel 2018-07-01 21:33:21 -04:00
parent e03df320a5
commit 6a08d045b5
5 changed files with 83 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Home.js
View File

@ -1,11 +1,11 @@
import React from 'react';
import { Route, Link } from 'react-router-dom';
import {Donate} from './Snippets';
import "../scss/with_love.scss";
export default function Home() {
return (
<div>
<link rel="stylesheet" href="/src/css/with_love.css" />
<br />
<div className="with-love">
<div>Welcome to the <a href="https://github.com/chaoticbackup" className="name" target="_blank">Chaotic Backup Project</a>.

3
src/components/entercode/PackSimulator.js
View File

@ -47,8 +47,7 @@ export default class PackSimulator extends React.Component {
if (i>9) break;
}
return (<div>
<link rel="stylesheet" href="/src/css/packs.css" />
return (<div className="packsim">
<Interactive as={Link} {...s.link}
to={`/EnterTheCode/`}>Enter The Code</Interactive>
<br /><br />

159
src/scss/packs.scss
View File

@ -4,6 +4,13 @@
}
} /* Desktop */
.packsim {
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
}
.pack {
height: 100%;
display: flex;
@ -11,92 +18,88 @@
flex-wrap: wrap;
justify-content: center;
margin: auto;
}
.card {
width: 150px;
height: 210px;
background-size: cover;
box-sizing: content-box;
margin: 5px;
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;
-webkit-border-radius: 5px;
-o-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
-o-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
-moz-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
-moz-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
transition-property: width,height,transform,background,font-size,opacity,top,left;
transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
}
.card {
width: 150px;
height: 210px;
background-size: cover;
box-sizing: content-box;
margin: 5px;
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;
-webkit-border-radius: 5px;
-o-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
-o-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
-moz-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
-moz-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
transition-property: width,height,transform,background,font-size,opacity,top,left;
transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
}
.card:hover {
width: 250px;
height: 350px;
}
.card:hover {
width: 250px;
height: 350px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
.stats {
height: 100%;
width: 100%;
text-align: left;
}
.stats {
height: 100%;
width: 100%;
text-align: left;
}
.stats span {
position: relative;
color: black;
display: block;
left: 10px;
font-size: 12px;
}
.stats span {
position: relative;
color: black;
display: block;
left: 10px;
font-size: 12px;
}
.stats span:nth-of-type(1) {
top: 130px;
}
.stats span:nth-of-type(2) {
top: 128px;
}
.stats span:nth-of-type(3) {
top: 126px;
}
.stats span:nth-of-type(4) {
top: 124px;
}
.stats span:nth-of-type(1) {
top: 130px;
}
.stats span:nth-of-type(2) {
top: 128px;
}
.stats span:nth-of-type(3) {
top: 126px;
}
.stats span:nth-of-type(4) {
top: 124px;
}
/* Energy */
.stats span:nth-of-type(5) {
text-align: right;
top: 125px;
left: -11px;
font-size: 14px;
}
/* Energy */
.stats span:nth-of-type(5) {
text-align: right;
top: 125px;
left: -11px;
font-size: 14px;
}
.card:hover .stats span {
left: 20px;
font-size: 14px;
font-weight: bold;
}
.card:hover .stats span {
left: 20px;
font-size: 14px;
font-weight: bold;
}
.card:hover .stats span:nth-of-type(1) {
top: 220px;
}
.card:hover .stats span:nth-of-type(2) {
top: 229px;
}
.card:hover .stats span:nth-of-type(3) {
top: 237px;
}
.card:hover .stats span:nth-of-type(4) {
top: 245px;
}
.card:hover .stats span:nth-of-type(1) {
top: 220px;
}
.card:hover .stats span:nth-of-type(2) {
top: 229px;
}
.card:hover .stats span:nth-of-type(3) {
top: 237px;
}
.card:hover .stats span:nth-of-type(4) {
top: 245px;
}
/* Energy */
.card:hover .stats span:nth-of-type(5) {
text-align: right;
top: 258px;
left: -21px;
font-size: 20px;
}
/* Energy */
.card:hover .stats span:nth-of-type(5) {
text-align: right;
top: 258px;
left: -21px;
font-size: 20px;
}

4
src/scss/portal.scss
View File

@ -109,7 +109,3 @@
font-size: 16px;
line-height: 20px;
}
.collection > .left {
position: fixed;
}

0
src/css/with_love.css → src/scss/with_love.scss
View File