Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-11 11:18:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

new draft design

Browse Source
This commit is contained in:
Dennis Eichhorn 2020-05-30 15:38:02 +02:00
parent 301369cce9
commit 312f19715a
8 changed files with 113 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
breadcrumb.scss
View File

@ -1,4 +1,4 @@
.crumbs-1 { .crumbs-1, .crumbs-2 {
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
font-size: 1rem; font-size: 1rem;
@ -12,6 +12,46 @@
float: left; float: left;
cursor: pointer; cursor: pointer;
&:after, &:before {
content:" ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 14px solid #fff;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%;
}
&:after {
z-index: 2;
}
&:before {
border-left-color: var(--box-border);
margin-left: 1px;
z-index: 1;
}
&.active:after, &:hover:after {
border-left: 14px solid var(--button-colored-background-hover);
}
}
.active {
cursor: default;
}
.active, li:hover {
background: var(--button-colored-background-hover);
}
}
.crumbs-1 {
li {
&:not(:last-child):after, &:before { &:not(:last-child):after, &:before {
content:" "; content:" ";
display: block; display: block;
@ -26,16 +66,6 @@
left: 100%; left: 100%;
} }
&:not(:last-child):after {
z-index: 2;
}
&:before {
border-left-color: var(--box-border);
margin-left: 1px;
z-index: 1;
}
&.active:not(:last-child):after, &:hover:not(:last-child):after { &.active:not(:last-child):after, &:hover:not(:last-child):after {
border-left: 14px solid var(--button-colored-background-hover); border-left: 14px solid var(--button-colored-background-hover);
} }
@ -46,12 +76,4 @@
border: none; border: none;
} }
} }
}
.active {
cursor: default;
}
.active, li:hover {
background: var(--button-colored-background-hover);
}
}

9
button.scss
View File

