init commit
This commit is contained in:
60
plugins/xframework/assets/styles/_animations.scss
Normal file
60
plugins/xframework/assets/styles/_animations.scss
Normal file
@ -0,0 +1,60 @@
|
||||
@import "_icons";
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(1turn) }
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
25%, 75% { opacity: 0; }
|
||||
}
|
||||
|
||||
@mixin spinner {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 1em;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
border: .2em solid;
|
||||
border-left-color: rgba(255, 255, 255, .2);
|
||||
border-bottom-color: rgba(255, 255, 255, .2);
|
||||
animation: spin 1s infinite;
|
||||
}
|
||||
|
||||
@mixin blinker {
|
||||
display: inline-block;
|
||||
animation: blink 2s infinite linear;
|
||||
}
|
||||
|
||||
button.busy {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include spinner;
|
||||
visibility: visible;
|
||||
position: absolute !important;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -.5em 0 0 -.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.xspinner:before {
|
||||
@include spinner;
|
||||
}
|
||||
|
||||
.animate-fade {
|
||||
opacity: 1;
|
||||
-moz-transition: opacity .25s ease-in-out;
|
||||
-webkit-transition: opacity .25s ease-in-out;
|
||||
transition: opacity .25s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-fade.ng-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
204
plugins/xframework/assets/styles/_colors.scss
Normal file
204
plugins/xframework/assets/styles/_colors.scss
Normal file
@ -0,0 +1,204 @@
|
||||
// This file provides mixins and functions that can be used to manipulate colors for dark/light modes.
|
||||
|
||||
@mixin text-color($important: false) {
|
||||
color: #333 unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { color: #c5d1d3 unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin text-highlight-color($important: false) {
|
||||
color: #141414 unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { color: #e5f1f3 unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin text-dim-color($important: false) {
|
||||
color: #777 unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { color: #6b787a unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin text-button-color($important: false) {
|
||||
color: #fff unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { color: #e2e8e9 unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin border-color($important: false) {
|
||||
border-color: #ddd unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { border-color: #4d6066 unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin border-strong-color($important: false) {
|
||||
border-color: #b2b2b2 unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { border-color: #8da4aa unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin border-highlight-color($important: false) {
|
||||
border-color: #aaa unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { border-color: #e5f1f3 unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin background-color($important: false) {
|
||||
background-color: #fff unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { background-color: #21292c unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin background-highlight-color($percent: 5, $important: false) {
|
||||
background-color: rgba(0, 0, 0, $percent / 100) unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { background-color: rgba(255, 255, 255, $percent / 100) unquote(if($important, "!important", "")) }
|
||||
}
|
||||
|
||||
@mixin background-error-color($important: false) {
|
||||
background-color: #ffcccc unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { background-color: #60252a unquote(if($important, "!important", "")) }
|
||||
}
|
||||
|
||||
@mixin background-badge-color($important: false) {
|
||||
background-color: #a7411f unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { background-color: #802824 unquote(if($important, "!important", "")) }
|
||||
}
|
||||
|
||||
@mixin background-button-color($important: false) {
|
||||
background-color: #37beff unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { background-color: #006a9d unquote(if($important, "!important", "")) }
|
||||
}
|
||||
|
||||
@mixin error-text-color($important: false) {
|
||||
color: #7e1c16 unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { color: #d57a70 unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin success-text-color($important: false) {
|
||||
color: #006600 unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { color: #82d57f unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin warning-text-color($important: false) {
|
||||
color: #7f6000 unquote(if($important, "!important", ""));
|
||||
html.dark-mode & { color: #d5bd96 unquote(if($important, "!important", "")); }
|
||||
}
|
||||
|
||||
@mixin page-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
@mixin popup {
|
||||
background-color: #fff;
|
||||
border: 1px solid #d4dbde;
|
||||
box-shadow: 3px 3px 5px #dcdedf;
|
||||
|
||||
html.dark-mode & {
|
||||
background-color: #161b1d;
|
||||
border-color: #4d6066;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin success-box {
|
||||
background-color: #E0F2F1;
|
||||
color: #006053;
|
||||
border: 1px solid #b0e3ca;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
|
||||
html.dark-mode & {
|
||||
background-color: #00553f;
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin error-box {
|
||||
background-color: #ffe5e5;
|
||||
color: #7e1c16;
|
||||
border: 1px solid #fcc3bb;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
|
||||
html.dark-mode & {
|
||||
background-color: #5a2417;
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin warning-box {
|
||||
background-color: #fef893;
|
||||
color: #795000;
|
||||
border: 1px solid #ffdf0e;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
|
||||
html.dark-mode & {
|
||||
background-color: #654f00;
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin info-box {
|
||||
background-color: #FFF3E0;
|
||||
border: 1px solid #FFAB91;
|
||||
color: #764a2c;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
|
||||
html.dark-mode & {
|
||||
background-color: #463813;
|
||||
color: #fff4f0;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@function hex-to-dec($string) {
|
||||
$hex: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
|
||||
$string: to-lower-case($string);
|
||||
$length: str-length($string);
|
||||
|
||||
$dec: 0;
|
||||
@for $i from 1 through $length {
|
||||
$factor: 1 + (15 * ($length - $i));
|
||||
$index: index($hex, str-slice($string, $i, $i));
|
||||
$dec: $dec + $factor * ($index - 1);
|
||||
}
|
||||
|
||||
@return $dec;
|
||||
}
|
||||
|
||||
@function dec-to-hex($d) {
|
||||
$hexVals: "a" "b" "c" "d" "e" "f";
|
||||
$base: 16;
|
||||
$quotient: $d;
|
||||
$result: "";
|
||||
@if $d == 0 {
|
||||
$result: "00";
|
||||
}
|
||||
@while $quotient != 0 {
|
||||
$mod: $quotient % $base;
|
||||
$quotient: floor($quotient / $base);
|
||||
@if $mod > 9 {
|
||||
$mod: nth($hexVals, $mod - 9);
|
||||
}
|
||||
@if $d < $base {
|
||||
$result: "0" + $mod;
|
||||
} @else {
|
||||
$result: $mod + $result;
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
@function hex-to-color($string) {
|
||||
@return rgb(
|
||||
hex-to-dec(str-slice($string, 1, 2)),
|
||||
hex-to-dec(str-slice($string, 3, 4)),
|
||||
hex-to-dec(str-slice($string, 5, 6))
|
||||
);
|
||||
}
|
||||
|
||||
@function color-to-hex($color) {
|
||||
@return dec-to-hex(red($color)) + dec-to-hex(green($color)) + dec-to-hex(blue($color))
|
||||
}
|
||||
629
plugins/xframework/assets/styles/_common.scss
Normal file
629
plugins/xframework/assets/styles/_common.scss
Normal file
@ -0,0 +1,629 @@
|
||||
// This file provides styles for common elements used in all skins.
|
||||
|
||||
@import "_colors";
|
||||
@import "_icons";
|
||||
@import "_animations";
|
||||
|
||||
@font-face {
|
||||
font-family: 'RcpIconFont';
|
||||
src: url('../../../../plugins/xframework/assets/fonts/roundcube_plus_icons/roundcube_plus_icons.woff2') format('woff2'),
|
||||
url('../../../../plugins/xframework/assets/fonts/roundcube_plus_icons/roundcube_plus_icons.woff') format('woff'),
|
||||
url('../../../../plugins/xframework/assets/fonts/roundcube_plus_icons/roundcube_plus_icons.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// boxes
|
||||
.success-box,
|
||||
.warning-box,
|
||||
.error-box,
|
||||
.info-box {
|
||||
padding: .8rem 1.5rem !important;
|
||||
margin: 0 0 1.5em 0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
top: 0.14rem;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1 1 auto;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.success-box { @include success-box; }
|
||||
.warning-box { @include warning-box; }
|
||||
.error-box { @include error-box; }
|
||||
.info-box { @include info-box; }
|
||||
|
||||
// buttons
|
||||
.button-bar {
|
||||
button, .btn {
|
||||
margin: .2em .2em .2em 0;
|
||||
}
|
||||
|
||||
&.text-right {
|
||||
button, .btn {
|
||||
margin: .2em 0 .2em .2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
// cpanel workaround for the jquery ui color picker that doesn't work
|
||||
.cpanel {
|
||||
.minicolors-sprite {
|
||||
background-image: url(../images/cpanel-minicolors-sprite.png) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// turn a button into an anchor--in elastic we can't put anchors into popups because it disables the popup trigger button if there are anchors (!)
|
||||
html body button.xanchor {
|
||||
display: inline-block;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
width: auto !important;
|
||||
line-height: normal !important;
|
||||
font-weight: normal !important;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
color: #00acff;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:hover {
|
||||
color: #008acc;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// password input with a hide/show button
|
||||
.password-toggle-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.password-toggle-button {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-left: .8rem;
|
||||
|
||||
&:before {
|
||||
@include icon($eye);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] + .password-toggle-button:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1.5em;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
transform-origin: center;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
// xsidebar
|
||||
|
||||
#xsidebar {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
div.ui-sortable-helper {
|
||||
-ms-transform: scale(0.8, 0.8);
|
||||
-webkit-transform: scale(0.8, 0.8);
|
||||
transform: scale(0.8, 0.8);
|
||||
border: 1px solid;
|
||||
@include border-color;
|
||||
@include background-color;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
height: 3px;
|
||||
background: #990033;
|
||||
}
|
||||
|
||||
h2.boxtitle {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
padding: 5px 8px;
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.sidebar-title-button {
|
||||
float: right;
|
||||
padding-left: 5px;
|
||||
padding-top: 1px;
|
||||
@include text-color;
|
||||
|
||||
&:hover {
|
||||
@include text-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
span.sidebar-title-text {
|
||||
display: block;
|
||||
margin-right: 2.5em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.box-content {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
line-height: unset;
|
||||
}
|
||||
|
||||
.collapsed .box-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom-links {
|
||||
margin-top: 7px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#xsidebar-order-note {
|
||||
padding: 20px 0;
|
||||
|
||||
&:before {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#xsidebar-order-table {
|
||||
.placeholder {
|
||||
@include background-highlight-color;
|
||||
}
|
||||
|
||||
tr.ui-sortable-helper {
|
||||
max-width: 300px !important;
|
||||
border: 1px solid;
|
||||
@include border-color;
|
||||
@include background-highlight-color;
|
||||
}
|
||||
|
||||
tr.ui-sortable-handle {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
&.title {
|
||||
width: 30%;
|
||||
|
||||
label {
|
||||
|
||||
&:before {
|
||||
font-size: 0.9em !important;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// information popups
|
||||
|
||||
.touch .xinfo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xinfo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&.right div {
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&.top div {
|
||||
top: auto;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
&:hover div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
display: none;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
font-weight: normal;
|
||||
top: 20px;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
z-index: 99999;
|
||||
white-space: normal;
|
||||
@include popup;
|
||||
}
|
||||
}
|
||||
|
||||
// badges (small red elements indicating numbers)
|
||||
|
||||
.xbadge {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -.9em;
|
||||
left: -.5em;
|
||||
z-index: 888;
|
||||
color: #fff !important;
|
||||
@include background-badge-color(true);
|
||||
margin: 0;
|
||||
line-height: 1em;
|
||||
padding: 3px 4px 2px 4px !important;
|
||||
border-radius: 5px !important;
|
||||
font-size: 0.8em !important;
|
||||
font-weight: normal;
|
||||
font-family: sans-serif !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// tabs
|
||||
|
||||
.xtabs.ui-tabs {
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
.ui-tabs-nav {
|
||||
height: auto;
|
||||
background: transparent;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-bottom: 1px solid;
|
||||
@include border-color;
|
||||
}
|
||||
|
||||
.ui-tabs-nav li {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: left;
|
||||
border: none;
|
||||
|
||||
.xbadge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-tabs-nav .ui-tabs-anchor {
|
||||
padding: 15px;
|
||||
font-weight: normal;
|
||||
background: transparent;
|
||||
border: none;
|
||||
@include text-color;
|
||||
}
|
||||
|
||||
.ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-bottom: 12px;
|
||||
font-weight: bold;
|
||||
border-bottom: 3px solid;
|
||||
@include border-highlight-color;
|
||||
}
|
||||
|
||||
.ui-tabs-panel {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// flatpickr
|
||||
|
||||
.flatpickr-calendar {
|
||||
box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08) !important;
|
||||
|
||||
.flatpickr-months {
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
|
||||
.flatpickr-prev-month,
|
||||
.flatpickr-next-month {
|
||||
line-height: 1.1rem;
|
||||
|
||||
&:hover svg {
|
||||
fill: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-current-month {
|
||||
input.cur-year {
|
||||
height: 1.4rem;
|
||||
}
|
||||
|
||||
span.cur-month {
|
||||
font-weight: normal;
|
||||
padding-right: 3px;
|
||||
|
||||
&:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-day.selected {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.numInputWrapper:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
&.hasTime .flatpickr-time {
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
|
||||
input:hover,
|
||||
input:focus,
|
||||
.flatpickr-am-pm:hover,
|
||||
.flatpickr-am-pm:focus {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-confirm {
|
||||
margin: 5px 10px;
|
||||
border-radius: 3px;
|
||||
height: auto;
|
||||
padding: 1px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.xelastic .flatpickr-calendar {
|
||||
.flatpickr-current-month input.cur-year,
|
||||
.flatpickr-current-month span.cur-month {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.flatpickr-day.selected,
|
||||
.flatpickr-confirm {
|
||||
background: #6e8791;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.xlarry .flatpickr-calendar {
|
||||
.flatpickr-current-month input.cur-year,
|
||||
.flatpickr-current-month span.cur-month {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.flatpickr-day.selected,
|
||||
.flatpickr-confirm {
|
||||
background: #2c2f33;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// responsive modal dialog; if not used in angular, set display: none on the mask in the instance css
|
||||
|
||||
.dark-mode .xdialog-mask {
|
||||
background: rgba(0, 0, 0, .7);
|
||||
}
|
||||
|
||||
.xdialog-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
z-index: 999;
|
||||
|
||||
.xdialog-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20% auto 0 auto;
|
||||
max-width: 460px;
|
||||
max-height: 90%;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid;
|
||||
@include border-color;
|
||||
@include background-color;
|
||||
|
||||
&.full-screen {
|
||||
position: fixed;
|
||||
max-width: None;
|
||||
margin: 0;
|
||||
max-height: none;
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
right: 5%;
|
||||
bottom: 5%;
|
||||
|
||||
.layout-phone & {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.xdialog-title {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid;
|
||||
@include border-color;
|
||||
|
||||
.xdialog-close {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
border: none !important;
|
||||
font-size: 2rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.xdialog-contents {
|
||||
flex: 1 1 auto;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
|
||||
.xdialog-error {
|
||||
@include error-box;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.xdialog-buttons {
|
||||
flex: 0 0 auto;
|
||||
padding: 1rem;
|
||||
text-align: right;
|
||||
border-top: 1px solid;
|
||||
@include border-color;
|
||||
|
||||
button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// the elastic skin adds margin, top, and left css styles to ui-datepicker to make sure that it always gets displayed in the middle of the
|
||||
// screen; we can't remove those styles, so instead, if we want to display the datepicker right under the text input, we remove the
|
||||
// ui-datepicker class and add the xdatepicker class, then we style the datepicker here
|
||||
.xdatepicker {
|
||||
min-width: 20rem;
|
||||
|
||||
.ui-datepicker-header {
|
||||
display: flex;
|
||||
padding: .6rem;
|
||||
align-items: center;
|
||||
margin-bottom: .8rem;
|
||||
font-size: 1.2em;
|
||||
border-bottom: 1px solid;
|
||||
@include border-color;
|
||||
|
||||
.ui-datepicker-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
select {
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 0 5px;
|
||||
width: auto;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none !important;
|
||||
|
||||
option {
|
||||
@include background-color;
|
||||
@include text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-prev,
|
||||
.ui-datepicker-next {
|
||||
@include text-color;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
padding: .3rem;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-prev:before {
|
||||
@include icon($chevronLeft);
|
||||
}
|
||||
|
||||
.ui-datepicker-next {
|
||||
order: 2;
|
||||
|
||||
&:before {
|
||||
@include icon($chevronRight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding: .2rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: .2rem 0;
|
||||
@include text-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.ui-state-highlight {
|
||||
@include text-highlight-color;
|
||||
@include background-highlight-color(10, true);
|
||||
}
|
||||
|
||||
&.ui-state-active {
|
||||
@include text-highlight-color;
|
||||
@include background-highlight-color(30, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: center;
|
||||
font-size: .8em;
|
||||
@include text-dim-color;
|
||||
}
|
||||
}
|
||||
66
plugins/xframework/assets/styles/_icons.scss
Normal file
66
plugins/xframework/assets/styles/_icons.scss
Normal file
@ -0,0 +1,66 @@
|
||||
// This file includes everything we need to use the icon functionality in the plugins
|
||||
|
||||
@import "_icons_map";
|
||||
|
||||
// Using a placeholder instead of a mixin because "@extend %icon-style" will group all the selectors together and apply the styles
|
||||
// only once, while using a mixin will repeat the styles for every selector where it's used.
|
||||
%icon-style {
|
||||
font-family: RcpIconFont, sans-serif !important;
|
||||
font-weight: normal !important;
|
||||
position: relative;
|
||||
background-image: none;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
// Includes the font family and the icon content in all the possible icon ranges.
|
||||
@mixin icon($icon, $important: false) {
|
||||
@extend %icon-style;
|
||||
@include icon-content($icon, $important);
|
||||
}
|
||||
|
||||
// Includes the icon characters in the content for all the available icon ranges.
|
||||
@mixin icon-content($icon, $important: false) {
|
||||
// default; applies also to elastic and larry
|
||||
content: icon-code($icon, 0) unquote(if($important, " !important", ""));
|
||||
|
||||
html.xicons-traditional & {
|
||||
content: icon-code($icon, 1) unquote(if($important, " !important", ""));
|
||||
}
|
||||
html.xicons-outlined & {
|
||||
content: icon-code($icon, 2) unquote(if($important, " !important", ""));
|
||||
}
|
||||
html.xicons-material & {
|
||||
content: icon-code($icon, 3)unquote(if($important, " !important", ""));
|
||||
}
|
||||
html.xicons-cartoon & {
|
||||
content: icon-code($icon, 4)unquote(if($important, " !important", ""));
|
||||
}
|
||||
}
|
||||
|
||||
// Converts the icon id (its position in the font) to the unicode character of where the icon is found in the font in the specified range
|
||||
// (icon style.) The icons in the font are located in the private character area starting at index 60,000. Each icon range (style) takes
|
||||
// 200 characters, so to find the correct range (style) start position + the icon id to get the icon character.
|
||||
@function icon-code($int, $icon-range) {
|
||||
$int: $int + 60000 + ($icon-range * 200);
|
||||
$hex: "A" "B" "C" "D" "E" "F";
|
||||
$base: 16;
|
||||
$quotient: $int;
|
||||
$result: "";
|
||||
@if $int == 0 {
|
||||
$result: "00";
|
||||
}
|
||||
@while $quotient != 0 {
|
||||
$mod: $quotient % $base;
|
||||
$quotient: floor($quotient / $base);
|
||||
@if $mod > 9 {
|
||||
$mod: nth($hex, $mod - 9);
|
||||
}
|
||||
@if $int < $base {
|
||||
$result: "0" + $mod;
|
||||
} @else {
|
||||
$result: $mod + $result;
|
||||
}
|
||||
}
|
||||
@return #{"\"\\"}#{$result + "\""};
|
||||
}
|
||||
|
||||
139
plugins/xframework/assets/styles/_icons_common.scss
Normal file
139
plugins/xframework/assets/styles/_icons_common.scss
Normal file
@ -0,0 +1,139 @@
|
||||
// This file adds RC+ icons to various common areas created by the RC+ plugins, like the sidebar, apps, menu, etc.
|
||||
// Applied to all skins, including elastic and larry.
|
||||
|
||||
@import "_icons";
|
||||
|
||||
// list of plugins and their icons
|
||||
// (we can't have the individual plugins add these, because a number of plugins only adds stylesheets to specific pages, like
|
||||
// settings, or mail, and the apps menu appears on all pages)
|
||||
$plugins: (
|
||||
xbackground: $picture,
|
||||
xcalendar: $calendar,
|
||||
xquote: $speechBubble,
|
||||
xdropbox: $dropbox,
|
||||
xgoogle_drive: $google,
|
||||
xlast_login: $userCircle,
|
||||
xnews_feed: $newspaper,
|
||||
xsidebar: $sidebar,
|
||||
xsignature: $signature,
|
||||
xskin: $skin,
|
||||
xvertical_preview: $columns,
|
||||
xweather: $sun,
|
||||
xtag: $code,
|
||||
xemail_schedule: $emailSchedule,
|
||||
x2fa: $lock,
|
||||
xai: $robot,
|
||||
xwebdav: $cloud,
|
||||
);
|
||||
|
||||
// information boxes and popups
|
||||
.xinfo:before,
|
||||
.xsave-hint:before{
|
||||
@include icon($information);
|
||||
}
|
||||
|
||||
// general use
|
||||
.xinformation:before { @include icon($information); }
|
||||
.xexclamation:before { @include icon($exclamation); }
|
||||
.xhelp:before { @include icon($help); }
|
||||
.xcheck:before { @include icon($checkSquare); }
|
||||
|
||||
// RC+ sidebar
|
||||
#show-mobile-xsidebar:before { @include icon($sidebar); }
|
||||
#xsidebar-menu a.hide:before { @include icon($chevronRight); }
|
||||
#show-xsidebar:before { @include icon($chevronLeft); }
|
||||
#xsidebar-order-table td.title label:before { @include icon($bars); }
|
||||
#xsidebar-order-note:before { @include icon($information); }
|
||||
#xsidebar .sidebar-settings-url:before { @include icon($gear); }
|
||||
#xsidebar .sidebar-toggle:before { @include icon($chevronUp); }
|
||||
#xsidebar .collapsed .sidebar-toggle:before { @include icon($chevronDown); }
|
||||
|
||||
// RC+ apps menu
|
||||
#button-apps:before { @include icon($gridSmall); }
|
||||
|
||||
@each $plugin, $icon in $plugins {
|
||||
#apps-menu a.app-item-#{$plugin} div.icon:before { @include icon($icon); }
|
||||
}
|
||||
|
||||
// RC+ plugins in settings list
|
||||
#settings-menu,
|
||||
#settings-tabs {
|
||||
a.x2fa:before { @include icon($lock); }
|
||||
a.xcpanel-settings:before { @include icon($envelopeClosed); }
|
||||
}
|
||||
|
||||
// RC+ plugins in apps menu and settings / preferences list
|
||||
@each $plugin, $icon in $plugins {
|
||||
#sections-table tr.#{$plugin} > td.section:before { @include icon($icon); }
|
||||
}
|
||||
|
||||
// icons in lists
|
||||
|
||||
.listing.iconized.selectable li a:before { content: ""; }
|
||||
.listing.iconized.selectable li a.selected:before { @include icon($check); }
|
||||
|
||||
.listing.iconized li {
|
||||
&.preferences > a:before { @include icon($wrench); }
|
||||
&.folders > a:before { @include icon($folder); }
|
||||
&.responses > a:before { @include icon($bookmark); }
|
||||
&.identities > a:before { @include icon($vcard); }
|
||||
&.password > a:before { @include icon($key); }
|
||||
&.addressbook a:before { @include icon($addressBook); }
|
||||
&.contactgroup a:before { @include icon($users); }
|
||||
&.contactsearch a:before { @include icon($search); }
|
||||
&.filter > a:before { @include icon($filter); }
|
||||
&.vacation > a:before { @include icon($clock); }
|
||||
&.forward > a:before { @include icon($forward); }
|
||||
&.enigma.keys > a:before { @include icon($key); }
|
||||
&.userinfo > a:before { @include icon($userCircle); }
|
||||
&.twofactorauth > a:before { @include icon($login); }
|
||||
&.cd_preferences > a:before { @include icon($users); }
|
||||
a.help:before { @include icon($help); }
|
||||
a.about:before { @include icon($information); }
|
||||
a.license:before { @include icon($shield); }
|
||||
& > i:before { @include icon($user); }
|
||||
&.group > i:before { @include icon($users); }
|
||||
}
|
||||
|
||||
.listing.iconized tr {
|
||||
&.contact.person td.name:before { @include icon($user); }
|
||||
&.contact.group td.name:before { @include icon($users); }
|
||||
&.general > td.section:before { @include icon($monitor); }
|
||||
&.mailbox > td.section:before { @include icon($envelopeClosed); }
|
||||
&.mailview > td.section:before { @include icon($inbox); }
|
||||
&.compose > td.section:before { @include icon($edit); }
|
||||
&.addressbook > td.section:before { @include icon($addressBook); }
|
||||
&.folders > td.section:before { @include icon($folder); }
|
||||
&.server > td.section:before { @include icon($disk); }
|
||||
&.enigma > td.section:before { @include icon($lock); }
|
||||
&.encryption > td.section:before { @include icon($lock); }
|
||||
&.calendar > td.section:before { @include icon($calendar); }
|
||||
}
|
||||
|
||||
// ****************** third-party plugins ******************
|
||||
|
||||
// managesieve
|
||||
.menu a {
|
||||
&.filterlink:before { @include icon($filter); }
|
||||
&.status:before { @include icon($lightbulb); }
|
||||
}
|
||||
|
||||
.action-plugin-managesieve-action {
|
||||
.propform td.rowbuttons a.advanced:before { @include icon($gear); }
|
||||
.propform td.rowbuttons a:before { @include icon($plus); }
|
||||
.propform td.rowbuttons a.delete:before { @include icon($trash); }
|
||||
}
|
||||
|
||||
// tasks
|
||||
.menu a.taskaddlink:before { @include icon($save); }
|
||||
|
||||
// thunderbird labels
|
||||
#sections-table tbody tr#rcmrowthunderbird_labels td.section:before { @include icon($labelDots); }
|
||||
|
||||
// carddav
|
||||
#sections-table tbody tr#rcmrowcd_preferences td.section:before { @include icon($userCircle); }
|
||||
|
||||
// twofactor_gauthenticator
|
||||
#settingstabplugintwofactor_gauthenticator a:before { @include icon($user); }
|
||||
#twofactor_gauthenticator-form .show-codes:before { @include icon($eye); }
|
||||
|
||||
387
plugins/xframework/assets/styles/_icons_elastic.scss
Normal file
387
plugins/xframework/assets/styles/_icons_elastic.scss
Normal file
@ -0,0 +1,387 @@
|
||||
// This file adds icons to RC+ skins only (body class .xskin)
|
||||
// It does not apply to Elastic itself.
|
||||
|
||||
@import "_icons";
|
||||
|
||||
.xskin {
|
||||
#taskmenu a {
|
||||
&.mail:before { @include icon($mail); }
|
||||
&.contacts:before { @include icon($user); }
|
||||
&.options:before { @include icon($wrench); }
|
||||
&.help:before { @include icon($help); }
|
||||
&.logout:before { @include icon($logout); }
|
||||
&.about:before { @include icon($information); }
|
||||
&.refresh:before { @include icon($refresh); }
|
||||
&.compose:before { @include icon($create); }
|
||||
&.calendar:before { @include icon($calendar); }
|
||||
&.tasklist:before { @include icon($list); }
|
||||
&.files:before { @include icon($textFile); }
|
||||
&.notes:before { @include icon($textFile); }
|
||||
}
|
||||
|
||||
.menu a {
|
||||
&.reply:before { @include icon($reply); }
|
||||
&.reply-all:before { @include icon($replyAll); }
|
||||
&.forward:before { @include icon($forward); }
|
||||
&.delete:before { @include icon($trash); }
|
||||
&.markmessage:before { @include icon($tag); }
|
||||
&.more:before { @include icon($more); }
|
||||
&.read:before { @include icon($envelopeOpen); }
|
||||
&.unread:before,
|
||||
&.expand.unread:before,
|
||||
&.select.unread:before{ @include icon($envelopeClosed); }
|
||||
&.flag:before { @include icon($flag); }
|
||||
&.unflag:before { @include icon($flagEmpty); }
|
||||
&.dropdown:before { @include icon($chevronDown); }
|
||||
&.options:before { @include icon($wrench); }
|
||||
&.settings:before { @include icon($gear); }
|
||||
&.create:before { @include icon($create); }
|
||||
&.move:before { @include icon($move); }
|
||||
&.purge:before { @include icon($eraser); }
|
||||
&.print:before { @include icon($print); }
|
||||
&.search:before { @include icon($search); }
|
||||
&.folders:before { @include icon($folder); }
|
||||
&.upload:before,
|
||||
&.import:before { @include icon($import); }
|
||||
&.download:before,
|
||||
&.export:before { @include icon($export); }
|
||||
&.compose:before { @include icon($create); }
|
||||
&.archive:before { @include icon($archive); }
|
||||
&.junk:before { @include icon($junk); }
|
||||
&.expunge:before { @include icon($compress); }
|
||||
&.enigma:before,
|
||||
&.encrypt:before { @include icon($lock); }
|
||||
&.firstpage:before { @include icon($firstPage); }
|
||||
&.prev:before { @include icon($prevPage); }
|
||||
&.next:before { @include icon($nextPage); }
|
||||
&.prevpage:before { @include icon($prevPage); }
|
||||
&.nextpage:before { @include icon($nextPage); }
|
||||
&.lastpage:before { @include icon($lastPage); }
|
||||
&.send:before { @include icon($send); }
|
||||
&.send.schedule:before { @include icon($emailSchedule); }
|
||||
&.scheduled:before { @include icon($scheduleList); }
|
||||
&.back:before { @include icon($arrowBack); }
|
||||
&.closewin:before { @include icon($times); }
|
||||
&.save:before { @include icon($save); }
|
||||
&.vcard:before,
|
||||
&.attach:before { @include icon($attachment); }
|
||||
&.spellcheck:before { @include icon($spellcheck); }
|
||||
&.signature:before { @include icon($signature); }
|
||||
&.responses:before { @include icon($bookmark); }
|
||||
&.select:before { @include icon($checkSquare); }
|
||||
&.threads:before { @include icon($speechBubble); }
|
||||
&.actions:before { @include icon($gear); }
|
||||
&.refresh:before { @include icon($refresh); }
|
||||
&.addto:before { @include icon($addUser); }
|
||||
&.addcc:before { @include icon($addUser); }
|
||||
&.addbcc:before { @include icon($addUser); }
|
||||
&.addressbook:before { @include icon($addressBook); }
|
||||
&.expand:before { @include icon($caretDown); }
|
||||
&.collapse:before { @include icon($caretUp); }
|
||||
&.submit:before { @include icon($check); }
|
||||
&.edit:before { @include icon($edit); }
|
||||
&.qrcode:before { @include icon($qrcode); }
|
||||
&.properties:before { @include icon($textFile); }
|
||||
&.zoomin:before { @include icon($zoomIn); }
|
||||
&.zoomout:before { @include icon($zoomOut); }
|
||||
&.rotate:before { @include icon($refresh); }
|
||||
&.markasjunk2:before { @include icon($junk); }
|
||||
&.markasjunk2Sel:before { @include icon($junk); }
|
||||
&.markasnotjunk2:before { @include icon($notjunk); }
|
||||
&#tb_label_popuplink:before { @include icon($labelDots); }
|
||||
&.source:before { @include icon($code); }
|
||||
&.copy:before { @include icon($copy); }
|
||||
&.extwin:before { @include icon($newWindow); }
|
||||
&.selection:before { @include icon($checkSquare, true); }
|
||||
&.select.all:before { @include icon($gridSmall); }
|
||||
&.select.none:before { @include icon($times); }
|
||||
&.select.page:before { @include icon($bars); }
|
||||
&.select.flagged:before { @include icon($flag); }
|
||||
&.select.unread:before { @include icon($envelopeClosed); }
|
||||
&.select.invert:before { @include icon($circleEmpty); }
|
||||
&.recipient:before { @include icon($envelopeClosed); }
|
||||
}
|
||||
|
||||
.toolbarmenu li {
|
||||
a.print:before { @include icon($print); }
|
||||
a.move:before { @include icon($move); }
|
||||
a.purge:before { @include icon($trash); }
|
||||
a.download:before { @include icon($download); }
|
||||
a.create:before { @include icon($create); }
|
||||
a.edit:before { @include icon($edit); }
|
||||
a.edit.asnew:before { @include icon($edit); }
|
||||
a.rename:before { @include icon($edit); }
|
||||
a.filterlink:before { @include icon($filter); }
|
||||
a.reply.list:before,
|
||||
a.reply.all:before { @include icon($replyAll); }
|
||||
a.forward:before,
|
||||
a.forward.bounce:before,
|
||||
a.forward.attachment:before,
|
||||
a.forward.inline:before { @include icon($forward); }
|
||||
a.download.mbox:before,
|
||||
a.download.eml:before,
|
||||
a.download.maildir:before { @include icon($download); }
|
||||
a.export.selection:before,
|
||||
a.export.all:before { @include icon($download); }
|
||||
a.expand.all:before,
|
||||
a.expand.unread:before,
|
||||
a.expand.none:before { @include icon($speechBubble); }
|
||||
a.search:before { @include icon($search); }
|
||||
a.delete:before { @include icon($trash); }
|
||||
a.import:before { @include icon($import); }
|
||||
a.settings:before { @include icon($wrench); }
|
||||
a.insertresponse:before { @include icon($speechBubble); }
|
||||
a.compose:before { @include icon($create); }
|
||||
a.addressbook:before { @include icon($user); }
|
||||
a.status:before { @include icon($lightbulb); }
|
||||
a.remove:before { @include icon($times); }
|
||||
a.showurl:before { @include icon($link); }
|
||||
a.qrcode:before { @include icon($qrcode); }
|
||||
a.assigngroup:before { @include icon($addUser); }
|
||||
a.removegroup:before { @include icon($removeUser); }
|
||||
a.vcard:before { @include icon($attachment); }
|
||||
a.encrypt:before { @include icon($lock); }
|
||||
a.encrypt.sign:before { @include icon($lock); }
|
||||
}
|
||||
|
||||
#message-header {
|
||||
.subject a.extwin:before { @include icon($newWindow); }
|
||||
.short-header div.header-links a {
|
||||
&.envelope:before { @include icon($envelopeClosed); }
|
||||
&.html:before { @include icon($code); }
|
||||
&.plain:before { @include icon($bars); }
|
||||
&.zipdownload:before { @include icon($download); }
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar a.button.search:before { @include icon($search); }
|
||||
|
||||
.header a {
|
||||
&.refresh:before { @include icon($refresh); }
|
||||
&.sidebar-menu,
|
||||
&.toolbar-list-button {
|
||||
&:before { @include icon($verticalMenu); }
|
||||
}
|
||||
}
|
||||
|
||||
.messagelist {
|
||||
tr.thread td.threads div:before { @include icon($chevronRight); }
|
||||
tr.thread.expanded td.threads div:before { @include icon($chevronDown); }
|
||||
//td.subject span.msgicon.status:before { @include icon($circleEmpty); }
|
||||
//td.subject span.msgicon.status.unread:before { @include icon($star); }
|
||||
td.subject span.msgicon.status.unreadchildren:before { @include icon($star); }
|
||||
td.subject span.msgicon.status.replied:before { @include icon($reply); }
|
||||
td.subject span.msgicon.status.forwarded:before { @include icon($forward); }
|
||||
td.subject span.msgicon.status.replied.forwarded:before { @include icon($repliedForwarded); }
|
||||
tr.deleted td.subject span.msgicon.status:before { @include icon($forbidden); }
|
||||
|
||||
span.attachment span {
|
||||
&:before { @include icon($attachment); }
|
||||
&.report:before { @include icon($textFile); }
|
||||
&.encrypted:before { @include icon($lock); }
|
||||
&.vcard:before { @include icon($user); }
|
||||
}
|
||||
|
||||
span.flagged:before { @include icon($flag); }
|
||||
tr:hover span.unflagged:before { @include icon($flag); }
|
||||
}
|
||||
|
||||
.folderlist li a:before,
|
||||
.listing.iconized li a:before,
|
||||
.listing.iconized tr td:before {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.settings-default-icon li>a:before,
|
||||
.settings-default-icon tr>td.section::before {
|
||||
@include icon($gear);
|
||||
}
|
||||
|
||||
.input-group .icon {
|
||||
&.user:before { @include icon($user); }
|
||||
&.pass:before { @include icon($lock); }
|
||||
&.host:before { @include icon($home); }
|
||||
&.cancel:before { @include icon($times); }
|
||||
&.delete:before { @include icon($trash); }
|
||||
&.edit:before { @include icon($edit); }
|
||||
&.add:before { @include icon($plus); }
|
||||
&.add.recipient:before { @include icon($users); }
|
||||
&.search:before { @include icon($search); }
|
||||
&.filter:before { @include icon($filter); }
|
||||
&.key:before { @include icon($lock); }
|
||||
}
|
||||
|
||||
.contactlist {
|
||||
td.contact:before { @include icon($user); }
|
||||
td.contactgroup:before { @include icon($users); }
|
||||
|
||||
li {
|
||||
a.addressbook::before { @include icon($addressBook); }
|
||||
a.contactgroup::before { @include icon($users); }
|
||||
}
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
form:before { @include icon($search); position: relative; top: 3px; }
|
||||
a.unread:before { @include icon($envelopeClosed); }
|
||||
a.options:before { @include icon($chevronDown); }
|
||||
&.open a.options:before { @include icon($chevronUp); }
|
||||
a.reset:before { @include icon($times); }
|
||||
}
|
||||
|
||||
ul.treelist li div.treetoggle {
|
||||
&:before { @include icon($chevronRight); }
|
||||
&.expanded:before { @include icon($chevronDown); }
|
||||
}
|
||||
|
||||
.folderlist li {
|
||||
a:before { @include icon($folder); }
|
||||
&.inbox > a:before { @include icon($inbox); }
|
||||
&.trash a:before { @include icon($trash); }
|
||||
&.trash.empty > a:before { @include icon($trash); }
|
||||
&.drafts a:before { @include icon($edit); }
|
||||
&.sent a:before { @include icon($send); }
|
||||
&.junk a:before { @include icon($junk); }
|
||||
&.archive > a:before { @include icon($archive); }
|
||||
&.type-event > a:before { @include icon($calendar); }
|
||||
&.type-task > a:before { @include icon($calendarShort); }
|
||||
&.type-journal > a:before { @include icon($calendar); }
|
||||
&.type-contact > a:before { @include icon($addressBook); }
|
||||
&.type-note > a:before { @include icon($textFile); }
|
||||
&.type-configuration > a:before { @include icon($gear); }
|
||||
&.type-freebusy > a:before { @include icon($calendar); }
|
||||
&.type-file > a:before { @include icon($textFile); }
|
||||
}
|
||||
|
||||
a.button.icon,
|
||||
button.btn {
|
||||
&.toolbar-menu-button:before { @include icon($verticalMenu); }
|
||||
&.task-menu-button:before { @include icon($bars); }
|
||||
&.back-sidebar-button:before,
|
||||
&.back-content-button:before,
|
||||
&.back-list-button:before { @include icon($chevronLeft); }
|
||||
&.generate:before,
|
||||
&.yes:before,
|
||||
&.submit:before,
|
||||
&.continue:before,
|
||||
&.save:before { @include icon($check); }
|
||||
&.create:before { @include icon($create); }
|
||||
&.edit:before { @include icon($edit); }
|
||||
&.qrcode:before { @include icon($qrcode); }
|
||||
&.search:before { @include icon($search); }
|
||||
&.filter:before { @include icon($filter); }
|
||||
&.import:before { @include icon($import); }
|
||||
&.export:before { @include icon($export); }
|
||||
&.discard:before,
|
||||
&.delete:before { @include icon($trash); }
|
||||
&.next:before { @include icon($nextPage); }
|
||||
&.restore:before { @include icon($undo); }
|
||||
&.send:before,
|
||||
&.bounce:before { @include icon($send); }
|
||||
&.attach:before { @include icon($attachment); }
|
||||
&.no:before,
|
||||
&.close:before,
|
||||
&.cancel:before { @include icon($times); }
|
||||
&.mark:before { @include icon($star); }
|
||||
&.back:before { @include icon($chevronLeft); }
|
||||
&.remove:before { @include icon($times); }
|
||||
&.unlock:before { @include icon($lock); }
|
||||
&.help:before { @include icon($help); }
|
||||
&.toggleselect:before { @include icon($check); }
|
||||
&.folders:before { @include icon($folder); }
|
||||
&.tools:before,
|
||||
&.settings:before { @include icon($wrench); }
|
||||
&.dropdown:before { @include icon($caretDown); }
|
||||
&.insert.recipient:before { @include icon($addUser); }
|
||||
}
|
||||
|
||||
.multi-input a.icon.reset:before { @include icon($trash); }
|
||||
.tagedit-list li.tagedit-listelement-old {
|
||||
a:before { @include icon($times); }
|
||||
}
|
||||
|
||||
.googie_list td {
|
||||
.googie_list_revert:before { @include icon($plus); }
|
||||
.googie_add_to_dict:before { @include icon($plus); }
|
||||
}
|
||||
|
||||
#identities-table td.mail:before { @include icon($vcard); }
|
||||
#responses-table td.name:before { @include icon($speechBubble); }
|
||||
#filterslist td.name:before { @include icon($filter); }
|
||||
#filtersetslist td.name:before { @include icon($textFile); }
|
||||
|
||||
.attachmentslist li {
|
||||
a.cancelupload:before,
|
||||
a.delete:before { @include icon($times); }
|
||||
}
|
||||
|
||||
.message-part,
|
||||
.message-htmlpart {
|
||||
blockquote span.blockquote-link {
|
||||
&:after { @include icon($chevronDown); }
|
||||
&.collapsed:after { @include icon($chevronUp); }
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-titlebar-close:before { @include icon($times); }
|
||||
|
||||
.image-tools .open a.button.icon.tools:before { @include icon($chevronLeft); }
|
||||
|
||||
.listing td.action a.pushgroup:before { @include icon($chevronRight); }
|
||||
|
||||
.popupmenu.toolbar.listing {
|
||||
.dropbutton a.button.dropdown:before { @include icon($chevronRight); }
|
||||
}
|
||||
|
||||
.pgpkeyimport {
|
||||
div.key label.keyid + a:before { @include icon($key); }
|
||||
li.uid:before { @include icon($user); }
|
||||
}
|
||||
|
||||
.floating-action-buttons a.button:before { @include icon($plus, 2); }
|
||||
|
||||
p.image-attachment .attachment-links {
|
||||
a.open:before { @include icon($newWindow); }
|
||||
a.download:before { @include icon($download); }
|
||||
}
|
||||
|
||||
.table-widget table.options-table {
|
||||
td.enabled span:before { @include icon($check); }
|
||||
td.partial span:before { @include icon($check); }
|
||||
}
|
||||
|
||||
table.table th.checkbox-cell {
|
||||
&.subscription:before { @include icon($rss); }
|
||||
&.alarm:before { @include icon($bell); }
|
||||
&.read:before { @include icon($eye); }
|
||||
&.write:before { @include icon($edit); }
|
||||
}
|
||||
|
||||
.special-buttons {
|
||||
a.theme.light:before { @include icon($lightMode); }
|
||||
a.theme.dark:before { @include icon($darkMode); }
|
||||
}
|
||||
|
||||
a.button.icon.extwin:before,
|
||||
button.btn.extwin:before {
|
||||
@include icon($newWindow);
|
||||
}
|
||||
|
||||
// html editor
|
||||
div.tox {
|
||||
:before { margin-top: 3px;}
|
||||
.tox-dialog__header .tox-button:before { @include icon($times); }
|
||||
.tox-dialog__footer .tox-button:before { @include icon($check); }
|
||||
.tox-dialog__footer .tox-button.tox-button--secondary:before { @include icon($times); }
|
||||
.tox-search-dialog .tox-dialog__footer-end button:before { @include icon($signature, true); }
|
||||
.tox-search-dialog .tox-dialog__footer-end button:nth-of-type(1):before { @include icon($search, true); }
|
||||
|
||||
.tox-dialog__footer .tox-tbtn.tox-tbtn--select {
|
||||
.tox-icon.tox-tbtn__icon-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__footer .tox-tbtn.tox-tbtn--select:before { @include icon($gear, 1.5); }
|
||||
}
|
||||
}
|
||||
236
plugins/xframework/assets/styles/_icons_larry.scss
Normal file
236
plugins/xframework/assets/styles/_icons_larry.scss
Normal file
@ -0,0 +1,236 @@
|
||||
// This file adds icons to RC+ skins only (body class .xskin)
|
||||
// It does not apply to Larry itself.
|
||||
|
||||
@import "_icons";
|
||||
|
||||
.xskin {
|
||||
&.xdesktop {
|
||||
#taskbar{
|
||||
a:before { @include icon($generic); font-size: 1.5em; } // default icon and size for taskbar
|
||||
a.button-mail:before { @include icon($mail); }
|
||||
a.button-addressbook:before { @include icon($user); }
|
||||
a.button-calendar:before { @include icon($calendar); }
|
||||
a.button-help:before { @include icon($help); }
|
||||
a.button-xresell:before { @include icon($plusSquare); }
|
||||
a.button-apps:before { @include icon($plusSquare); }
|
||||
a.button-settings:before { @include icon($wrench); }
|
||||
a.button-logout:before { @include icon($logout); }
|
||||
.minmodetoggle:before { @include icon($caretUp); }
|
||||
}
|
||||
|
||||
#topnav a.button-interface-options:before { @include icon($monitor); }
|
||||
#topnav a.button-cloud:before { @include icon($cloud); }
|
||||
#topnav a.button-tasklist:before { @include icon($spellcheck); }
|
||||
#topnav a.button-cpwebmail:before { @include icon($cPanel); }
|
||||
|
||||
.toolbar a.button:before { @include icon($generic); } // default icon and size for toolbar
|
||||
.toolbar a.button.checkmail:before { @include icon($refresh); }
|
||||
.toolbar a.button.compose:before { @include icon($create); }
|
||||
.toolbar a.button.reply:before { @include icon($reply); }
|
||||
.toolbar a.button.reply-all:before { @include icon($replyAll); }
|
||||
.toolbar a.button.forward:before { @include icon($forward); }
|
||||
.toolbar a.button.delete:before { @include icon($trash); }
|
||||
.toolbar a.button.archive:before { @include icon($archive); }
|
||||
.toolbar a.button.junk:before { @include icon($junk); }
|
||||
.toolbar a.button.markmessage:before { @include icon($tag); }
|
||||
.toolbar a.button.more:before { @include icon($more); }
|
||||
.toolbar a.button.back:before { @include icon($arrowBack); }
|
||||
.toolbar a.button.close:before { @include icon($arrowBack); }
|
||||
.toolbar a.button.download:before { @include icon($download); }
|
||||
.toolbar a.button.move:before { @include icon($folder); }
|
||||
.toolbar a.button.print:before { @include icon($print); }
|
||||
.toolbar a.button.send:before { @include icon($send); }
|
||||
.toolbar a.button.send.schedule:before { @include icon($emailSchedule); }
|
||||
.toolbar a.button.scheduled:before { @include icon($scheduleList); }
|
||||
.toolbar a.button.savedraft:before { @include icon($save); }
|
||||
.toolbar a.button.spellcheck:before { @include icon($spellcheck); }
|
||||
.toolbar a.button.attach:before { @include icon($attachment); }
|
||||
.toolbar a.button.insertsig:before { @include icon($signature); }
|
||||
.toolbar a.button.responses:before { @include icon($bookmark); }
|
||||
.toolbar a.button.vcard_send:before { @include icon($vcard); }
|
||||
.toolbar a.button.import:before { @include icon($import); }
|
||||
.toolbar a.button.export:before { @include icon($export); }
|
||||
.toolbar a.button.search:before { @include icon($search); }
|
||||
.toolbar a.button.markasjunk2:before { @include icon($junk); }
|
||||
.toolbar a.button.markasjunk2Sel:before { @include icon($junk); }
|
||||
.toolbar a.button.markasnotjunk2:before { @include icon($notjunk); }
|
||||
.toolbar a.button.enigma:before { @include icon($lock); }
|
||||
.toolbar a.button.encrypt:before { @include icon($lock); }
|
||||
.toolbar a.button.message-list-sort:before { @include icon($sortAsc); }
|
||||
.toolbar a#tb_label_popuplink:before { @include icon($labelDots); }
|
||||
|
||||
.toolbarmenu.selectable li a.selected:before { @include icon($check); }
|
||||
.dropbutton .dropbuttontip:before { @include icon($caretDown); }
|
||||
div.expanded:before { @include icon($minus); }
|
||||
div.collapsed:before { @include icon($plus); }
|
||||
a.menuselector:after { @include icon($caretDown); }
|
||||
|
||||
.boxfooter .listbutton.groupactions:before { @include icon($gear); font-size: 1.6em; }
|
||||
.boxfooter .listbutton.add:before { @include icon($plus); font-size: 1.6em; }
|
||||
.boxfooter .listbutton.delete:before { @include icon($times); font-size: 1.6em; }
|
||||
.boxfooter .listbutton.removegroup:before { @include icon($unlink); font-size: 1.6em; }
|
||||
|
||||
.boxpagenav a.icon.firstpage:before { @include icon($firstPage); }
|
||||
.boxpagenav a.icon.lastpage:before { @include icon($lastPage); }
|
||||
.boxpagenav a.icon.prevpage:before { @include icon($prevPage); }
|
||||
.boxpagenav a.icon.nextpage:before { @include icon($nextPage); }
|
||||
.compose-headers .iconbutton.cancel:before { @include icon($times); }
|
||||
.records-table tr td.threads div.listmenu:before,
|
||||
.records-table tr th.threads a.listmenu:before { @include icon($gear); }
|
||||
.records-table thead tr .status span.status:before { @include icon($star); }
|
||||
.records-table thead tr .priority span.priority:before { @include icon($exclamation); }
|
||||
.messagelist tr:hover td.status span:before { @include icon($star); color: #bbb !important; }
|
||||
.messagelist tr:hover .flag span:before { @include icon($flag); color: #bbb; }
|
||||
.messagelist tr .status span.unread:before { @include icon($star); }
|
||||
.messagelist tr .flag span.flagged:before { @include icon($flag); }
|
||||
.messagelist tr .attachment span.attachment:before { @include icon($attachment); }
|
||||
.messagelist tr .attachment span.report:before { @include icon($textFile); }
|
||||
.messagelist tr .priority span.prio1:before { @include icon($arrowUpCircle); }
|
||||
.messagelist tr .priority span.prio2:before { @include icon($arrowUpCircle); }
|
||||
.messagelist tr .priority span.prio4:before { @include icon($arrowDownCircle); }
|
||||
.messagelist tr .priority span.prio5:before { @include icon($arrowDownCircle); }
|
||||
.messagelist tr td.status span.deleted:before { @include icon($times); }
|
||||
.messagelist tr td.status span.unreadchildren:before { @include icon($star); }
|
||||
.messagelist tr td.subject span.deleted:before { @include icon($times); }
|
||||
.messagelist tr td.subject span.unread:before { @include icon($star); }
|
||||
.messagelist tr td.subject span.replied:before { @include icon($reply); }
|
||||
.messagelist tr td.subject span.forwarded:before { @include icon($forward); }
|
||||
.messagelist tr td.subject span.replied.forwarded:before { @include icon($repliedForwarded); }
|
||||
.messagelist tr td.subject span.unreadchildren:before { @include icon($star); }
|
||||
.records-table thead tr .sortedASC a:after { @include icon($sortAsc); }
|
||||
.records-table thead tr .sortedDESC a:after { @include icon($sortDesc); }
|
||||
#messagestack div:after { @include icon($exclamation); }
|
||||
#messagestack div.error:after { @include icon($times); }
|
||||
#messagestack div.warning:after { @include icon($exclamation); }
|
||||
#messagestack div.confirmation:after { @include icon($check); }
|
||||
#searchmenulink:before { @include icon($search); }
|
||||
#quicksearchbar #searchmenulink:before { @include icon($search); white-space: nowrap; }
|
||||
#searchreset:before { @include icon($times); }
|
||||
#maillistmode:before { @include icon($bars); }
|
||||
#mailthreadmode:before { @include icon($speechBubble); }
|
||||
.fullheight #mailpreviewtoggle:before { @include icon($arrowUp); }
|
||||
#mailpreviewtoggle:before { @include icon($arrowDown); }
|
||||
#custom-login-submit:before { @include icon($arrowRightCircle); }
|
||||
|
||||
#xsidebar-button:before { @include icon($caretRight); }
|
||||
&.xsidebar-visible #xsidebar-button:before { @include icon($caretLeft); }
|
||||
|
||||
.mailbox > a:before { @include icon($folder); }
|
||||
.mailbox.inbox > a:before { @include icon($inbox); }
|
||||
.mailbox.sent > a:before { @include icon($folder); }
|
||||
.mailbox.drafts > a:before { @include icon($create); }
|
||||
.mailbox.trash > a:before { @include icon($trash); }
|
||||
.mailbox.archive > a:before { @include icon($archive); }
|
||||
.mailbox.junk > a:before { @include icon($junk); }
|
||||
.mailbox.spam > a:before { @include icon($junk); }
|
||||
|
||||
// plugins
|
||||
#helptoolbar a.button.help:before { @include icon($help); }
|
||||
#helptoolbar a.button.about:before { @include icon($question); }
|
||||
#helptoolbar a.button.license:before { @include icon($list); }
|
||||
#notestoolbar a.button#newnote:before { @include icon($create); }
|
||||
#notestoolbar a.button#addnote:before { @include icon($export); }
|
||||
.edit-alarm-buttons a.add-alarm:before { @include icon($plusCircle); }
|
||||
.edit-alarm-buttons a.delete-alarm:before { @include icon($minusCircle); }
|
||||
}
|
||||
|
||||
&.xdesktop.minimal #taskbar .minmodetoggle:before { @include icon($caretDown); }
|
||||
|
||||
&.xdesktop.xvertical-preview {
|
||||
.fullheight #mailpreviewtoggle:before { @include icon($arrowLeft); }
|
||||
#mailpreviewtoggle:before { @include icon($arrowRight); }
|
||||
}
|
||||
|
||||
&.skin-icloud #login-form {
|
||||
.box-bottom #message div.warning:before { @include icon($exclamation); }
|
||||
.box-bottom #message div.error:before { @include icon($exclamation); }
|
||||
.box-bottom #message div.loading:before { @include icon($information); }
|
||||
.box-bottom #message div.notice:before { @include icon($information); }
|
||||
}
|
||||
|
||||
&.xmobile {
|
||||
#main-menu a span:before { @include icon($generic); font-size: 2em; }
|
||||
#main-menu #button-taskbar span:before { @include icon($bars); }
|
||||
#main-menu #button-mail-back span:before { @include icon($arrowLeftCircle); }
|
||||
#main-menu #button-compose-settings span:before { @include icon($gear); }
|
||||
#main-menu #button-send span:before { @include icon($send); }
|
||||
#main-menu #button-reply span:before { @include icon($reply); }
|
||||
#main-menu #button-toolbar span:before { @include icon($options); }
|
||||
#main-menu #button-format span:before { @include icon($code); }
|
||||
#main-menu #button-compose span:before { @include icon($create); }
|
||||
#main-menu #button-users span:before { @include icon($user); }
|
||||
#main-menu #button-folders span:before { @include icon($folder); }
|
||||
#main-menu #button-mail span:before { @include icon($options); }
|
||||
#main-menu #button-funnel span:before { @include icon($gear); }
|
||||
.popup-close a:before { @include icon($chevronLeftCircle); font-size: 2em; }
|
||||
.toolbarmenu.selectable li a.selected:before { @include icon($check); }
|
||||
|
||||
#mailboxlist li div.collapsed:before,
|
||||
#directorylist li.addressbook div.collapsed:before,
|
||||
div.collapsed:before { @include icon($caretRight); font-size: 2em; }
|
||||
|
||||
#mailboxlist li div.expanded:before,
|
||||
#directorylist li.addressbook div.expanded:before,
|
||||
div.expanded:before { @include icon($caretDown); font-size: 2em; }
|
||||
|
||||
#messagelist td.subject:before { @include icon($check); }
|
||||
#messagelist td.flag span.flagged:before { @include icon($flag); }
|
||||
#messagelist td.status span.unread:before { @include icon($star); }
|
||||
#messagelist td.attachment span.attachment:before { @include icon($attachment); }
|
||||
#messagelist td.attachment span.report:before { @include icon($textFile); }
|
||||
#messagelist td.subject span.msgicon.replied:before { @include icon($reply); }
|
||||
#messagelist td.subject span.msgicon.forwarded:before { @include icon($forward); }
|
||||
#messagelist td.subject span.msgicon.replied.forwarded:before { @include icon($repliedForwarded); }
|
||||
.moreheaderstoggle.remove .iconlink:before { @include icon($chevronUp); }
|
||||
.moreheaderstoggle .iconlink:before { @include icon($chevronDown); }
|
||||
#full-headers .more-headers.show-headers:before { @include icon($chevronDownCircle); }
|
||||
#full-headers .more-headers.hide-headers:before { @include icon($chevronUpCircle); }
|
||||
#attachment-list .delete:before { @include icon($times); }
|
||||
#attachment-list .drop:before { @include icon($chevronDownCircle); }
|
||||
.rcmaddcontact:before { @include icon($user); }
|
||||
.settings-button:nth-child(3) span:before { @include icon($wrench); }
|
||||
.settings-button:nth-child(4) span:before { @include icon($gridLarge); }
|
||||
#messagestack div:after { @include icon($exclamation); }
|
||||
#messagestack div.error:after { @include icon($times); }
|
||||
#messagestack div.warning:after { @include icon($exclamation); }
|
||||
#messagestack div.confirmation:after { @include icon($check); }
|
||||
#messagestack div.loading:after { content: ""; }
|
||||
a.firstpage:before { @include icon($firstPage); }
|
||||
a.prevpage:before { @include icon($prevPage); }
|
||||
a.nextpage:before { @include icon($nextPage); }
|
||||
a.lastpage:before { @include icon($lastPage); }
|
||||
#messageheader .pagenav a.prevpage:before { @include icon($arrowUp); }
|
||||
#messageheader .pagenav a.nextpage:before { @include icon($arrowDown); }
|
||||
#login-menu-button:before { @include icon($bars); }
|
||||
#custom-login-submit:before { @include icon($arrowRightCircle); }
|
||||
|
||||
#groupoptionslink span.inner:before { @include icon($gear); }
|
||||
#keyoptionslink span.inner:before { @include icon($gear); }
|
||||
a.listbutton.add span.inner:before { @include icon($plus); }
|
||||
a.listbutton.delete span.inner:before { @include icon($minus); }
|
||||
a.listbutton.removegroup span.inner:before { @include icon($unlink); }
|
||||
|
||||
#quotadisplay:before { @include icon($disk); }
|
||||
|
||||
// gestures
|
||||
.message-action-links a.mal-flag:before { @include icon($flagEmpty); }
|
||||
.message-action-links a.mal-unflag:before { @include icon($flag); }
|
||||
.message-action-links a.mal-more:before { @include icon($bars); }
|
||||
.message-action-links a.mal-delete:before { @include icon($times); }
|
||||
.message-action-read:before { @include icon($envelopeClosed); }
|
||||
.message-action-read.unread:before { @include icon($envelopeOpen); }
|
||||
#mainscreen.refresh:before { @include icon($refresh); }
|
||||
#mainscreen.progress:before { @include icon($refresh); }
|
||||
#mailview-right.gesture-pan.prev:before { @include icon($arrowLeft); }
|
||||
#mailview-right.gesture-pan.next:before { @include icon($arrowRight); }
|
||||
#mailview-right.gesture-pan.disabled:before { @include icon($forbidden); }
|
||||
|
||||
// plugins
|
||||
#filtersetmenulink:before,
|
||||
#filtermenulink:before { @include icon($gear); }
|
||||
|
||||
#helptoolbar a.button.help:before { @include icon($help); }
|
||||
#helptoolbar a.button.about:before { @include icon($question); }
|
||||
#helptoolbar a.button.license:before { @include icon($list); }
|
||||
}
|
||||
}
|
||||
169
plugins/xframework/assets/styles/_icons_map.scss
Normal file
169
plugins/xframework/assets/styles/_icons_map.scss
Normal file
@ -0,0 +1,169 @@
|
||||
|
||||
// icon ranges
|
||||
$xicons-solid: 0;
|
||||
$xicons-traditional: 1;
|
||||
$xicons-outlined: 2;
|
||||
$xicons-material: 3;
|
||||
$xicons-cartoon: 4;
|
||||
|
||||
// icon ids
|
||||
$arrowLeft: 0;
|
||||
$arrowRight: 1;
|
||||
$arrowUp: 2;
|
||||
$arrowDown: 3;
|
||||
$arrowLeftCircle: 4;
|
||||
$arrowRightCircle: 5;
|
||||
$arrowUpCircle: 6;
|
||||
$arrowDownCircle: 7;
|
||||
$chevronLeft: 8;
|
||||
$chevronRight: 9;
|
||||
$chevronUp: 10;
|
||||
$chevronDown: 11;
|
||||
$chevronLeftCircle: 12;
|
||||
$chevronRightCircle: 13;
|
||||
$chevronUpCircle: 14;
|
||||
$chevronDownCircle: 15;
|
||||
$caretLeft: 16;
|
||||
$caretRight: 17;
|
||||
$caretUp: 18;
|
||||
$caretDown: 19;
|
||||
$firstPage: 20;
|
||||
$prevPage: 21;
|
||||
$nextPage: 22;
|
||||
$lastPage: 23;
|
||||
$times: 24;
|
||||
$timesCircle: 25;
|
||||
$plus: 26;
|
||||
$plusSquare: 27;
|
||||
$plusCircle: 28;
|
||||
$minus: 29;
|
||||
$minusSquare: 30;
|
||||
$minusCircle: 31;
|
||||
$check: 32;
|
||||
$checkSquare: 33;
|
||||
$sortAsc: 34;
|
||||
$sortDesc: 35;
|
||||
$exclamation: 36;
|
||||
$information: 37;
|
||||
$question: 38;
|
||||
$import: 39;
|
||||
$export: 40;
|
||||
$gridLarge: 41;
|
||||
$gridSmall: 42;
|
||||
$list: 43;
|
||||
$mail: 44;
|
||||
$user: 45;
|
||||
$wrench: 46;
|
||||
$gear: 47;
|
||||
$logout: 48;
|
||||
$refresh: 49;
|
||||
$reply: 50;
|
||||
$replyAll: 51;
|
||||
$forward: 52;
|
||||
$archive: 53;
|
||||
$trash: 54;
|
||||
$recycle: 55;
|
||||
$tag: 56;
|
||||
$more: 57;
|
||||
$download: 58;
|
||||
$folder: 59;
|
||||
$print: 60;
|
||||
$send: 61;
|
||||
$save: 62;
|
||||
$spellcheck: 63;
|
||||
$attachment: 64;
|
||||
$create: 65;
|
||||
$edit: 66;
|
||||
$signature: 67;
|
||||
$bookmark: 68;
|
||||
$vcard: 69;
|
||||
$search: 70;
|
||||
$bars: 71;
|
||||
$code: 72;
|
||||
$unlink: 73;
|
||||
$star: 74;
|
||||
$flag: 75;
|
||||
$flagEmpty: 76;
|
||||
$textFile: 77;
|
||||
$repliedForwarded: 78;
|
||||
$speechBubble: 79;
|
||||
$forbidden: 80;
|
||||
$clock: 81;
|
||||
$share: 82;
|
||||
$circleEmpty: 83;
|
||||
$calendar: 84;
|
||||
$calendarShort: 85;
|
||||
$calendarList: 86;
|
||||
$calendarDay: 87;
|
||||
$help: 88;
|
||||
$repeat: 89;
|
||||
$options: 90;
|
||||
$generic: 91;
|
||||
$lock: 92;
|
||||
$envelopeClosed: 93;
|
||||
$envelopeOpen: 94;
|
||||
$monitor: 95;
|
||||
$sortAsc: 96;
|
||||
$sortDesc: 97;
|
||||
$inbox: 98;
|
||||
$spinner: 99;
|
||||
$picture: 100;
|
||||
$dropbox: 101;
|
||||
$google: 102;
|
||||
$userCircle: 103;
|
||||
$newspaper: 104;
|
||||
$sun: 105;
|
||||
$home: 106;
|
||||
$sidebar: 107;
|
||||
$columns: 108;
|
||||
$skin: 109;
|
||||
$alignLeft: 110;
|
||||
$alignCenter: 111;
|
||||
$alignRight: 112;
|
||||
$dot: 113;
|
||||
$disk: 114;
|
||||
$junk: 115;
|
||||
$notjunk: 116;
|
||||
$dotMenu: 117;
|
||||
$filter: 118;
|
||||
$newWindow: 119;
|
||||
$starEmpty: 120;
|
||||
$move: 121;
|
||||
$copy: 122;
|
||||
$addUser: 123;
|
||||
$removeUser: 124;
|
||||
$qrcode: 125;
|
||||
$addressBook: 126;
|
||||
$verticalMenu: 127;
|
||||
$zoomIn: 128;
|
||||
$zoomOut: 129;
|
||||
$lightbulb: 130;
|
||||
$compress: 131;
|
||||
$link: 132;
|
||||
$users: 133;
|
||||
$shield: 134;
|
||||
$login: 135;
|
||||
$key: 136;
|
||||
$undo: 137;
|
||||
$bell: 138;
|
||||
$eye: 139;
|
||||
$rss: 140;
|
||||
$labelDots: 141;
|
||||
$cloud: 142;
|
||||
$connections: 143;
|
||||
$emailSchedule: 144;
|
||||
$scheduleList: 145;
|
||||
$repliedForwarded: 146;
|
||||
$cPanel: 147;
|
||||
$phone: 148;
|
||||
$yubikey: 149;
|
||||
$lightMode: 150;
|
||||
$darkMode: 151;
|
||||
$googleDrive: 152;
|
||||
$robot: 153;
|
||||
$eraser: 154;
|
||||
$box: 155;
|
||||
$world: 156;
|
||||
|
||||
// aliases: these can be changed in the icons font if need be (icons_ios, icons_awesome)
|
||||
$arrowBack: $arrowLeftCircle;
|
||||
167
plugins/xframework/assets/styles/_icons_styles.scss
Normal file
167
plugins/xframework/assets/styles/_icons_styles.scss
Normal file
@ -0,0 +1,167 @@
|
||||
// This file adds xicon styles for all the icons in all the styles.
|
||||
// It is currently not used, since all the icon functions are available for all
|
||||
// the plugins to use and it increases the size of the final css files by ~70kB.
|
||||
|
||||
@import "_icons";
|
||||
|
||||
.xicon:before {
|
||||
@extend %icon-style;
|
||||
}
|
||||
|
||||
.xicon-arrow-left:before { @include icon-content($arrowLeft, true) }
|
||||
.xicon-arrow-right:before { @include icon-content($arrowRight, true) }
|
||||
.xicon-arrow-up:before { @include icon-content($arrowUp, true) }
|
||||
.xicon-arrow-down:before { @include icon-content($arrowDown, true) }
|
||||
.xicon-arrow-left-circle:before { @include icon-content($arrowLeftCircle, true) }
|
||||
.xicon-arrow-right-circle:before { @include icon-content($arrowRightCircle, true) }
|
||||
.xicon-arrow-up-circle:before { @include icon-content($arrowUpCircle, true) }
|
||||
.xicon-arrow-down-circle:before { @include icon-content($arrowDownCircle, true) }
|
||||
.xicon-chevron-left:before { @include icon-content($chevronLeft, true) }
|
||||
.xicon-chevron-right:before { @include icon-content($chevronRight, true) }
|
||||
.xicon-chevron-up:before { @include icon-content($chevronUp, true) }
|
||||
.xicon-chevron-down:before { @include icon-content($chevronDown, true) }
|
||||
.xicon-chevron-left-circle:before { @include icon-content($chevronLeftCircle, true) }
|
||||
.xicon-chevron-right-circle:before { @include icon-content($chevronRightCircle, true) }
|
||||
.xicon-chevron-up-circle:before { @include icon-content($chevronUpCircle, true) }
|
||||
.xicon-chevron-down-circle:before { @include icon-content($chevronDownCircle, true) }
|
||||
.xicon-caret-left:before { @include icon-content($caretLeft, true) }
|
||||
.xicon-caret-right:before { @include icon-content($caretRight, true) }
|
||||
.xicon-caret-up:before { @include icon-content($caretUp, true) }
|
||||
.xicon-caret-down:before { @include icon-content($caretDown, true) }
|
||||
.xicon-first-page:before { @include icon-content($firstPage, true) }
|
||||
.xicon-prev-page:before { @include icon-content($prevPage, true) }
|
||||
.xicon-next-page:before { @include icon-content($nextPage, true) }
|
||||
.xicon-last-page:before { @include icon-content($lastPage, true) }
|
||||
.xicon-times:before { @include icon-content($times, true) }
|
||||
.xicon-times-circle:before { @include icon-content($timesCircle, true) }
|
||||
.xicon-plus:before { @include icon-content($plus, true) }
|
||||
.xicon-plus-square:before { @include icon-content($plusSquare, true) }
|
||||
.xicon-plus-circle:before { @include icon-content($plusCircle, true) }
|
||||
.xicon-minus:before { @include icon-content($minus, true) }
|
||||
.xicon-minus-square:before { @include icon-content($minusSquare, true) }
|
||||
.xicon-minus-circle:before { @include icon-content($minusCircle, true) }
|
||||
.xicon-check:before { @include icon-content($check, true) }
|
||||
.xicon-check-square:before { @include icon-content($checkSquare, true) }
|
||||
.xicon-sort-asc:before { @include icon-content($sortAsc, true) }
|
||||
.xicon-sort-desc:before { @include icon-content($sortDesc, true) }
|
||||
.xicon-exclamation:before { @include icon-content($exclamation, true) }
|
||||
.xicon-information:before { @include icon-content($information, true) }
|
||||
.xicon-question:before { @include icon-content($question, true) }
|
||||
.xicon-import:before { @include icon-content($import, true) }
|
||||
.xicon-export:before { @include icon-content($export, true) }
|
||||
.xicon-grid-large:before { @include icon-content($gridLarge, true) }
|
||||
.xicon-grid-small:before { @include icon-content($gridSmall, true) }
|
||||
.xicon-list:before { @include icon-content($list, true) }
|
||||
.xicon-mail:before { @include icon-content($mail, true) }
|
||||
.xicon-user:before { @include icon-content($user, true) }
|
||||
.xicon-wrench:before { @include icon-content($wrench, true) }
|
||||
.xicon-gear:before { @include icon-content($gear, true) }
|
||||
.xicon-logout:before { @include icon-content($logout, true) }
|
||||
.xicon-refresh:before { @include icon-content($refresh, true) }
|
||||
.xicon-reply:before { @include icon-content($reply, true) }
|
||||
.xicon-reply-all:before { @include icon-content($replyAll, true) }
|
||||
.xicon-forward:before { @include icon-content($forward, true) }
|
||||
.xicon-archive:before { @include icon-content($archive, true) }
|
||||
.xicon-trash:before { @include icon-content($trash, true) }
|
||||
.xicon-recycle:before { @include icon-content($recycle, true) }
|
||||
.xicon-tag:before { @include icon-content($tag, true) }
|
||||
.xicon-more:before { @include icon-content($more, true) }
|
||||
.xicon-download:before { @include icon-content($download, true) }
|
||||
.xicon-folder:before { @include icon-content($folder, true) }
|
||||
.xicon-print:before { @include icon-content($print, true) }
|
||||
.xicon-send:before { @include icon-content($send, true) }
|
||||
.xicon-save:before { @include icon-content($save, true) }
|
||||
.xicon-spellcheck:before { @include icon-content($spellcheck, true) }
|
||||
.xicon-attachment:before { @include icon-content($attachment, true) }
|
||||
.xicon-create:before { @include icon-content($create, true) }
|
||||
.xicon-edit:before { @include icon-content($edit, true) }
|
||||
.xicon-signature:before { @include icon-content($signature, true) }
|
||||
.xicon-bookmark:before { @include icon-content($bookmark, true) }
|
||||
.xicon-vcard:before { @include icon-content($vcard, true) }
|
||||
.xicon-search:before { @include icon-content($search, true) }
|
||||
.xicon-bars:before { @include icon-content($bars, true) }
|
||||
.xicon-code:before { @include icon-content($code, true) }
|
||||
.xicon-unlink:before { @include icon-content($unlink, true) }
|
||||
.xicon-star:before { @include icon-content($star, true) }
|
||||
.xicon-flag:before { @include icon-content($flag, true) }
|
||||
.xicon-flag-empty:before { @include icon-content($flagEmpty, true) }
|
||||
.xicon-text-file:before { @include icon-content($textFile, true) }
|
||||
.xicon-replied-forwarded:before { @include icon-content($repliedForwarded, true) }
|
||||
.xicon-speech-bubble:before { @include icon-content($speechBubble, true) }
|
||||
.xicon-forbidden:before { @include icon-content($forbidden, true) }
|
||||
.xicon-clock:before { @include icon-content($clock, true) }
|
||||
.xicon-share:before { @include icon-content($share, true) }
|
||||
.xicon-circle-empty:before { @include icon-content($circleEmpty, true) }
|
||||
.xicon-calendar:before { @include icon-content($calendar, true) }
|
||||
.xicon-calendar-short:before { @include icon-content($calendarShort, true) }
|
||||
.xicon-calendar-list:before { @include icon-content($calendarList, true) }
|
||||
.xicon-calendar-day:before { @include icon-content($calendarDay, true) }
|
||||
.xicon-help:before { @include icon-content($help, true) }
|
||||
.xicon-repeat:before { @include icon-content($repeat, true) }
|
||||
.xicon-options:before { @include icon-content($options, true) }
|
||||
.xicon-generic:before { @include icon-content($generic, true) }
|
||||
.xicon-lock:before { @include icon-content($lock, true) }
|
||||
.xicon-envelope-closed:before { @include icon-content($envelopeClosed, true) }
|
||||
.xicon-envelope-open:before { @include icon-content($envelopeOpen, true) }
|
||||
.xicon-monitor:before { @include icon-content($monitor, true) }
|
||||
.xicon-sort-asc:before { @include icon-content($sortAsc, true) }
|
||||
.xicon-sort-desc:before { @include icon-content($sortDesc, true) }
|
||||
.xicon-inbox:before { @include icon-content($inbox, true) }
|
||||
.xicon-spinner:before { @include icon-content($spinner, true) }
|
||||
.xicon-picture:before { @include icon-content($picture, true) }
|
||||
.xicon-dropbox:before { @include icon-content($dropbox, true) }
|
||||
.xicon-google:before { @include icon-content($google, true) }
|
||||
.xicon-user-circle:before { @include icon-content($userCircle, true) }
|
||||
.xicon-newspaper:before { @include icon-content($newspaper, true) }
|
||||
.xicon-sun:before { @include icon-content($sun, true) }
|
||||
.xicon-home:before { @include icon-content($home, true) }
|
||||
.xicon-sidebar:before { @include icon-content($sidebar, true) }
|
||||
.xicon-columns:before { @include icon-content($columns, true) }
|
||||
.xicon-skin:before { @include icon-content($skin, true) }
|
||||
.xicon-align-left:before { @include icon-content($alignLeft, true) }
|
||||
.xicon-align-center:before { @include icon-content($alignCenter, true) }
|
||||
.xicon-align-right:before { @include icon-content($alignRight, true) }
|
||||
.xicon-dot:before { @include icon-content($dot, true) }
|
||||
.xicon-disk:before { @include icon-content($disk, true) }
|
||||
.xicon-junk:before { @include icon-content($junk, true) }
|
||||
.xicon-notjunk:before { @include icon-content($notjunk, true) }
|
||||
.xicon-dot-menu:before { @include icon-content($dotMenu, true) }
|
||||
.xicon-filter:before { @include icon-content($filter, true) }
|
||||
.xicon-new-window:before { @include icon-content($newWindow, true) }
|
||||
.xicon-star-empty:before { @include icon-content($starEmpty, true) }
|
||||
.xicon-move:before { @include icon-content($move, true) }
|
||||
.xicon-copy:before { @include icon-content($copy, true) }
|
||||
.xicon-add-user:before { @include icon-content($addUser, true) }
|
||||
.xicon-remove-user:before { @include icon-content($removeUser, true) }
|
||||
.xicon-qrcode:before { @include icon-content($qrcode, true) }
|
||||
.xicon-address-book:before { @include icon-content($addressBook, true) }
|
||||
.xicon-vertical-menu:before { @include icon-content($verticalMenu, true) }
|
||||
.xicon-zoom-in:before { @include icon-content($zoomIn, true) }
|
||||
.xicon-zoom-out:before { @include icon-content($zoomOut, true) }
|
||||
.xicon-lightbulb:before { @include icon-content($lightbulb, true) }
|
||||
.xicon-compress:before { @include icon-content($compress, true) }
|
||||
.xicon-link:before { @include icon-content($link, true) }
|
||||
.xicon-users:before { @include icon-content($users, true) }
|
||||
.xicon-shield:before { @include icon-content($shield, true) }
|
||||
.xicon-login:before { @include icon-content($login, true) }
|
||||
.xicon-key:before { @include icon-content($key, true) }
|
||||
.xicon-undo:before { @include icon-content($undo, true) }
|
||||
.xicon-bell:before { @include icon-content($bell, true) }
|
||||
.xicon-eye:before { @include icon-content($eye, true) }
|
||||
.xicon-rss:before { @include icon-content($rss, true) }
|
||||
.xicon-label-dots:before { @include icon-content($labelDots, true) }
|
||||
.xicon-cloud:before { @include icon-content($cloud, true) }
|
||||
.xicon-connections:before { @include icon-content($connections, true) }
|
||||
.xicon-email-schedule:before { @include icon-content($emailSchedule, true) }
|
||||
.xicon-schedule-list:before { @include icon-content($scheduleList, true) }
|
||||
.xicon-replied-forwarded:before { @include icon-content($repliedForwarded, true) }
|
||||
.xicon-cpanel:before { @include icon-content($cPanel, true) }
|
||||
.xicon-phone:before { @include icon-content($phone, true) }
|
||||
.xicon-yubikey:before { @include icon-content($yubikey, true) }
|
||||
.xicon-light-mode:before { @include icon-content($lightMode, true) }
|
||||
.xicon-dark-mode:before { @include icon-content($darkMode, true) }
|
||||
.xicon-google-drive:before { @include icon-content($googleDrive, true) }
|
||||
.xicon-robot:before { @include icon-content($robot, true) }
|
||||
.xicon-eraser:before { @include icon-content($eraser, true) }
|
||||
.xicon-box:before { @include icon-content($box, true) }
|
||||
.xicon-world:before { @include icon-content($world, true) }
|
||||
2
plugins/xframework/assets/styles/elastic.css
Normal file
2
plugins/xframework/assets/styles/elastic.css
Normal file
File diff suppressed because one or more lines are too long
7
plugins/xframework/assets/styles/elastic.css.map
Normal file
7
plugins/xframework/assets/styles/elastic.css.map
Normal file
File diff suppressed because one or more lines are too long
253
plugins/xframework/assets/styles/elastic.scss
Normal file
253
plugins/xframework/assets/styles/elastic.scss
Normal file
@ -0,0 +1,253 @@
|
||||
@import "_colors";
|
||||
@import "_common";
|
||||
@import "_icons_common";
|
||||
@import "_icons_elastic";
|
||||
|
||||
// hide the labels added by the elastic's pretty checkbox function to the checkboxes that shouldn't have them
|
||||
input[type='checkbox'].no-switchbox.icon-checkbox + label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// rc will hide the checkboxes that don't undergo the automatic conversion to switchboxes: fix it
|
||||
.dark-mode input[type='checkbox'].no-switchbox {
|
||||
opacity: 1 !important;
|
||||
z-index: auto !important;
|
||||
}
|
||||
|
||||
// fix the line height inconsistencies between the different fonts that could be used
|
||||
// and adjust the icon size to make sure the buttons don't change size with and without icons
|
||||
.btn.btn-primary,
|
||||
.btn.btn-secondary,
|
||||
.btn.btn-success,
|
||||
.btn.btn-danger,
|
||||
.btn.btn-warning,
|
||||
.btn.btn-info,
|
||||
.btn.btn-link,
|
||||
.btn.btn-dark {
|
||||
line-height: 1.3rem;
|
||||
|
||||
&:before {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// *********************** RC+ apps menu ***********************
|
||||
|
||||
.layout-large,
|
||||
.layout-normal {
|
||||
#button-apps:before {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-normal.touch {
|
||||
#button-apps:before {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#button-apps {
|
||||
&.top {
|
||||
&:before {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#apps-menu {
|
||||
padding: 4px;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#look-and-feel-shortcut {
|
||||
padding-top: 5px;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#menu-apps-list {
|
||||
a.app-item {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
padding: 1px;
|
||||
@include text-color;
|
||||
|
||||
.icon {
|
||||
order: 1;
|
||||
font-size: 1.3rem;
|
||||
width: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
order: 2;
|
||||
padding-left: .4rem;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@include background-highlight-color(7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// *********************** RC+ sidebar ***********************
|
||||
|
||||
#xsidebar,
|
||||
#xsidebar-mobile-header,
|
||||
#taskmenu a#show-mobile-xsidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#show-xsidebar-item {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#layout #xsidebar {
|
||||
overflow-y: hidden;
|
||||
border-left: 1px solid;
|
||||
@include border-color;
|
||||
@include background-color;
|
||||
|
||||
|
||||
#xsidebar-inner {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h2.boxtitle {
|
||||
border-bottom: 1px solid;
|
||||
@include border-color;
|
||||
}
|
||||
|
||||
.header {
|
||||
justify-content: left !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
body.xsidebar-visible {
|
||||
#layout-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#show-xsidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#xsidebar-menu {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#xsidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 0;
|
||||
max-width: 18%;
|
||||
}
|
||||
}
|
||||
|
||||
html.touch {
|
||||
#taskmenu a#show-mobile-xsidebar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#xsidebar,
|
||||
#show-xsidebar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.xsidebar-mobile-visible {
|
||||
#xmobile-overlay {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#xsidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
max-width: 100%;
|
||||
display: block !important;
|
||||
border-radius: 0;
|
||||
border: none !important;
|
||||
z-index: 2;
|
||||
|
||||
#xsidebar-mobile-header {
|
||||
display: block;
|
||||
padding: 0 .5em;
|
||||
height: 4.2rem;
|
||||
line-height: 4.2rem;
|
||||
font-size: 1.2rem;
|
||||
background-color: #005984;
|
||||
|
||||
a {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#xsidebar-inner {
|
||||
padding-bottom: 100px; // otherwise can't scroll to the bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark-mode.touch body.xsidebar-mobile-visible #xsidebar {
|
||||
background-color: #161b1d;
|
||||
|
||||
#xsidebar-mobile-header {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid #4d6066;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-small body.xsidebar-mobile-visible #xsidebar {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
html.layout-phone body.xsidebar-mobile-visible #xsidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// *********************** third-party plugins ***********************
|
||||
|
||||
// managesieve
|
||||
.action-plugin-managesieve,
|
||||
.action-plugin-managesieve-action,
|
||||
.action-plugin-managesieve-save {
|
||||
.rowbuttons a {
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
background: transparent !important;
|
||||
color: #333 !important;
|
||||
|
||||
html.dark-mode & {
|
||||
color: #ddd !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
2
plugins/xframework/assets/styles/larry.css
Normal file
2
plugins/xframework/assets/styles/larry.css
Normal file
File diff suppressed because one or more lines are too long
7
plugins/xframework/assets/styles/larry.css.map
Normal file
7
plugins/xframework/assets/styles/larry.css.map
Normal file
File diff suppressed because one or more lines are too long
402
plugins/xframework/assets/styles/larry.scss
Normal file
402
plugins/xframework/assets/styles/larry.scss
Normal file
@ -0,0 +1,402 @@
|
||||
/**
|
||||
* Roundcube Framework plugin.
|
||||
*
|
||||
* Copyright 2019, Tecorama LLC.
|
||||
*
|
||||
* @license Commercial. See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
@import "_colors";
|
||||
@import "_common";
|
||||
@import "_icons_common";
|
||||
@import "_icons_larry";
|
||||
|
||||
// hide font icons on larry and litecube where image icons are displayed
|
||||
body.xlarry:not(.xskin) {
|
||||
#button-apps:before,
|
||||
#sections-table tr > td.section:before,
|
||||
#settings-tabs a.x2fa:before,
|
||||
#settings-tabs a.xcpanel-settings:before,
|
||||
.listing.iconized li>a:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// The fixed copy of the mail header list doesn't resize to be smaller than 560px and because it's fixed, it sticks out
|
||||
// of the box. Without the vertical preview and the sidebar it rarely happens because nobody has a screen that small,
|
||||
// but with both those added columns, it's easy for the mail list width to go under 560px.
|
||||
// We're changing the positioning from fixed to absolute so it gets cropped and doesn't stick out of the box. The
|
||||
// problem with this solution is that it's not fixed any more and scrolls out of the view along with the messages, but
|
||||
// this is the only workable solution we found. (see xframework.js)
|
||||
|
||||
table.messagelist.fixedcopy {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
body.xdesktop .messagelist thead tr:hover .flag span:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.formcontent {
|
||||
input.button,
|
||||
input[type='checkbox'] {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.listing.iconized {
|
||||
li a:before,
|
||||
tr td:before {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// icons
|
||||
|
||||
.mailbox a:before {
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
font-size: 1.3em;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.xdesktop #taskbar a:before {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
// mail list
|
||||
|
||||
.widescreen .messagelist td.subject span {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// sidebar
|
||||
|
||||
.xsidebar-visible {
|
||||
#mailview-right {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
#xsidebar,
|
||||
#xsidebar-splitter {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#xsidebar-splitter {
|
||||
top: 45px;
|
||||
bottom: 0px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-splitter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#xsidebar {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
h2.boxtitle {
|
||||
padding: 4px 8px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.listbox.collapsed:before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
#xsidebar-preview-frame-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.xsidebar-wrap #searchfilter {
|
||||
right: 288px;
|
||||
}
|
||||
|
||||
.xsidebar-wrap #quicksearchbar {
|
||||
right: 34px;
|
||||
}
|
||||
|
||||
#xsidebar-button {
|
||||
display: block;
|
||||
width: 16px;
|
||||
margin: 0;
|
||||
padding: 4px 3px 6px 3px;
|
||||
margin-top: 2px;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: "\25c0"; // this is for larry that doesn't use our icon font
|
||||
}
|
||||
}
|
||||
|
||||
.xsidebar-visible #xsidebar-button:before {
|
||||
content: "\25b6";
|
||||
}
|
||||
|
||||
body.dragging, body.dragging * {
|
||||
cursor: move !important;
|
||||
}
|
||||
|
||||
#xsidebar-order-table {
|
||||
td.title label:before {
|
||||
font-size: 0.9em !important;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.xmobile {
|
||||
#xsidebar-order-table {
|
||||
td.title {
|
||||
width: 50%;
|
||||
|
||||
label:before {
|
||||
content: "" !important;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#xsidebar-order-note {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// settings
|
||||
|
||||
#sections-table #rcmrowxsidebar td.section {
|
||||
background-image: url(../images/settings-sidebar.png);
|
||||
background-position: 2px 0;
|
||||
}
|
||||
|
||||
#sections-table #rcmrowxsidebar.selected td.section {
|
||||
background-image: url(../images/settings-sidebar-hot.png);
|
||||
}
|
||||
|
||||
// apps menu
|
||||
|
||||
#taskbar a.button-apps span.button-inner {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 3px 2px;
|
||||
background-image: url("../images/apps.png");
|
||||
}
|
||||
|
||||
#taskbar a.button-apps:hover span.button-inner {
|
||||
background-position: 3px -25px;
|
||||
}
|
||||
|
||||
#apps-menu {
|
||||
left: auto !important;
|
||||
right: 4px;
|
||||
max-width: 575px; // 12 or more icons
|
||||
box-sizing: border-box;
|
||||
|
||||
a.app-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
padding: .5em 1em;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
&>div.icon {
|
||||
color: #fff;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:before {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
&>img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&>div.title {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.xskin #apps-menu {
|
||||
a.app-item {
|
||||
&>div.icon {
|
||||
color: #434343;
|
||||
}
|
||||
|
||||
&>div.title {
|
||||
color: #434343;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xmobile #apps-menu {
|
||||
left: 0 !important;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
// interface button / menu
|
||||
|
||||
#interface-options {
|
||||
min-width: 120px;
|
||||
max-width: 216px;
|
||||
color: #eee;
|
||||
padding: 12px 10px;
|
||||
left: auto !important;
|
||||
right: 4px;
|
||||
|
||||
a {
|
||||
color: #f9f9f9;
|
||||
|
||||
.tooltip {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 10px 0;
|
||||
|
||||
select,
|
||||
input.button {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.section-title {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
input.button {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#taskbar {
|
||||
.button-interface-options {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px 12px;
|
||||
background-image: url(../images/larry-interface-options.png);
|
||||
margin-right: 5px;
|
||||
float: right;
|
||||
width: 26px;
|
||||
text-align: center;
|
||||
|
||||
.button-inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minimal #taskbar {
|
||||
.button-logout {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.button-interface-options {
|
||||
padding: 10px 6px 0 6px;
|
||||
background-position: 8px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#message-list-sort {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xmobile {
|
||||
#interface-options {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
color: #333 !important;
|
||||
left: 0 !important;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#taskbar {
|
||||
.button-interface-options {
|
||||
margin-right: 5px;
|
||||
float: none;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
|
||||
.button-inner {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// settings help
|
||||
|
||||
span.xsetting-help {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
border: 1px solid #ddd;
|
||||
padding: 1px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
content: "?";
|
||||
font-weight: bold;
|
||||
font-size: 10px !important;
|
||||
font-family: sans-serif;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
display: none;
|
||||
padding: 8px;
|
||||
border: 1px solid #cccccc;
|
||||
background: #ffffcc;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
&:hover span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.xskin {
|
||||
#taskbar .minmodetoggle {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
2
plugins/xframework/assets/styles/xcloud.css
Normal file
2
plugins/xframework/assets/styles/xcloud.css
Normal file
@ -0,0 +1,2 @@
|
||||
#xgoogle_drive-compose-button button.btn-secondary:before,#xdropbox-compose-button button.btn-secondary:before{font-family:RcpIconFont, sans-serif !important;font-weight:normal !important;position:relative;background-image:none;text-indent:0}#xgoogle_drive-compose-button button.btn-secondary:before{content:"\EAF8" }html.xicons-traditional #xgoogle_drive-compose-button button.btn-secondary:before{content:"\EBC0" }html.xicons-outlined #xgoogle_drive-compose-button button.btn-secondary:before{content:"\EC88" }html.xicons-material #xgoogle_drive-compose-button button.btn-secondary:before{content:"\ED50" }html.xicons-cartoon #xgoogle_drive-compose-button button.btn-secondary:before{content:"\EE18" }#xdropbox-compose-button button.btn-secondary:before{content:"\EAC5" }html.xicons-traditional #xdropbox-compose-button button.btn-secondary:before{content:"\EB8D" }html.xicons-outlined #xdropbox-compose-button button.btn-secondary:before{content:"\EC55" }html.xicons-material #xdropbox-compose-button button.btn-secondary:before{content:"\ED1D" }html.xicons-cartoon #xdropbox-compose-button button.btn-secondary:before{content:"\EDE5" }.xcloud-compose-button{margin-top:5px}.xcloud-save-button-container{margin:10px 0}.xcloud-save-button-wrap{display:block;float:left;margin-right:5px}.xcloud-save-button{display:inline-block;position:relative;border:1px solid #d0d0d0 !important;border-radius:2px !important;color:#333;font-size:11px;font-family:arial, sans-serif;padding:0 7px 0 24px;line-height:1em !important;background:#ededed;background:-moz-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e6e6e6));background:-webkit-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);background:-o-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);background:-ms-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);background:linear-gradient(to bottom, #f5f5f5 0%, #e6e6e6 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e6e6e6',GradientType=0)}.xcloud-save-button:hover{border-color:#C6C6C6}.xcloud-save-button div.image{position:absolute;display:block;top:6px;left:4px;height:16px;width:16px;background-repeat:no-repeat;background-size:contain}.xcloud-save-button div.text{display:inline-block;line-height:27px !important;height:27px;cursor:default}.xcloud-attach-menu-container{text-align:center !important;padding:6px 0 !important}.xcloud-attach-menu-container iframe{position:static !important;width:58px !important}.xcloud-save-attachment span.icon{background-position:0px -2022px !important}.xcloud-image-attachment-box{display:inline-block;margin:0 5px}.xelastic p.image-attachment .image-link{margin-bottom:5.5rem}html.iframe body.xelastic.task-mail.action-preview>#messagestack ~ iframe+div{display:none !important}
|
||||
/*# sourceMappingURL=xcloud.css.map */
|
||||
7
plugins/xframework/assets/styles/xcloud.css.map
Normal file
7
plugins/xframework/assets/styles/xcloud.css.map
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAMA,8GAAY,CACR,WAAW,CAAE,kCAAkC,CAC/C,WAAW,CAAE,iBAAiB,CAC9B,QAAQ,CAAE,QAAQ,CAClB,gBAAgB,CAAE,IAAI,CACtB,WAAW,CAAE,CAAC,CCPlB,yDAA0D,CDmBtD,OAAO,CAAE,QAA8D,CAEvE,iFAA0B,CACtB,OAAO,CAAE,QAA8D,CAE3E,8EAAuB,CACnB,OAAO,CAAE,QAA8D,CAE3E,8EAAuB,CACnB,OAAO,CAAE,QAA6D,CAE1E,6EAAsB,CAClB,OAAO,CAAE,QAA6D,CC9B9E,oDAAqD,CDkBjD,OAAO,CAAE,QAA8D,CAEvE,4EAA0B,CACtB,OAAO,CAAE,QAA8D,CAE3E,yEAAuB,CACnB,OAAO,CAAE,QAA8D,CAE3E,yEAAuB,CACnB,OAAO,CAAE,QAA6D,CAE1E,wEAAsB,CAClB,OAAO,CAAE,QAA6D,CC5B9E,sBAAuB,CACnB,UAAU,CAAE,GAAG,CAGnB,6BAA8B,CAC1B,MAAM,CAAE,MAAM,CAGlB,wBAAyB,CACrB,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,IAAI,CACX,YAAY,CAAE,GAAG,CAGrB,mBAAoB,CAChB,OAAO,CAAE,YAAY,CACrB,QAAQ,CAAE,QAAQ,CAClB,MAAM,CAAE,4BAA4B,CACpC,aAAa,CAAE,cAAc,CAC7B,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,iBAAiB,CAC9B,OAAO,CAAE,YAAY,CACrB,WAAW,CAAE,cAAc,CAC3B,UAAU,CAAE,OAAO,CACnB,UAAU,CAAE,mDAAmD,CAC/D,UAAU,CAAE,mGAAmG,CAC/G,UAAU,CAAE,sDAAsD,CAClE,UAAU,CAAE,iDAAiD,CAC7D,UAAU,CAAE,kDAAkD,CAC9D,UAAU,CAAE,oDAAoD,CAChE,MAAM,CAAE,yGAAyG,CAEjH,yBAAQ,CACJ,YAAY,CAAE,OAAO,CAGzB,6BAAU,CACN,QAAQ,CAAE,QAAQ,CAClB,OAAO,CAAE,KAAK,CACd,GAAG,CAAE,GAAG,CACR,IAAI,CAAE,GAAG,CACT,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,CACX,iBAAiB,CAAE,SAAS,CAC5B,eAAe,CAAE,OAAO,CAG5B,4BAAS,CACL,OAAO,CAAE,YAAY,CACrB,WAAW,CAAE,eAAe,CAC5B,MAAM,CAAE,IAAI,CACZ,MAAM,CAAE,OAAO,CAIvB,6BAA8B,CAC1B,UAAU,CAAE,iBAAiB,CAC7B,OAAO,CAAE,gBAAgB,CAGzB,oCAAO,CACH,QAAQ,CAAE,iBAAiB,CAC3B,KAAK,CAAE,eAAe,CAI9B,iCAAkC,CAC9B,mBAAmB,CAAE,sBAAsB,CAG/C,4BAA6B,CACzB,OAAO,CAAE,YAAY,CACrB,MAAM,CAAE,KAAK,CAKb,wCAA+B,CAC3B,aAAa,CAAE,MAAM,CAW7B,6EAAkF,CAC9E,OAAO,CAAE,eAAe",
|
||||
"sources": ["_icons.scss","xcloud.scss"],
|
||||
"names": [],
|
||||
"file": "xcloud.css"
|
||||
}
|
||||
100
plugins/xframework/assets/styles/xcloud.scss
Normal file
100
plugins/xframework/assets/styles/xcloud.scss
Normal file
@ -0,0 +1,100 @@
|
||||
// includes style for both larry and elastic
|
||||
@import "_icons";
|
||||
|
||||
// xgoogle_drive and xdropbox icons
|
||||
#xgoogle_drive-compose-button button.btn-secondary:before { @include icon($googleDrive); }
|
||||
#xdropbox-compose-button button.btn-secondary:before { @include icon($dropbox); }
|
||||
|
||||
.xcloud-compose-button {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.xcloud-save-button-container {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.xcloud-save-button-wrap {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.xcloud-save-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 1px solid #d0d0d0 !important;
|
||||
border-radius: 2px !important;
|
||||
color: #333;
|
||||
font-size: 11px;
|
||||
font-family: arial, sans-serif;
|
||||
padding: 0 7px 0 24px;
|
||||
line-height: 1em !important;
|
||||
background: #ededed;
|
||||
background: -moz-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e6e6e6));
|
||||
background: -webkit-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);
|
||||
background: -o-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);
|
||||
background: -ms-linear-gradient(top, #f5f5f5 0%, #e6e6e6 100%);
|
||||
background: linear-gradient(to bottom, #f5f5f5 0%, #e6e6e6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e6e6e6',GradientType=0);
|
||||
|
||||
&:hover {
|
||||
border-color: #C6C6C6;
|
||||
}
|
||||
|
||||
div.image {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 6px;
|
||||
left: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
div.text {
|
||||
display: inline-block;
|
||||
line-height: 27px !important;
|
||||
height: 27px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.xcloud-attach-menu-container {
|
||||
text-align: center !important;
|
||||
padding: 6px 0 !important;
|
||||
|
||||
// fix for mobile on elastic
|
||||
iframe {
|
||||
position: static !important;
|
||||
width: 58px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.xcloud-save-attachment span.icon {
|
||||
background-position: 0px -2022px !important;
|
||||
}
|
||||
|
||||
.xcloud-image-attachment-box {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.xelastic {
|
||||
// make space for the save buttons
|
||||
p.image-attachment .image-link {
|
||||
margin-bottom: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide the Google Drive popup bubble that is shown when the user hovers over the Google Drive save button. When a long
|
||||
// message with attachments is displayed, the attachment (with the cloud save buttons) are initially out of view because
|
||||
// they are at the bottom of the message, and the .content element displays a scroll bar. However, when the Google Drive
|
||||
// code is loaded, it creates the Save button and the popup bubble, which is absolutely positioned. Because .content is
|
||||
// not absolute or relative, and the bubble is out of view, it makes the body display its own scroll bar and we end up
|
||||
// with two scroll bars. Hiding the bubble is the simplest solution with least side effects to fix this.
|
||||
// Unfortunately that bubble div doesn't have any handle we can use...
|
||||
html.iframe body.xelastic.task-mail.action-preview > #messagestack ~ iframe + div {
|
||||
display: none !important;
|
||||
}
|
||||
Reference in New Issue
Block a user