diff options
Diffstat (limited to 'p/themes/Mapco/_components.rtl.css')
| -rw-r--r-- | p/themes/Mapco/_components.rtl.css | 314 |
1 files changed, 314 insertions, 0 deletions
diff --git a/p/themes/Mapco/_components.rtl.css b/p/themes/Mapco/_components.rtl.css new file mode 100644 index 000000000..c5abe2877 --- /dev/null +++ b/p/themes/Mapco/_components.rtl.css @@ -0,0 +1,314 @@ +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +/* see _forms.css*/ + +/*=== Horizontal-list */ +.horizontal-list { + padding: 0.1rem 0; + + & > .item { + &:first-child { + padding-right: 0.5rem; + } + + } +} + +/*=== Dropdown */ +.dropdown { + .dropdown-target:target + .btn { + background-color: var(--grey-medium-light); + } +} + +.dropdown-menu { + margin: 9px 0 0 0; + padding: 0.5rem 0 1rem 0; + background: var(--grey-lighter); + font-size: 1rem; + border: none; + border-radius: 3px; + box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35); + text-align: right; + + &::after { + border: none; + left: 18px; + } + + .dropdown-header, + .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; + font-weight: bold; + text-align: right; + color: var(--grey-dark); + text-transform: uppercase; + letter-spacing: 1px; + } + + .item { + + transition: all 0.075s ease-in-out; + + > a, + > span, + > .as-link { + padding: 0 2rem; + color: var(--main-font-color); + font-size: inherit; + line-height: 2.5em; + + span.icon { + padding: 0 0.25rem !important; + } + } + + > a, + > .as-link { + &:not(.addItem):hover { + background: var(--main-first); + color: var(--white); + + .icon { + filter: brightness(3); + } + } + } + + &.dropdown-section { + margin-top: 0.75rem; + + & ~ .dropdown-section { + border-top-color: var(--grey-light); + } + + .item { + a, .as-link { + padding-right: 2rem; + } + } + } + + &[aria-checked="true"] { + a::before { + margin: 0 -14px 0 0; + font-weight: bold; + } + } + + & ~ .dropdown-header { + margin-top: 0.75rem; + padding-top: 1.75rem; + border-top-color: var(--grey-light); + } + + &.separator { + margin-top: 0.75rem; + border-top-color: var(--grey-light); + } + } + + .input { + select, input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; + } + } +} + +.tree .tree-folder .tree-folder-items .dropdown-menu { + /* to reset the appearance of the dropdown in the case of a dark sidebar*/ + .item { + padding: 0; + + a, + button { + color: var(--main-font-color); + + &:hover { + color: var(--white); + } + } + + &:hover { + background: var(--main-first); + } + } +} + + + + +/*=== Alerts */ +.alert { + background: var(--grey-lighter); + color: var(--grey-dark); + font-size: 1rem; + border: 1px solid var(--grey-medium); + border-radius: 3px; + text-shadow: 0 0 1px var(--grey-light); +} + +.alert-head { + font-size: 1.15em; +} + +.alert > a { + text-decoration: underline; + color: inherit; +} + +.alert-warn { + background: var(--warning-light); + color: var(--warning-text); + border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent); +} + +.alert-success { + background: var(--success-light); + color: var(--success-text); + border: 1px solid color-mix(in srgb, var(--success-text) 20%, transparent); +} + +.alert-error { + background: var(--alert-light); + color: var(--alert-text); + border: 1px solid color-mix(in srgb, var(--alert-text) 20%, transparent); +} + +/*=== Pagination */ +.pagination { + background: var(--grey-light); + color: var(--main-font-color); + + .item a { + color: var(--main-font-color); + } + +} + +#load_more.loading, +#load_more.loading:hover { + background: url("loader.gif") center center no-repeat #34495e; +} + +/*=== Boxes */ +.box { + background: var(--white); + border: none; + border-radius: 3px; + + box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25); + + .box-title { + background: var(--grey-light); + color: var(--main-font-color); + border-radius: 2px 2px 0 0; + + .configure { + padding: 5px; + } + + &:hover { + .configure { + .icon { + vertical-align: middle; + } + + &:hover { + background-color: var(--main-first); + + .icon { + filter: brightness(3); + } + } + } + } + + + form { + input { + width: 85%; + } + + .dropdown { + float: left; + + a.dropdown-toggle { + padding: 0; + border-radius: 0; + background-image: url(icons/more.svg); + background-repeat: no-repeat; + background-position: left 8px; + + img { + display: none; + } + } + } + } + } + + .box-content { + padding-right: 30px; + + .item { + padding: 0.25rem 0; + color: var(--main-font-color); + font-size: 1rem; + border-bottom: 1px solid var(--grey-light); + line-height: 1.7em; + + .configure { + padding: 5px; + + .icon { + vertical-align: middle; + } + + &:hover { + background-color: var(--main-first); + + .icon { + filter: brightness(3); + } + } + } + } + + .item:last-child { + border-bottom: none; + } + } +} + +/*=== "Load more" part */ +#bigMarkAsRead.big { + text-align: center; + text-decoration: none; + background: var(--main-first-light); + color: var(--main-first); + + transition: all 0.15s ease-in-out; + + &:hover { + background: var(--main-first); + color: #fff; + + .bigTick { + filter: brightness(5); + } + } + + .bigTick { + margin: 0.5rem 0; + background: url(icons/tick-color.svg) center no-repeat; + display: inline-block; + width: 64px; + height: 64px; + text-indent: -9999px; + white-space: nowrap; + } +} |