@ -6,19 +6,18 @@
button, input[type="submit"], input[type="button"], a.button { button, input[type="submit"], input[type="button"], a.button {
cursor: pointer; cursor: pointer;
display: inline-flex;
min-width: 70px; min-width: 70px;
background: var(--button-colored-background); background: var(--button-colored-background);
color: var(--text-on-background-color-2); color: var(--text-on-background-color-2);
margin: 0; margin: 0;
padding: 0 1rem 0 1rem; padding: 0 1rem 0 1rem;
flex: 0; flex-grow: 0;
height: 32px; height: 32px;
line-height: 32px;
border: none; border: none;
box-shadow: none; box-shadow: none;
display: inline-block; justify-content: center;
text-align: center; align-items: center;
&:hover { &:hover {
background: var(--button-colored-background-hover); background: var(--button-colored-background-hover);

5
input.scss
View File

@ -224,11 +224,6 @@ input[type="range"] {
} }
} }
i {
position: relative;
vertical-align: middle;
}
input { input {
box-sizing: border-box; box-sizing: border-box;
font-size: 1rem; font-size: 1rem;

22
nav.scss
View File

@ -4,7 +4,7 @@ body > nav {
width: 250px; width: 250px;
overflow-y: auto; overflow-y: auto;
font-size: 0.8em; font-size: 0.8em;
background: linear-gradient(135deg, var(--nav-category-background-highlight), var(--nav-category-background)); background: var(--nav-category-background);
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
@ -13,6 +13,7 @@ body > nav {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid #4b5055;
span { span {
flex-grow: 1; flex-grow: 1;
@ -60,21 +61,38 @@ body > nav {
a { a {
display: block; display: block;
padding: .5rem 1rem .5rem 1rem; padding: .5rem 1rem .5rem 1rem;
border-left: 3px solid transparent;
&:hover { &:hover {
background: var(--nav-sub-background-hover); background: var(--nav-sub-background-hover);
border-left: 3px solid var(--nav-sub-background-highlight);
} }
} }
li { li {
&:not(:first-child) { &:not(:first-child) {
background: linear-gradient(to right, var(--nav-sub-background-highlight), var(--nav-sub-background)); background: var(--nav-sub-background);
} }
&:hover, &.active { &:hover, &.active {
background: var(--nav-category-background-hover); background: var(--nav-category-background-hover);
} }
} }
li:first-child {
border-bottom: 1px solid #212628;
}
li:first-child {
border-top: 1px solid #4b5055;
}
}
> li:first-child {
li:first-child {
border-top: none;
}
} }
i { i {

1
portlet.scss
View File

@ -4,6 +4,7 @@
box-sizing: border-box; box-sizing: border-box;
margin-top: 1rem; margin-top: 1rem;
overflow-x: auto; overflow-x: auto;
border-top: 3px solid var(--box-highlight);
.portlet-head { .portlet-head {
background: #fff; background: #fff;

72
styles.css
View File

@ -3741,9 +3741,6 @@ input[type="range"] {
flex-shrink: 0; } flex-shrink: 0; }
.input button:hover { .input button:hover {
background: var(--button-colored-background-hover); } background: var(--button-colored-background-hover); }
.input i {
position: relative;
vertical-align: middle; }
.input input { .input input {
box-sizing: border-box; box-sizing: border-box;
font-size: 1rem; font-size: 1rem;
@ -3836,11 +3833,11 @@ blockquote {
padding: 1rem; padding: 1rem;
box-sizing: border-box; } box-sizing: border-box; }
.crumbs-1 { .crumbs-1, .crumbs-2 {
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
font-size: 1rem; } font-size: 1rem; }
.crumbs-1 li { .crumbs-1 li, .crumbs-2 li {
background: #fff; background: #fff;
border: 1px solid var(--box-border); border: 1px solid var(--box-border);
padding: 10px 10px 10px 20px; padding: 10px 10px 10px 20px;
@ -3848,7 +3845,7 @@ blockquote {
display: block; display: block;
float: left; float: left;
cursor: pointer; } cursor: pointer; }
.crumbs-1 li:not(:last-child):after, .crumbs-1 li:before { .crumbs-1 li:after, .crumbs-1 li:before, .crumbs-2 li:after, .crumbs-2 li:before {
content: " "; content: " ";
display: block; display: block;
width: 0; width: 0;
@ -3860,38 +3857,53 @@ blockquote {
top: 50%; top: 50%;
margin-top: -20px; margin-top: -20px;
left: 100%; } left: 100%; }
.crumbs-1 li:not(:last-child):after { .crumbs-1 li:after, .crumbs-2 li:after {
z-index: 2; } z-index: 2; }
.crumbs-1 li:before { .crumbs-1 li:before, .crumbs-2 li:before {
border-left-color: var(--box-border); border-left-color: var(--box-border);
margin-left: 1px; margin-left: 1px;
z-index: 1; } z-index: 1; }
.crumbs-1 li.active:not(:last-child):after, .crumbs-1 li:hover:not(:last-child):after { .crumbs-1 li.active:after, .crumbs-1 li:hover:after, .crumbs-2 li.active:after, .crumbs-2 li:hover:after {
border-left: 14px solid var(--button-colored-background-hover); } border-left: 14px solid var(--button-colored-background-hover); }
.crumbs-1 :last-child:before { .crumbs-1 .active, .crumbs-2 .active {
border: none; }
.crumbs-1 .active {
cursor: default; } cursor: default; }
.crumbs-1 .active, .crumbs-1 li:hover { .crumbs-1 .active, .crumbs-1 li:hover, .crumbs-2 .active, .crumbs-2 li:hover {
background: var(--button-colored-background-hover); } background: var(--button-colored-background-hover); }
.crumbs-1 li:not(:last-child):after, .crumbs-1 li:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 14px solid #fff;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%; }
.crumbs-1 li.active:not(:last-child):after, .crumbs-1 li:hover:not(:last-child):after {
border-left: 14px solid var(--button-colored-background-hover); }
.crumbs-1 :last-child:before {
border: none; }
.btn { .btn {
cursor: pointer; } cursor: pointer; }
button, input[type="submit"], input[type="button"], a.button { button, input[type="submit"], input[type="button"], a.button {
cursor: pointer; cursor: pointer;
display: inline-flex;
min-width: 70px; min-width: 70px;
background: var(--button-colored-background); background: var(--button-colored-background);
color: var(--text-on-background-color-2); color: var(--text-on-background-color-2);
margin: 0; margin: 0;
padding: 0 1rem 0 1rem; padding: 0 1rem 0 1rem;
flex: 0; flex-grow: 0;
height: 32px; height: 32px;
line-height: 32px;
border: none; border: none;
box-shadow: none; box-shadow: none;
display: inline-block; justify-content: center;
text-align: center; } align-items: center; }
button:hover, input[type="submit"]:hover, input[type="button"]:hover, a.button:hover { button:hover, input[type="submit"]:hover, input[type="button"]:hover, a.button:hover {
background: var(--button-colored-background-hover); } background: var(--button-colored-background-hover); }
@ -3920,14 +3932,15 @@ body > nav {
width: 250px; width: 250px;
overflow-y: auto; overflow-y: auto;
font-size: 0.8em; font-size: 0.8em;
background: linear-gradient(135deg, var(--nav-category-background-highlight), var(--nav-category-background)); background: var(--nav-category-background);
color: rgba(255, 255, 255, 0.8); } color: rgba(255, 255, 255, 0.8); }
#nav-side { #nav-side {
flex: 0; flex: 0;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
box-sizing: border-box; } box-sizing: border-box;
border-top: 1px solid #4b5055; }
#nav-side span { #nav-side span {
flex-grow: 1; } flex-grow: 1; }
#nav-side input { #nav-side input {
@ -3954,13 +3967,21 @@ body > nav {
display: block; } display: block; }
#nav-side > li a { #nav-side > li a {
display: block; display: block;
padding: .5rem 1rem .5rem 1rem; } padding: .5rem 1rem .5rem 1rem;
border-left: 3px solid transparent; }
#nav-side > li a:hover { #nav-side > li a:hover {
background: var(--nav-sub-background-hover); } background: var(--nav-sub-background-hover);
border-left: 3px solid var(--nav-sub-background-highlight); }
#nav-side > li li:not(:first-child) { #nav-side > li li:not(:first-child) {
background: linear-gradient(to right, var(--nav-sub-background-highlight), var(--nav-sub-background)); } background: var(--nav-sub-background); }
#nav-side > li li:hover, #nav-side > li li.active { #nav-side > li li:hover, #nav-side > li li.active {
background: var(--nav-category-background-hover); } background: var(--nav-category-background-hover); }
#nav-side > li li:first-child {
border-bottom: 1px solid #212628; }
#nav-side > li li:first-child {
border-top: 1px solid #4b5055; }
#nav-side > li:first-child li:first-child {
border-top: none; }
#nav-side i { #nav-side i {
margin-right: 5px; margin-right: 5px;
flex-grow: 0; } flex-grow: 0; }
@ -4283,13 +4304,11 @@ section > h2 {
border-top: 1px solid var(--box-border); } border-top: 1px solid var(--box-border); }
.tab-2 .tab-links label { .tab-2 .tab-links label {
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px; }
border: 1px solid transparent; }
.tab-2 .tab-links li { .tab-2 .tab-links li {
margin: 0 5px 15px 0; } margin: 0 5px 15px 0; }
.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);
border: 1px solid var(--box-border);
background: var(--button-colored-background); } background: var(--button-colored-background); }
table.fixed { table.fixed {
@ -4423,7 +4442,8 @@ span.tag {
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 1rem; margin-top: 1rem;
overflow-x: auto; } overflow-x: auto;
border-top: 3px solid var(--box-highlight); }
.portlet .portlet-head { .portlet .portlet-head {
background: #fff; background: #fff;
border-top-left-radius: 4px; border-top-left-radius: 4px;

2
styles.scss
View File

@ -1,6 +1,4 @@
@import "clean", "default", "size", "transformation", "alignment", "visibility", "animate", "grid"; @import "clean", "default", "size", "transformation", "alignment", "visibility", "animate", "grid";
@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag"; @import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
@import "media"; @import "media";
@import "portlet"; @import "portlet";

2
tab.scss
View File

@ -112,7 +112,6 @@
.tab-links { .tab-links {
label { label {
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
border: 1px solid transparent; // fixes jumping text for active and non-active labels
} }
li { li {
@ -121,7 +120,6 @@
.active a, .active label { .active a, .active label {
color: var(--text-on-background-color-2); color: var(--text-on-background-color-2);
border: 1px solid var(--box-border);
background: var(--button-colored-background) background: var(--button-colored-background)
} }
} }