Skip to content
Snippets Groups Projects
Commit 2bf9ed36 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

buttins

parent 3f461273
No related branches found
No related tags found
No related merge requests found
Pipeline #399338 failed
Stage: build
Expand all Hide whitespace changes
Inline Side-by-side
.gitignore
+ 3
− 1
View file @ 2bf9ed36
......@@ -9,4 +9,6 @@ code
.vite
app.py
unused.py
unused-css-master
\ No newline at end of file
unused-css-master
other
\ No newline at end of file
package-lock.json
+ 2013
− 190
View file @ 2bf9ed36
This diff is collapsed.
package.json
+ 1
− 0
View file @ 2bf9ed36
......@@ -44,6 +44,7 @@
},
"devDependencies": {
"@types/dompurify": "^3.0.5",
"@types/jquery": "^3.5.30",
"@types/node": "^20.12.10",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
......
src/App/App.css
+ 176
− 1
View file @ 2bf9ed36
......@@ -3063,4 +3063,179 @@ span{
div.timeline-item.moretop div div.row.align-items-center div.col p{
text-align: left;
}
\ No newline at end of file
/* ========================
BUTTON TWO
======================== */
.btn-two {
color: #fff;
transition: all 0.5s;
position: relative;
}
.btn-two span {
z-index: 2;
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.btn-two::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
}
.btn-two::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
}
.btn-two:hover::before {
transform: rotate(-45deg);
background-color: rgba(255, 255, 255, 0);
}
.btn-two:hover::after {
transform: rotate(45deg);
background-color: rgba(255, 255, 255, 0);
}
/*
========================
BUTTON THREE
======================== */
.btn-three {
color: #fff;
transition: all 0.5s;
position: relative;
}
.btn-three::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.3s;
}
.btn-three:hover::before {
opacity: 0;
transform: scale(0.5, 0.5);
}
.btn-three::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border: 1px solid rgba(255, 255, 255, 0.5);
transform: scale(1.2, 1.2);
}
.btn-three:hover::after {
opacity: 1;
transform: scale(1, 1);
}
div[class*="boxy"] {
height: 33.33%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.boxy-1 {
background-color: #ff6766;
}
.boxy-2 {
background-color: #3c3c3c;
}
.boxy-3 {
background-color: #66a182;
}
.btn-new {
line-height: 50px;
height: 50px;
text-align: center;
width: 250px;
cursor: pointer;
}
/*
========================
BUTTON ONE
========================
*/
.btn-one {
color: #fff;
transition: all 0.3s;
position: relative;
}
.btn-one span {
transition: all 0.3s;
}
.btn-one::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
border-bottom-color: rgba(255, 255, 255, 0.5);
transform: scale(0.1, 1);
}
.btn-one:hover span {
letter-spacing: 2px;
}
.btn-one:hover::before {
opacity: 1;
transform: scale(1, 1);
}
.btn-one::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.3s;
background-color: rgba(255, 255, 255, 0.1);
}
.btn-one:hover::after {
opacity: 0;
transform: scale(0.1, 1);
}
src/App/App.scss
+ 223
− 0
View file @ 2bf9ed36
......@@ -320,4 +320,227 @@ $shadow: #bc15aa;
}
.shadow-stroke {
text-shadow: 0.25vw 0.25vw $shadow;
}
/* Main Styles */
.button {
display: block;
background-color: var(--accent-primary);
width: 300px;
height: 100px;
line-height: 100px;
margin: auto;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
.but-span ,
.icon {
display: block;
height: 100%;
text-align: center;
position: absolute;
top: 0;
}
.but-span {
width: 72%;
line-height: inherit;
font-size: 22px;
text-transform: uppercase;
left: 0;
transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
&:after {
content: '';
background-color: var(--text-primary);
width: 2px;
height: 70%;
position: absolute;
top: 15%;
right: -1px;
}
}
.icon {
width: 28%;
right: 0;
transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
.fa {
font-size: 30px;
vertical-align: middle;
transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400), height #{"0.25s"} ease;
}
.fa-remove {
height: 36px;
}
.fa-check {
display: none;
}
}
&.success,
&:hover {
.but-span {
left: -72%;
opacity: 0;
}
.icon {
width: 100%;
.fa {
font-size: 45px;
}
}
}
&.success {
background-color: #27ae60;
.icon {
.fa-remove {
display: none;
}
.fa-check {
display: inline-block;
}
}
}
&:hover {
opacity: .9;
.icon .fa-remove {
height: 46px;
}
}
&:active {
opacity: 1;
}
}
.icon{
cursor: pointer;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
margin-left: 60px/5;
margin-right: 60px/5;
border-radius: 60px*0.5;
overflow: hidden;
&::before, &::after{
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.25s ease;
border-radius: 60px*0.5;
}
i{
position: relative;
color: white;
font-size: 60px/2;
margin-top: 60px/4;
transition: all 0.25s ease;
}
}
.icon-fill{
&::before{
transition-duration: 0.5s;
box-shadow: inset 0 0 0 1px green;
}
&:hover::before{
box-shadow: inset 0 0 0 60px green;
}
}
.icon-enter{
&::after{
box-shadow: inset 0 0 0 1px orange;
}
&::before{
border-radius: 0;
margin-left: -100%;
box-shadow: inset 0 0 0 60px orange;
}
&:hover::before{
margin-left: 0;
}
}
.icon-expand{
&::after{
box-shadow: inset 0 0 0 1px red;
}
&::before{
background: red;
box-shadow: inset 0 0 0 60px $background;
}
&:hover::before{
box-shadow: inset 0 0 0 1px $background;
}
}
.icon-collapse{
&::before{
border-radius: 0;
}
&:hover::before{
box-shadow:
inset 0 60px/2 0 0 green,
inset 0 60px/-2 0 0 green;
}
&::after{
box-shadow: inset 0 0 0 1px green;
}
}
.icon-rotate{
box-shadow: inset 0 0 0 1px purple;
&::after, &::before{
border: 0px solid transparent;
}
&:hover::before{
transition:
border-top-width 0.3s ease,
border-top-color 0.3s ease;
border-width: 60px;
border-top-color: purple;
}
&:hover::after{
transition:
border-left-width 0.3s ease,
border-left-color 0.3s ease;
border-width: 60px;
border-left-color: purple;
}
&:hover{
transition: background 0.001s ease 0.3s;
background: purple;
}
i{
z-index: 1;
}
}
\ No newline at end of file
src/components/Buttons.tsx
+ 62
− 1
View file @ 2bf9ed36
import { Link } from "react-router-dom";
import { openCity } from "./HorizontalTimeline";
interface UrlButtonProps{
href: string,
......@@ -139,4 +140,64 @@ export function openTab({cityName, cla, weg}:{cityName: string, cla: string, weg
event.currentTarget.className += " active";
}
return opencity;
}
\ No newline at end of file
}
export function ButtonThree(){
return(
<div className="boxy-3">
<div className="btn-new btn-three">
<span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonTwo(){
return(
<div className="boxy-2">
<div className="btn-new btn-three">
<span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonOne(){
return(
<div className="boxy-1">
<div className="btn-new btn-three">
<span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonFourFill(){
return(
<a type="button" className="icon icon-fill"><i className="fa fa-home"></i></a>
)
}
export function ButtonFourEnter(){
return(
<a type="button" className="icon icon-enter"><i className="fa fa-home"></i></a>
)
}
export function ButtonFourExpand(){
return(
<a type="button" className="icon icon-expand"><i className="fa fa-home"></i></a>
)
}
export function ButtonFourCollapse(){
return(
<a type="button" className="icon icon-collapse"><i className="fa fa-home"></i></a>
)
}
export function ButtonFourRotate(){
return(
<a type="button" className="icon icon-rotate"><i className="fa fa-home"></i></a>
)
}
src/contents/human-practices.tsx
+ 3
− 1
View file @ 2bf9ed36
......@@ -11,7 +11,7 @@
import { TimeHori } from "../components/HorizontalTimeline";
import { AllPopus } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
import { TabButtonRow, openTab } from "../components/Buttons";
import { ButtonFourFill, TabButtonRow, openTab } from "../components/Buttons";
import { BlockQuoteB } from "../components/Quotes";
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
......@@ -148,6 +148,7 @@ export function HumanPractices() {
openTab({cityName: "All", cla: "timelinecardtabs"});
return (
<div className="row mt-4">
<BlockQuoteB
text="Human Practices is the study of how your work affects the world, and how the world affects your work."
cite="- Peter Carr, Director of Judging"
......@@ -163,6 +164,7 @@ export function HumanPractices() {
<div className="center">
<h3 className="col personalstyleone">Methods</h3>
</div>
<ButtonFourFill></ButtonFourFill>
</section>
<section id="Analysis">
<div className="center" >
......
yarn.lock
+ 302
− 620
View file @ 2bf9ed36
This diff is collapsed.
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