finish scss conversion
This commit is contained in:
parent
4334596d4b
commit
edb6022ebe
GPG key ID:
9FBC6FFD6D2DBF17
11 changed files with 191 additions and 195 deletions
|
|
@ -62,10 +62,9 @@ $inner-radius: $scale / 3;
|
|||
$font-size: $scale;
|
||||
$font-size-small: $scale * 0.75;
|
||||
|
||||
$header-height: $scale * 3.5;
|
||||
|
||||
$base-z-index: 1;
|
||||
$header-z-index: 2;
|
||||
$modal-z-index: 5;
|
||||
$toast-z-index: 10;
|
||||
|
||||
$content-width: $scale * 40;
|
||||
|
|
|
|||
|
|
@ -1,44 +1,41 @@
|
|||
@import "./variables";
|
||||
@import "./mixins";
|
||||
|
||||
#main-content {
|
||||
padding-top: 20rem;
|
||||
padding-bottom: 5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
main#main {
|
||||
padding-top: 20em;
|
||||
padding-bottom: 5em;
|
||||
@include row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.branding {
|
||||
max-width: 100%;
|
||||
width: 30rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
width: 30em;
|
||||
margin-right: 5em;
|
||||
|
||||
.branding h1 {
|
||||
h1 {
|
||||
color: $blue;
|
||||
font-family: facebook;
|
||||
font-size: 3.5rem;
|
||||
font-family: $header-font;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.branding span {
|
||||
font-size: 1.5rem;
|
||||
span {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 30rem;
|
||||
@include column;
|
||||
max-width: 100%;
|
||||
width: 30em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media(max-width: 1200px) {
|
||||
#main-content {
|
||||
flex-direction: column;
|
||||
main#main {
|
||||
@include column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 10rem 1rem;
|
||||
}
|
||||
padding: 10rem $outer-gap;
|
||||
|
||||
.branding {
|
||||
margin: 0;
|
||||
|
|
@ -49,3 +46,5 @@
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
@include font-face("Facebook");
|
||||
@include font-face("SF Pro");
|
||||
|
||||
$header-height: $scale * 3.5;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -268,6 +270,11 @@ footer#footer {
|
|||
}
|
||||
}
|
||||
|
||||
input.btn {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
|
||||
|
|
@ -332,24 +339,20 @@ object.inner {
|
|||
@include column;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grow {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.ml-sm {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.ml {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.mr-sm {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.mr {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
|
@ -362,6 +365,18 @@ object.inner {
|
|||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.pl {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.pr {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.pt {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pb {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -464,68 +479,71 @@ object.inner {
|
|||
}
|
||||
}
|
||||
|
||||
.float-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
transform: translate(-125%, -50%);
|
||||
}
|
||||
|
||||
.mi {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.5em;
|
||||
|
||||
&.mi-sm {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.mi-sm {
|
||||
font-size: 1rem;
|
||||
&.mi-lg {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.mi-lg {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
top: $header-height;
|
||||
left: 100%;
|
||||
transform: translateX(-110%);
|
||||
margin-top: 1rem;
|
||||
z-index: 10000;
|
||||
}
|
||||
transform: translateX(-100%);
|
||||
padding: $outer-gap;
|
||||
z-index: $toast-z-index;
|
||||
|
||||
.toast {
|
||||
color: $white;
|
||||
padding: .75rem;
|
||||
margin: .5rem;
|
||||
border-radius: .5rem;
|
||||
min-width: 15rem;
|
||||
padding: $inner-gap;
|
||||
margin: $inner-gap;
|
||||
border-radius: $inner-radius;
|
||||
min-width: 15em;
|
||||
animation: fadeIn .1s, slideIn .25s linear;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&.error {
|
||||
background: $red;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background-color: $red;
|
||||
&.success {
|
||||
background: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
form input:not(.btn) {
|
||||
form {
|
||||
input {
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.1em;
|
||||
outline: 2px solid $surface2;
|
||||
border-radius: .25rem;
|
||||
padding: .75rem;
|
||||
}
|
||||
border-radius: $inner-radius;
|
||||
padding: $inner-gap;
|
||||
|
||||
form input:not(.btn):focus {
|
||||
&:focus {
|
||||
outline-color: $blue;
|
||||
}
|
||||
|
||||
form .rel label:not(.static) {
|
||||
&[type=radio] {
|
||||
outline: none;
|
||||
padding: 3em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input {
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
padding-left: $inner-gap / 2;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(.5rem, -40%);
|
||||
|
|
@ -536,8 +554,15 @@ form .rel label:not(.static) {
|
|||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
input:focus + label:not(.static),
|
||||
input:not(:placeholder-shown) + label:not(.static) {
|
||||
input {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
|
||||
&:focus,
|
||||
&:not(:placeholder-shown) {
|
||||
& + label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
color: $text;
|
||||
top: 0;
|
||||
padding: .5rem;
|
||||
|
|
@ -546,55 +571,30 @@ input:not(:placeholder-shown) + label:not(.static) {
|
|||
transform: translate(.5rem, -25%);
|
||||
background-color: $surface0;
|
||||
}
|
||||
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rel input {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
padding: 3rem !important;
|
||||
width: 1rem !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.radio {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.form-radio {
|
||||
@include row;
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
position: relative;
|
||||
|
||||
.radio label {
|
||||
label {
|
||||
border: 1px solid $surface2;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
padding: .75rem;
|
||||
border-radius: .25rem;
|
||||
padding: $inner-gap;
|
||||
border-radius: $inner-radius;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio input {
|
||||
input {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
transform: translate(-250%, -70%);
|
||||
width: fit-content;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -105,11 +105,14 @@ $pfp-size: 12.5em;
|
|||
width: 100%;
|
||||
@include column;
|
||||
align-items: center;
|
||||
|
||||
.tab {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#tab-posts,
|
||||
#tab-about {
|
||||
width: 100%;
|
||||
max-width: $content-width;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
@import "./variables";
|
||||
@import "./mixins";
|
||||
|
||||
#main-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#settings {
|
||||
margin: 0 1rem;
|
||||
margin-bottom: 1rem;
|
||||
max-width: 800px;
|
||||
min-width: 400px;
|
||||
margin: 0 $outer-gap;
|
||||
margin-bottom: $outer-gap;
|
||||
max-width: $content-width * 1.5;
|
||||
min-width: $content-width;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<div class="form card col">
|
||||
<form id="action-login" class="col" action="">
|
||||
<div class="rel mb">
|
||||
<div class="form-input mb">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<?=ucfirst(lang('ph_username'))?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="rel mb">
|
||||
<div class="form-input mb">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
|
|
@ -31,18 +31,18 @@
|
|||
</label>
|
||||
</div>
|
||||
<?=ilang('action_login',
|
||||
class: 'btn btn-submit grow',
|
||||
class: 'btn btn-primary btn-alt grow',
|
||||
button: TRUE,
|
||||
attrs: array('type' => 'submit')
|
||||
)?>
|
||||
<?=ilang('action_forgot_passwd',
|
||||
<?/*=ilang('action_forgot_passwd',
|
||||
class: 'btn btn-blend btn-primary grow mt'
|
||||
)?>
|
||||
)*/?>
|
||||
</form>
|
||||
<hr>
|
||||
<?=ilang('action_create_account',
|
||||
id: 'action-register',
|
||||
class: 'btn btn-success grow',
|
||||
class: 'btn btn-success btn-alt grow',
|
||||
button: TRUE,
|
||||
attrs: array('type' => 'submit')
|
||||
)?>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php /* Copyright (c) 2024 Freya Murphy */ ?>
|
||||
<?php /* vi: syntax=php */ ?>
|
||||
<main id="main" class="container">
|
||||
<main id="main">
|
||||
<?php if ($self): ?>
|
||||
<div id="new-post" class="card">
|
||||
<div class="row grow">
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-container" class="container">
|
||||
<div id="tab-container" class="mt">
|
||||
<div id="tab-posts" class="tab">
|
||||
<?php
|
||||
$_GET['user_id'] = $user['id'];
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ function __create_form($user, $col) {
|
|||
$ph = ucfirst(lang('ph_' . $col));
|
||||
$val = $user[$col];
|
||||
return "<form action=\"\" class=\"row mt settings-form\" onsubmit=\"handleSubmit(event)\">
|
||||
<div class=\"rel mb\" style=\"flex: 1\">
|
||||
<div class=\"form-input mb\" style=\"flex: 1\">
|
||||
<input
|
||||
type=\"text\"
|
||||
name=\"{$col}\"
|
||||
|
|
@ -132,7 +132,7 @@ function resetMedia(media_type) {
|
|||
<h2><?=ucfirst(lang('security_title'))?></h2>
|
||||
<strong><?=ucfirst(lang('security_desc'))?></strong>
|
||||
<form action="" class="col mt settings-form" onsubmit="handlePassword(event)">
|
||||
<div class="rel mb" style="flex: 1">
|
||||
<div class="form-input mb" style="flex: 1">
|
||||
<input
|
||||
type="password"
|
||||
name="curr_password"
|
||||
|
|
@ -143,7 +143,7 @@ function resetMedia(media_type) {
|
|||
<?=ucwords(lang('ph_current_pass'))?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="rel mb" style="flex: 1">
|
||||
<div class="form-input mb" style="flex: 1">
|
||||
<input
|
||||
type="password"
|
||||
name="new_password"
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<?php /* vi: syntax=php */ ?>
|
||||
<form id="register-form">
|
||||
<div class="modal-content register-modal col">
|
||||
<label class="static">
|
||||
<label>
|
||||
<?=ucwords(lang('ph_basic_info'))?>
|
||||
</label>
|
||||
<div class="row mt">
|
||||
<div class="rel grow">
|
||||
<div class="form-input grow">
|
||||
<input
|
||||
type="text"
|
||||
name="first_name"
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<?=ucwords(lang('ph_first_name'))?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="rel ml grow">
|
||||
<div class="form-input ml grow">
|
||||
<input
|
||||
type="text"
|
||||
name="last_name"
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rel mt">
|
||||
<div class="form-input mt">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<?=ucwords(lang('ph_username'))?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="rel mt">
|
||||
<div class="form-input mt">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<?=ucwords(lang('ph_password'))?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="rel mt">
|
||||
<div class="form-input mt">
|
||||
<input
|
||||
type="text"
|
||||
name="email"
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<?=ucwords(lang('ph_email'))?>
|
||||
</label>
|
||||
</div>
|
||||
<label for="birth_date" class="mt static">
|
||||
<label for="birth_date" class="mt">
|
||||
<?=ucwords(lang('ph_birth_date'))?>
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -72,11 +72,11 @@
|
|||
name="birth_date"
|
||||
id="register-birth-date"
|
||||
>
|
||||
<label for="gender" class="mt static">
|
||||
<label for="gender" class="mt">
|
||||
<?=ucwords(lang('ph_gender'))?>
|
||||
</label>
|
||||
<div class="row mt" data-type="radio" data-name="gender-wrapper">
|
||||
<div class="rel radio mr">
|
||||
<div class="form-radio mr">
|
||||
<input
|
||||
type="radio"
|
||||
id="register-gender-male"
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
<?=ucwords(lang('ph_gender_male'))?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="rel radio mr">
|
||||
<div class="form-radio mr">
|
||||
<input
|
||||
type="radio"
|
||||
id="register-gender-female"
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
<?=ucwords(lang('ph_gender_female'))?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="rel radio">
|
||||
<div class="form-radio">
|
||||
<input
|
||||
type="radio"
|
||||
id="register-gender-lettuce"
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
<div class="modal-footer">
|
||||
<?=ilang('action_register',
|
||||
id: 'register-submit',
|
||||
class: 'btn grow btn-success',
|
||||
class: 'btn btn-submit btn-alt grow',
|
||||
attrs: array('type' => 'submit'),
|
||||
button: TRUE
|
||||
)?>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ function ilang($key,
|
|||
if ($text) {
|
||||
echo '<span';
|
||||
if ($icon) {
|
||||
echo ' class="ml-sm"';
|
||||
echo ' style="margin-left: .5em;"';
|
||||
}
|
||||
echo '>' . $text . '</span>';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue