Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 03:26:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Switch button and pop-up styling

Browse source 
again
This commit is contained in:
Michał Gdula 2023-04-19 15:05:54 +00:00
parent 48f6b02755
commit f0e586d0d5
6 changed files with 32 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

2
onlylegs/static/js/login.js
View file

@ -3,6 +3,7 @@ function showLogin() {
// Create elements
cancelBtn = document.createElement('button');
cancelBtn.classList.add('btn-block');
cancelBtn.classList.add('transparent');
cancelBtn.innerHTML = 'nuuuuuuuu';
cancelBtn.onclick = popupDissmiss;
@ -100,6 +101,7 @@ function showRegister() {
// Create buttons
cancelBtn = document.createElement('button');
cancelBtn.classList.add('btn-block');
cancelBtn.classList.add('transparent');
cancelBtn.innerHTML = 'nuuuuuuuu';
cancelBtn.onclick = popupDissmiss;

2
onlylegs/static/js/popup.js
View file

@ -28,7 +28,7 @@ function popUpShow(titleText, subtitleText, bodyContent=null, userActions=null)
actionsSelector.appendChild(userActions[i]);
}
} else {
actionsSelector.innerHTML = '<button class="btn-block" onclick="popupDissmiss()">Close</button>';
actionsSelector.innerHTML = '<button class="btn-block transparent" onclick="popupDissmiss()">Close</button>';
}
// Stop scrolling and show popup

2
onlylegs/static/sass/components/banner.sass
View file

@ -57,7 +57,7 @@
width: 100%
height: 100%
background: linear-gradient(to right, RGB($primary), transparent)
background: linear-gradient(to right, RGB($bg-100), transparent)
z-index: +1

38
onlylegs/static/sass/components/buttons/block.sass
View file

@ -1,11 +1,12 @@
@mixin btn-block($color)
color: RGB($color)
box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
&:hover, &:focus-visible
background-color: RGBA($color, 0.1)
color: RGB($color)
box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($color, 0.2)
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
&:hover, &:focus-visible
background-color: RGBA($color, 0.15)
color: RGB($color)
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($color, 0.2)
.btn-block
@ -29,7 +30,7 @@
color: RGB($white)
border: none
border-radius: $rad-inner
box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
outline: none
cursor: pointer
@ -37,23 +38,24 @@
&:hover, &:focus-visible
background-color: RGBA($white, 0.2)
box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
// box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
&.transparent
background-color: transparent
&:hover, &:focus-visible
text-decoration: underline
&.primary
@include btn-block($primary)
&.critical
@include btn-block($critical)
&.warning
@include btn-block($warning)
&.success
@include btn-block($success)
&.info
@include btn-block($info)
&.black
@include btn-block($black)
@ -94,7 +96,7 @@
border: none
border-bottom: 3px solid RGBA($white, 0.1)
border-radius: $rad-inner
box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
outline: none
cursor: pointer
@ -134,7 +136,7 @@
color: RGB($white)
border: none
border-radius: $rad-inner
box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
outline: none
cursor: pointer
@ -157,17 +159,17 @@
&:hover, &:focus-visible
background-color: RGBA($white, 0.2)
color: RGB($white)
box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
// box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
&.active
background-color: RGBA($primary, 0.2)
color: RGB($primary)
box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($primary, 0.3)
// box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($primary, 0.3)
&.edging
background-color: RGBA($white, 0.2)
color: RGB($white)
box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
// box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
input
display: none // So it doesnt get in the way of the drop as that breaks things
@ -175,4 +177,4 @@
&.error
background-color: RGBA($critical, 0.2)
color: RGB($critical)
box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($critical, 0.3)
// box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($critical, 0.3)

2
onlylegs/static/sass/components/buttons/pill.sass
View file

@ -18,7 +18,7 @@
background-color: RGB($bg-200)
border-radius: $rad
box-shadow: 0 1px 0 RGB($bg-100), 0 -1px 0 RGB($bg-300)
// box-shadow: 0 1px 0 RGB($bg-100), 0 -1px 0 RGB($bg-300)
.pill-text
margin: 0

26
onlylegs/static/sass/components/pop-up.sass
View file

@ -25,7 +25,7 @@
.pop-up-wrapper
margin: 0
padding: 0
padding: 1rem
width: 621px
height: auto
@ -46,8 +46,8 @@
transition: transform 0.2s $animation-smooth
.pop-up-header
margin: 0
padding: 1rem
margin: 0 0 1rem 0
padding: 0
width: 100%
height: auto
@ -102,17 +102,6 @@
&:hover
text-decoration: underline
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 40vh
border-radius: $rad-inner
form
margin: 0
padding: 0
@ -128,7 +117,7 @@
.pop-up-controlls
margin: 0
padding: 0.25rem
padding: 0
width: 100%
height: auto
@ -136,9 +125,9 @@
display: flex
flex-direction: row
justify-content: flex-end
gap: 0.25rem
gap: 0.5rem
background-color: RGB($bg-100)
// background-color: RGB($bg-100)
&.active
opacity: 1
@ -158,7 +147,8 @@
img
max-height: 50vh
.pop-up-controlls button
.pop-up-controlls
button
width: 100%
&.active