Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-14 08:48:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Dennis Eichhorn 2023-07-17 01:39:34 +00:00
parent b5679771fb
commit 13ee0fddda
4 changed files with 61 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
image.scss
View File

@ -65,6 +65,29 @@ img {
max-width: 80%; max-width: 80%;
margin: 0 auto; margin: 0 auto;
display: flex; // enlarge
position: relative; // enlarge
input + .enlarged {
display: none;
}
input:checked + .enlarged {
display: block;
}
.enlarged {
position: absolute;
top: 0;
left: 0;
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
input { input {
display: none; display: none;

42
styles.css
View File

@ -3450,7 +3450,21 @@ img.bordered {
.gallery { .gallery {
max-width: 80%; max-width: 80%;
margin: 0 auto; } margin: 0 auto;
display: flex;
position: relative; }
.gallery input + .enlarged {
display: none; }
.gallery input:checked + .enlarged {
display: block; }
.gallery .enlarged {
position: absolute;
top: 0;
left: 0; }
.gallery .enlarged img {
max-width: 100%;
max-height: 100%;
object-fit: contain; }
.gallery input { .gallery input {
display: none; } display: none; }
.gallery input + img { .gallery input + img {
@ -4658,7 +4672,7 @@ section > h2 {
display: block; } } display: block; } }
.tabview .tab-links { .tabview .tab-links {
color: #000; color: #000;
padding: 0.3rem 0 0 0; } padding: 5px 0 0 0; }
.tabview .tab-links label { .tabview .tab-links label {
font-size: 0.9em; font-size: 0.9em;
user-select: none; user-select: none;
@ -4690,6 +4704,8 @@ section > h2 {
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; } flex-direction: column; }
.tabview.right > .box {
order: 2; }
.tab-1 .tab-links { .tab-1 .tab-links {
margin: 0 0 10px 1px; } margin: 0 0 10px 1px; }
@ -4708,17 +4724,17 @@ section > h2 {
border: 1px solid var(--button-colored-background); border: 1px solid var(--button-colored-background);
background: #fff; background: #fff;
padding: 10px; } padding: 10px; }
.tab-1.left { .tab-1.left, .tab-1.right {
display: flex; } display: flex; }
.tab-1.left .tab-links { .tab-1.left .tab-links, .tab-1.right .tab-links {
margin: 0; margin: 0;
border: none; } border: none; }
.tab-1.left .tab-links li { .tab-1.left .tab-links li, .tab-1.right .tab-links li {
display: block; display: block;
margin-bottom: 20px; } margin-bottom: 20px; }
.tab-1.left .tab-links .active label { .tab-1.left .tab-links .active label, .tab-1.right .tab-links .active label {
border: 1px solid var(--box-border); } border: 1px solid var(--box-border); }
.tab-1.left .tab-content { .tab-1.left .tab-content, .tab-1.right .tab-content {
width: 100%; } width: 100%; }
.tab-2 { .tab-2 {
@ -4732,17 +4748,17 @@ section > h2 {
.tab-2 .tab-links .active a, .tab-2 .tab-links .active label { .tab-2 .tab-links .active a, .tab-2 .tab-links .active label {
color: var(--text-on-background-color-2); color: var(--text-on-background-color-2);
background: var(--button-colored-background); } background: var(--button-colored-background); }
.tab-2.left { .tab-2.left, .tab-2.right {
display: flex; } flex-direction: row; }
.tab-2.left .tab-links { .tab-2.left .tab-links, .tab-2.right .tab-links {
margin: 0; margin: 0;
border: none; } border: none; }
.tab-2.left .tab-links li { .tab-2.left .tab-links li, .tab-2.right .tab-links li {
display: block; display: block;
margin-bottom: 20px; } margin-bottom: 20px; }
.tab-2.left .tab-links .active label { .tab-2.left .tab-links .active label, .tab-2.right .tab-links .active label {
border: 1px solid var(--box-border); } border: 1px solid var(--box-border); }
.tab-2.left .tab-content { .tab-2.left .tab-content, .tab-2.right .tab-content {
width: 100%; } width: 100%; }
.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action { .order-up, .order-down, .remove-form, .update-form, .save-form, .form-action {

12
tab.scss
View File

@ -1,7 +1,7 @@
.tabview { .tabview {
.tab-links { .tab-links {
color: #000; color: #000;
padding: 0.3rem 0 0 0; padding: 5px 0 0 0;
label { label {
font-size: 0.9em; font-size: 0.9em;
@ -54,6 +54,10 @@
flex-direction: column; flex-direction: column;
} }
} }
&.right > .box {
order: 2;
}
} }
.tab-1 { .tab-1 {
@ -85,7 +89,7 @@
padding: 10px; padding: 10px;
} }
&.left { &.left, &.right {
display: flex; display: flex;
.tab-links { .tab-links {
@ -128,8 +132,8 @@
} }
} }
&.left { &.left, &.right {
display: flex; flex-direction: row;
.tab-links { .tab-links {
margin: 0; margin: 0;

2
tests/app/index.php
View File

@ -196,8 +196,8 @@
<label class="ham-trigger" for="nav-trigger"><i class="fa fa-bars p"></i></label> <label class="ham-trigger" for="nav-trigger"><i class="fa fa-bars p"></i></label>
<span role="search" class="inputWrapper"> <span role="search" class="inputWrapper">
<span class="textWrapper"> <span class="textWrapper">
<input id="iSearchBox" name="search" type="text" autofocus="autofocus">
<i class="frontIcon fa fa-search fa-lg fa-fw" aria-hidden="true"></i> <i class="frontIcon fa fa-search fa-lg fa-fw" aria-hidden="true"></i>
<input id="iSearchBox" name="search" type="text" autofocus="autofocus">
<i class="endIcon fa fa-times fa-lg fa-fw" aria-hidden="true"></i> <i class="endIcon fa fa-times fa-lg fa-fw" aria-hidden="true"></i>
</span> </span>
<input type="submit" id="iSearchButton" name="searchButton" value="Search"> <input type="submit" id="iSearchButton" name="searchButton" value="Search">