Theme/Tukan - color redesign (#2249)

This commit is contained in:
René
2021-03-10 17:33:16 +01:00
committed by GitHub
parent cea04d9795
commit e7eed12d7b
10 changed files with 3906 additions and 7935 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
PLUGIN_NAME= theme-tukan
PLUGIN_VERSION= 1.24
PLUGIN_VERSION= 1.25
PLUGIN_COMMENT= The tukan theme - blue/white
PLUGIN_MAINTAINER= rene@team-rebellion.net
@@ -11,7 +11,9 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
.bootstrap-select {
width: 348px \0;
/*IE9 and below*/
> {
.dropdown-toggle {
position: relative;
@@ -19,16 +21,20 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
z-index: 1;
text-align: right;
white-space: nowrap;
&.bs-placeholder {
color: #fff;
color: #000;
&:hover, &:focus, &:active {
color: #fff;
color: #000;
}
&.btn-primary, &.btn-secondary, &.btn-success, &.btn-danger, &.btn-info, &.btn-dark, &.btn-primary:hover, &.btn-secondary:hover, &.btn-success:hover, &.btn-danger:hover, &.btn-info:hover, &.btn-dark:hover, &.btn-primary:focus, &.btn-secondary:focus, &.btn-success:focus, &.btn-danger:focus, &.btn-info:focus, &.btn-dark:focus, &.btn-primary:active, &.btn-secondary:active, &.btn-success:active, &.btn-danger:active, &.btn-info:active, &.btn-dark:active {
color: #ffffff;
}
}
}
select {
position: absolute !important;
bottom: 0;
@@ -39,6 +45,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
padding: 0 !important;
opacity: 0 !important;
border: none;
&.mobile-device {
top: 0;
left: 0;
@@ -62,9 +69,11 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
&.fit-width {
width: auto !important;
}
&:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
width: 348px;
}
&.form-control {
margin-bottom: 0;
padding: 0;
@@ -79,15 +88,18 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
.bootstrap-select {
&.form-control.input-group-btn {
z-index: auto;
&:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
}
&:not(.input-group-btn), &[class*="col-"] {
float: none;
display: inline-block;
margin-left: 0;
}
&.dropdown-menu-right, &[class*="col-"].dropdown-menu-right {
float: right;
}
@@ -118,9 +130,11 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
line-height: inherit;
border-radius: inherit;
}
&.form-control-sm .dropdown-toggle {
padding: 0.25rem 0.5rem;
}
&.form-control-lg .dropdown-toggle {
padding: 0.5rem 1rem;
}
@@ -133,31 +147,38 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
.bootstrap-select {
&.disabled {
cursor: not-allowed;
&:focus {
outline: none !important;
}
}
> .disabled {
cursor: not-allowed;
}
> .disabled:focus {
outline: none !important;
}
&.bs-container {
position: absolute;
top: 0;
left: 0;
height: 0 !important;
padding: 0 !important;
.dropdown-menu {
z-index: 1060;
}
}
.dropdown-toggle {
&:before {
content: '';
display: inline-block;
}
.filter-option {
position: absolute;
top: 0;
@@ -170,12 +191,15 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
width: 100%;
text-align: left;
}
.filter-option-inner {
padding-right: inherit;
}
.filter-option-inner-inner {
overflow: hidden;
}
.caret {
position: absolute;
top: 50%;
@@ -194,14 +218,17 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
&[class*="col-"] .dropdown-toggle {
width: 100%;
}
.dropdown-menu {
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
> .inner:focus {
outline: none !important;
}
&.inner {
position: static;
float: none;
@@ -212,37 +239,46 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
-webkit-box-shadow: none;
box-shadow: none;
}
li {
position: relative;
&.active small {
color: rgba(255, 255, 255, 0.5) !important;
}
&.disabled a {
cursor: not-allowed;
}
a {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&.opt {
position: relative;
padding-left: 2.25em;
}
span {
&.check-mark {
display: none;
}
&.text {
display: inline-block;
}
}
}
small {
padding-left: 0.5em;
}
}
.notify {
position: absolute;
bottom: 5px;
@@ -261,27 +297,32 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
box-sizing: border-box;
}
}
.no-results {
padding: 3px;
background: #f5f5f5;
margin: 0 5px;
white-space: nowrap;
}
&.fit-width .dropdown-toggle {
.filter-option {
position: static;
display: inline;
padding: 0;
}
.filter-option-inner, .filter-option-inner-inner {
display: inline;
}
.caret {
position: static;
top: auto;
margin-top: -1px;
}
}
&.show-tick .dropdown-menu {
.selected span.check-mark {
position: absolute;
@@ -289,10 +330,12 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
right: 15px;
top: 5px;
}
li a span.text {
margin-right: 34px;
}
}
.bs-ok-default:after {
content: '';
display: block;
@@ -305,10 +348,12 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
&.show-menu-arrow {
&.open > .dropdown-toggle, &.show > .dropdown-toggle {
z-index: 1061;
}
.dropdown-toggle .filter-option {
&:before {
content: '';
@@ -320,6 +365,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
left: 9px;
display: none;
}
&:after {
content: '';
border-left: 6px solid transparent;
@@ -331,6 +377,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
display: none;
}
}
&.dropup .dropdown-toggle .filter-option {
&:before {
bottom: auto;
@@ -338,6 +385,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
border-top: 7px solid rgba(204, 204, 204, 0.2);
border-bottom: 0;
}
&:after {
bottom: auto;
top: -4px;
@@ -345,16 +393,19 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
border-bottom: 0;
}
}
&.pull-right .dropdown-toggle .filter-option {
&:before {
right: 12px;
left: auto;
}
&:after {
right: 13px;
left: auto;
}
}
&.open > .dropdown-toggle .filter-option:before, &.show > .dropdown-toggle .filter-option:before, &.open > .dropdown-toggle .filter-option:after, &.show > .dropdown-toggle .filter-option:after {
display: block;
}
@@ -370,6 +421,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.btn-group button {
width: 50%;
}
@@ -381,6 +433,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.btn-group button {
width: 100%;
}
@@ -390,6 +443,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
+ .bs-actionsbox {
padding: 0 8px 4px;
}
.form-control {
margin-bottom: 0;
width: 100%;
@@ -405,6 +459,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
.dropdown-menu > li > a {
padding: 3px 20px 3px 30px;
}
&.show-tick .dropdown-menu .selected span.check-mark {
left: 10px;
}
File diff suppressed because it is too large Load Diff
@@ -7,29 +7,34 @@
min-height: 34px;
cursor: text;
border-radius: 3px;
border: 1px solid #4d83a1;
border: 1px solid #a8a8a8;
background-color: #ffffff;
&.disabled {
background-color: #eee;
cursor: not-allowed;
}
}
&.focus > .tokens-container {
outline: 0;
border-color: #4d83a1;
border-color: #a8a8a8;
background-color: #FFFFFF;
-webkit-box-shadow: none;
box-shadow: none;
}
> .tokens-container {
&.input-sm {
padding: 0 0 4px 4px;
min-height: 30px;
}
&.input-lg {
padding: 0 0 9px 9px;
min-height: 46px;
}
> {
.token {
padding: 0 1.2em 0 5px;
@@ -43,6 +48,7 @@
position: relative;
vertical-align: middle;
}
.placeholder, .token-search {
display: inline-block;
margin: 5px 5px 0 0;
@@ -51,35 +57,42 @@
}
}
}
&.sortable > .tokens-container > .token {
cursor: move;
}
&.single > .tokens-container > .token {
display: block;
border-color: #fff;
background-color: transparent;
}
&.sortable > .tokens-container > .token.shadow {
border-color: #ccc;
background-color: #ccc;
filter: alpha(opacity = 50);
opacity: .2;
}
> .tokens-container {
> {
.placeholder {
color: #c9c9c9;
padding: 0;
}
.token-search {
color: #000;
padding: 0;
}
}
&:focus, &:hover {
border-color: #00A7FF;
border-color: #FF6E05;
background-color: #FFFFFF;
}
> .token-search > input {
padding: 0;
margin: 0;
@@ -88,35 +101,42 @@
border: none;
outline: none;
width: 100%;
&::-ms-clear {
display: none;
}
}
&.input-sm > {
.placeholder, .token-search, .token {
margin: 4px 4px 0 0;
}
}
&.input-lg > {
.placeholder, .token-search, .token {
margin: 9px 9px 0 0;
}
}
> .token {
&.pending-delete {
background-color: #5b72a4;
border-color: #425c96;
color: #fff;
> .dismiss {
color: #fff;
}
}
> .dismiss {
position: absolute;
right: 5px;
color: #a9b9d8;
text-decoration: none;
cursor: pointer;
&:after {
content: "×";
color: #000;
@@ -129,6 +149,7 @@
.tokenize-dropdown {
position: absolute;
display: none;
> .dropdown-menu {
min-height: 10px;
width: 100%;
@@ -136,11 +157,14 @@
margin: -1px 0 0 0;
visibility: visible;
opacity: 1;
li {
cursor: pointer;
> a .tokenize-highlight {
font-weight: bold;
}
&.locked {
padding: 3px 20px;
color: #333;
@@ -148,10 +172,12 @@
text-overflow: ellipsis;
overflow-x: hidden;
}
> a {
text-overflow: ellipsis;
overflow-x: hidden;
}
&:not(.active) a {
&:hover, &:focus {
background-color: transparent;
@@ -25,7 +25,7 @@ select.selectpicker {
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
color: #fff;
color: #000;
}
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary,
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary,
@@ -39,8 +39,8 @@
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu {
color: #fff;
background-color: #30596f;
color: #000;
background-color: #f0f0f0;
border-color: #1d1d1d;
text-align: left;
}
@@ -95,6 +95,7 @@
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
color:#FFF;
}
.bootgrid-table th > .column-header-anchor > .icon {
color: #000;
@@ -141,6 +142,7 @@
-o-text-overflow: inherit !important;
text-overflow: inherit !important;
white-space: inherit !important;
color: #FFF;
}
.table-responsive .bootgrid-table td {
overflow: inherit !important;
File diff suppressed because it is too large Load Diff
@@ -22,9 +22,9 @@
.pick-a-color-markup .color-menu .color-preview.violet{background-color:#ee81ee}
.pick-a-color-markup .color-menu .color-preview.purple{background-color:#80007f}
.pick-a-color-markup .color-menu .color-preview.black{background-color:#000}
.pick-a-color-markup .color-menu .basicColors-content li>a,.pick-a-color-markup .color-menu .savedColors-content li>a{padding:5px 15px 3px 15px;cursor:default;min-height:25px;color:#FFF}.pick-a-color-markup .color-menu .basicColors-content li>a:hover,.pick-a-color-markup .color-menu .savedColors-content li>a:hover{background-color:none}
.pick-a-color-markup .color-menu .basicColors-content li>a,.pick-a-color-markup .color-menu .savedColors-content li>a{padding:5px 15px 3px 15px;cursor:default;min-height:25px;color:#000}.pick-a-color-markup .color-menu .basicColors-content li>a:hover,.pick-a-color-markup .color-menu .savedColors-content li>a:hover{background-color:none}
@media screen and (max-width:991px){.pick-a-color-markup .color-menu .basicColors-content li>a,.pick-a-color-markup .color-menu .savedColors-content li>a{min-height:40px}}
.pick-a-color-markup .color-menu .basicColors-content li:hover a,.pick-a-color-markup .color-menu .savedColors-content li:hover a{color:#FFF;background-image:none;filter:none;text-decoration:none;font-weight:bold}@media screen and (max-width:991px){.pick-a-color-markup .color-menu .basicColors-content li:hover a,.pick-a-color-markup .color-menu .savedColors-content li:hover a{background-color:#fff;font-weight:normal}}
.pick-a-color-markup .color-menu .basicColors-content li:hover a,.pick-a-color-markup .color-menu .savedColors-content li:hover a{color:#000;background-image:none;filter:none;text-decoration:none;font-weight:bold}@media screen and (max-width:991px){.pick-a-color-markup .color-menu .basicColors-content li:hover a,.pick-a-color-markup .color-menu .savedColors-content li:hover a{background-color:#fff;font-weight:normal}}
.pick-a-color-markup .color-menu .btn.color-select{margin:0px 5px;height:20px;padding:0px 5px;margin-top:0px;line-height:1.5px;border-radius:4px}@media screen and (max-width:991px){.pick-a-color-markup .color-menu .btn.color-select{height:35px}}
.pick-a-color-markup .caret{margin-bottom:3px;color: #000;}
.pick-a-color-markup .color-menu-instructions,.pick-a-color-markup .advanced-instructions{text-align:center;padding:0px 6px;margin:0px;font-size:14px;font-weight:normal}@media screen and (min-width:992px){.pick-a-color-markup .color-menu-instructions,.pick-a-color-markup .advanced-instructions{display:none}}
@@ -6,8 +6,8 @@
min-height: 34px;
cursor: text;
border-radius: 3px;
border: 1px solid #4d83a1;
background-color: #ffffff;
border: 1px solid #a8a8a8;
background-color: #ffffff;
}
.tokenize > .tokens-container.disabled {
@@ -17,7 +17,7 @@
.tokenize.focus > .tokens-container {
outline: 0;
border-color:#4d83a1;
border-color:#a8a8a8;
background-color:#FFFFFF;
-webkit-box-shadow: none;
box-shadow: none;
@@ -80,7 +80,7 @@
.tokenize > .tokens-container:focus,
.tokenize > .tokens-container:hover {
border-color:#00A7FF;
border-color:#FF6E05;
background-color:#FFFFFF;
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB