File: D:/HostingSpaces/MBoogaard/oosting-horseriding.com/CMS/App_Themes/Global/Skin.less
// Skin.less provides default styles to Admin UI components which appear on live site. It can be changed or overridden using particular site stylesheet.
//
// Import just references of these less files. It doesn't compile them into the CSS code
@import (reference) "./Skin/variables.less";
@import (reference) "./Skin/mixins.less";
@import (reference) "./Skin/utilities.less";
@import (reference) "./Skin/type.less";
// Import full less files
@import "./Skin/tooltip.less";
@import "./Skin/icons-core-ie7.css";
.ContentBody {
@import "./Skin/icons-core.less";
// General styles
.RightAlign {
float: right;
}
.LeftAlign {
float: left;
}
.TextLeft, .DialogBody {
text-align: left;
}
.TextRight, .DialogContent {
text-align: right;
}
// Type - hide element accessibly
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
// Hide from screen-readers and browsers
.hidden {
display: none !important;
visibility: hidden !important;
}
.clear {
clear: both;
}
// Pagination
// ----------
.pagination-items-per-page {
text-align: right;
font-size: @font-size-base;
font-family: Arial;
select.form-control {
margin-left: @base-unit * 0.5;
width: 59px;
}
}
.pagination-pages {
float: left;
}
.pagination-list {
list-style-type: none;
.clearfix();
li {
float: left;
margin: 5px;
display: block;
}
}
// Forms and filters
// -----------------
// General styles
.form-horizontal {
width: @screen-tablet;
}
.form-group {
margin-bottom: 4px;
.clearfix();
clear: both;
.editing-form-label-cell, .filter-form-label-cell, .filter-form-condition-cell, .filter-form-condition-cell-generated, .filter-form-value-cell {
width: 33.33333333%;
float: left;
}
.editing-form-value-cell {
width: 66.66666667%;
float: left;
}
.editing-form-label-cell {
text-align: right;
}
.editing-form-value-cell-offset {
margin-left: 33.33333333%;
}
// html markup of radios is not consistent (divs, tables)
.radio {
display: block;
label {
margin-right: 6px;
}
}
.radio-list-vertical {
margin-bottom: 10px;
}
// Full width for textarea column
.textarea-full-width {
width: 100%;
.form-control {
width: 100%;
}
}
}
// submit button row
.form-group-submit {
margin-left: 33.33333333%;
}
// buttons row in filter (e.g. report)
.form-group-buttons {
margin-left: 33.33333333%;
}
// Input widths across the site
// e.g. in Phone number
input[type="text"].input-width-15 {
width: @base-unit * 2;
}
// e.g. in Phone number, select in image gallery
input[type="text"].input-width-20,
select.input-width-20 {
width: @base-unit * 3;
}
// Specialties
// Newsletter subscription form
.NewsletterSubscription {
.form-horizontal {
width: 220px;
.control-label {
padding-right: 8px;
}
}
}
// Logon form
.LogonDialog {
tr {
// mysteriously, it works in IE7 as well
td:first-child {
text-align: right;
}
}
}
// Registration form
.registration-form {
.form-horizontal {
width: 400px;
}
}
// Password strength indicator
.password-strength {
.password-strength-text {
line-height: @line-height-100;
}
.passw-strength-indicator {
margin-bottom: @base-unit * 0.25;
max-width: @input-max-width;
width: 100%;
height: (@base-unit * 0.5);
background-color: @color-gray-150;
div {
height: 100%;
}
}
.password-strength-not-acceptable,
.password-strength-weak,
.password-strength-acceptable,
.password-strength-average,
.password-strength-strong,
.password-strength-excellent {
font-weight: bold;
}
.passw-indicator-not-acceptable {
background-color: @color-red-70;
width: 0;
}
.passw-indicator-weak {
background-color: @color-red-70;
width: 20%;
}
.passw-indicator-acceptable {
background-color: @color-orange-80;
width: 40%;
}
.passw-indicator-average {
background-color: @color-blue-100;
width: 60%;
}
.passw-indicator-strong {
background-color: @color-green-120;
width: 80%;
}
.passw-indicator-excellent {
background-color: @color-green-100;
width: 100%;
}
}
// Magnifier watermark in filter/search box
.form-search-container .icon-magnifier {
position: relative;
width: 16px;
left: -8px;
margin-left: -16px;
}
// Shopping cart
// -------------
.CartStepBody .currency-selector div {
display: inline-block;
vertical-align: top;
}
// Animations
// ----------
.spinning {
display: inline-block;
animation: spin 1.2s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
position: absolute;
left: 0;
z-index: @zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: @dropdown-min-width;
padding: 0;
margin: 0; // override default ul
list-style: none;
font-size: @font-size-base;
background-color: @dropdown-bg;
border-radius: @border-radius-small;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
font-family: Arial;
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
&.pull-up {
top: auto;
bottom: 100%;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdown-divider-bg);
}
> li, > .jspContainer > .jspPane > li {
word-wrap: break-word;
width: 100%;
box-sizing: border-box;
// Links within the dropdown menu
> a, > span > a {
color: @dropdown-link-color;
line-height: @line-height-100;
padding: @padding-small-horizontal @padding-base-horizontal;
display: block;
clear: both;
font-weight: normal;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
}
}
// Button group has relative positioning
.btn-group .dropdown-menu {
top: 100%;
}
// Hover/Focus state
.dropdown-menu > li > a,
.dropdown-menu > li > span > a {
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
}
// Disable disabled hover
.dropdown-menu > li.disabled > a,
.dropdown-menu > li.disabled > span > a {
background-color: @dropdown-bg;
}
// Active state
.dropdown-menu > .active > a,
.dropdown-menu > .active > span > a {
&,
&:hover,
&:focus {
color: @dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: @dropdown-link-active-bg;
}
}
// Disabled state
.dropdown-menu .disabled a {
.dropdown-disabled();
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Breadcrumbs
// -----------
.breadcrumb {
list-style: none;
color: @breadcrumb-color;
> li {
display: inline-block;
vertical-align: middle;
& + li:before {
font-family: @icon-font-name;
content: @icon-chevron-right; // ">"
.cms-icon-50;
margin: 0 @base-unit * 0.25;
text-align: center;
}
}
a {
color: @breadcrumb-color;
}
}
// Alerts
// ------
.alert {
padding: (@base-unit * 0.5) (@base-unit * 0.5) (@base-unit * 0.5) (@base-unit * 4);
margin-bottom: @base-unit * 0.5;
margin-right: @base-unit;
display: inline-block;
z-index: @zindex-alert;
max-height: 90%;
overflow: auto;
position: relative;
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: inherit;
}
// Main icon
.alert-icon {
position: absolute;
top: @base-unit * 0.5;
left: @base-unit;
i {
float: left;
font-size: 30px;
.RTL & {
float: right;
padding: 0 0 0 (@base-unit * 0.5);
}
}
}
// Text
.alert-label {
padding: @base-unit * 0.375 @base-unit * 0.5 @base-unit * 0.375 0;
display: inline-block;
}
}
.alert-success {
.alert-variant(@alert-success-bg;
@alert-success-text;
@alert-success-icon-color;
@alert-success-icon-close-color
);
z-index: @zindex-alert-info;
}
.alert-info {
.alert-variant(@alert-info-bg;
@alert-info-text;
@alert-info-icon-color;
@alert-info-icon-close-color
);
}
.alert-warning {
.alert-variant(@alert-warning-bg;
@alert-warning-text;
@alert-warning-icon-color;
@alert-warning-icon-close-color
);
}
.alert-error {
.alert-variant(@alert-error-bg;
@alert-error-text;
@alert-error-icon-color;
@alert-error-icon-close-color
);
}
// Calendar
// --------
.datetime-ui-time-textbox {
width: 45px;
text-align: right;
padding-right: 5px;
}
.datetime-ui-timeicon-s {
background-position: -65px 0px;
}
.datetime-ui-datepicker-title a i {
margin-top: 7px;
}
// Web parts
.HiddenButton {
display: none;
}
//Web parts - user contribution
.EditContributionEdit, .EditContributionDelete {
padding-right: 5px;
}
// Tabs
// ----
// Navigation (required by tabs)
.nav {
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
&:extend(.cms-bootstrap .clearfix all);
> li {
position: relative;
display: block;
> a {
position: relative;
display: block;
padding: @nav-link-padding;
&:hover,
&:focus {
text-decoration: none;
background-color: @nav-link-hover-bg;
}
}
// Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
color: @nav-disabled-link-color;
&:hover,
&:focus {
color: @nav-disabled-link-hover-color;
text-decoration: none;
background-color: transparent;
cursor: not-allowed;
}
}
}
// Open dropdowns
.open > a {
&,
&:hover,
&:focus {
background-color: @nav-link-hover-bg;
border-color: @link-color;
}
}
// Dividers (basically an hr) within the dropdown
.nav-divider {
.nav-divider();
}
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img {
max-width: none;
}
}
// Horizontal tabs
.nav-tabs-container-horizontal .nav-tabs {
min-height: 32px;
}
.nav-tabs {
padding-top: @base-unit;
> li {
line-height: @line-height-200;
}
// Actual tabs (as links)
> li > a, > li > div {
padding: 0 @padding-base-horizontal;
text-decoration: none;
color: @text-color;
cursor: pointer;
&:hover, &:focus {
background-color: @nav-tabs-active-link-hover-bg;
}
}
// Active state, and it's :hover to override normal :hover
.active a, .active div {
&,
&:hover,
&:focus {
background-color: @nav-tabs-active-link-bg;
}
}
.active .dropdown-menu a {
background-color: @dropdown-bg;
cursor: pointer;
&:hover,
&:focus {
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
}
.dropdown-menu {
z-index: @zindex-tabs;
}
.dropdown-toggle .tab-title, .active .dropdown-toggle .tab-original-title {
display: none;
}
.active .dropdown-toggle .tab-title, .dropdown-toggle .tab-original-title {
display: inline;
}
}
&.nav-tabs-bg {
background: @nav-tabs-container-bg;
}
// Horizontal tabs specialities
.nav-tabs-container-horizontal {
background-color: @nav-tabs-container-bg;
//height: @nav-tabs-horizontal-height;
line-height: @line-height-200;
padding: 0 @padding-base-horizontal;
li {
float: left;
a > img {
padding: @padding-small-horizontal;
}
}
.caret {
line-height: @base-unit * 0.5;
}
}
// Blank site Tabs - commented for preserving existing site tab styles (uncomment or apply to site CSS for getting simple style for tabs on webparts)
// ---------------
/*
@color-tabs-border: @color-gray-100;
.TabsHeader, .TabContainer {
margin-bottom: 10px;
}
.TabControl, .TabControlLeft, .TabControlRight {
border-bottom: 1px solid @color-tabs-border;
}
.TabControlSelected, .TabControlSelectedLeft, .TabControlSelectedRight {
border-top: 1px solid @color-tabs-border;
}
.TabControlSelectedLeft {
border-left: 1px solid @color-tabs-border;
}
.TabControlSelectedRight {
border-right: 1px solid @color-tabs-border;
}
*/
// UI Dialogs
// ----------
.dialog-header {
background: @color-gray-50;
padding-left: @base-unit;
h2 {
line-height: @dialog-header-height;
font-weight: @headings-font-weight;
}
.dialog-header-title {
position: relative;
display: inline;
font-size: @font-size-huge;
color: @color-white;
}
.dialog-header-action-buttons {
.pull-right;
display: table;
text-align: center;
.action-button {
display: table-cell;
vertical-align: middle;
height: @dialog-header-height;
&:hover {
background-color: @color-gray-70;
}
a {
color: @color-gray-100;
text-decoration: none;
display: table-cell;
min-width: @base-unit * 2;
vertical-align: middle;
height: @base-unit * 2;
}
}
.close-button {
background-color: @color-gray-70;
&:hover {
background-color: @color-gray-80;
}
}
}
}
// Dialog footer
.dialog-footer,
.PageFooterLine {
height: 64px;
padding: 16px;
background: #d6d9d6;
box-sizing: border-box;
.Buttons {
.fix-white-space();
.btn + .btn {
margin-left: 4px;
}
}
}
// Columns row in Advanced Export Dialog
.DialogPageContent {
.form-group {
.btn + .btn {
margin-left: 4px;
}
}
}
// Adjust dialog form
.checkbox,
.radio {
display: inline-block;
}
// UniGrid
// -------
.unigrid-actions .btn-icon {
border: none;
background: none;
margin: 0;
padding: @base-unit * 0.25;
}
.table .unigrid-selection {
vertical-align: middle;
}
//
// Tables
// ------
table {
max-width: 100%;
background-color: @table-bg;
}
th {
text-align: left;
}
// UniMatrix first column
.first-column {
width: @table-first-column-width;
}
// Main column width 10%
.main-column-10 {
width: @main-column-10;
}
// Main column width 20%
.main-column-20 {
width: @main-column-20;
}
// Main column width 30%
.main-column-30 {
width: @main-column-30;
}
// Main column width 40%
.main-column-40 {
width: @main-column-40;
}
// Main column width 50%
.main-column-50 {
width: @main-column-50;
}
// Main column width 60%
.main-column-60 {
width: @main-column-60;
}
// Main column width 70%
.main-column-70 {
width: @main-column-70;
}
// Main column width 80%
.main-column-80 {
width: @main-column-80;
}
// Main column width 90%
.main-column-90 {
width: @main-column-90;
}
// Main column width 100%
.main-column-100 {
width: @main-column-100;
}
// Class used in empty columns for filling purposes
.filling-column {
width: @main-column-100;
}
// Baseline styles
.table {
width: 100%;
white-space: nowrap;
margin-bottom: @table-margin-bottom;
font-family: @font-family-base;
font-size: @font-size-base;
border-collapse: collapse;
&.rows-middle-vertical-align {
td, td.unigrid-actions {
vertical-align: middle;
}
}
// Links
a {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
.SelectableItem {
color: @link-color;
text-decoration: underline;
cursor: pointer;
&:hover {
text-decoration: none;
}
}
// Actions in the table header styled as standard links
.table-header-action {
color: @link-color;
}
// Cells
thead,
tbody,
tfoot {
> tr {
> th,
> td {
padding: @table-cell-padding;
vertical-align: top;
line-height: @table-line-height;
font-family: @font-family-base;
font-size: @font-size-base;
}
}
}
// Head cells
thead {
th {
color: @table-th-text-color;
font-weight: bold;
background-color: @table-th-bg;
border-bottom: none;
// Icon only - obsolete
&.unigrid-actions-header-empty {
.unigrid-menu-panel {
padding: @base-unit * 0.125; // (2px)
}
}
i {
color: @table-icon-head-color;
padding: 0 0 0 @padding-small-horizontal;
cursor: pointer;
vertical-align: baseline;
// Menu icon
&.icon-menu {
padding: 0 @padding-small-horizontal 0 0;
}
// Sorting icon
&.icon-caret-up {
vertical-align: bottom;
}
}
a {
cursor: pointer;
color: @table-th-link-color;
&:hover {
text-decoration: none;
}
}
}
.with-filter th {
line-height: @base-unit * 2;
}
}
// Body cells
tbody {
> tr {
border-bottom: 1px solid @table-border-color;
border-top: 1px solid transparent;
> td {
// Actions cell - buttons are styled lower in this less file
&.unigrid-actions {
vertical-align: top;
padding: @base-unit* 0.25 @base-unit * 0.5;
}
// Flags exception
&.Translated,
&.Outdated,
&.NotAvailable {
line-height: @base-unit;
}
}
// Row borders
&:hover > td {
border-top: 1px solid @table-bg-hover-border;
border-bottom: 1px solid @table-bg-hover-border;
}
// Flags in pages listing exception
&:hover td.Translated,
&:hover td.Outdated,
&:hover td.NotAvailable {
border: none;
}
}
// Used in unimatrix
.highlighted {
background-color: @color-orange-100;
}
[class^="cms-icon-"], [class*=" cms-icon-"] {
padding: 0;
}
input[type="text"] {
height: @table-textbox-height;
padding-top: 0;
padding-bottom: 0;
}
}
// Remove top border from thead by default
caption + thead,
colgroup + thead,
thead:first-child {
tr:first-child {
th, td {
border-top: 0;
}
}
}
// Account for multiple tbody instances
tbody + tbody {
border-top: 1px solid @table-border-color;
}
// Nesting
.table {
background-color: @body-bg;
}
// Fix checkbox position in unigrid (bulk actions)
.radio,
.checkbox {
margin: 0;
padding: 0;
label {
margin: 0;
padding: 0;
&:before {
margin: 0;
vertical-align: middle;
}
&:before,
&:after {
bottom: @base-unit * 0.125; // special alignment
top: auto;
}
}
}
}
// Fix nested tables border
.table table tbody > tr:hover > td {
border: none;
}
.table-width-30 {
width: 30%;
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
> tbody {
> tr:nth-child(odd) {
> td,
> th {
background-color: @table-bg-accent;
}
}
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody {
> tr:hover {
> td,
> th {
background-color: @table-bg-hover;
}
}
}
}
// Table cell sizing
//
// Reset default table behavior
table col[class*="col-"] {
float: none;
display: table-column;
}
table {
td,
th {
&[class*="col-"] {
float: none;
display: table-cell;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.active,
> th.active,
&.active > td,
&.active > th {
background-color: @table-bg-active;
}
}
// Responsive tables
//
// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media screen and (max-width: @screen-sm) {
.table-responsive {
width: 100%;
margin-bottom: @base-unit;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid @table-border-color;
// Tighten up spacing and give a background color
> .table {
margin-bottom: 0;
background-color: @color-white;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}
// CMS buttons above the table
.table-buttons {
background-color: @color-gray-150;
padding: @base-unit;
margin-bottom: @base-unit * 0.125;
}
//Link to simple filter in the advanced filter above the table
.table-filter-simple-link {
padding-top: 2*@padding-base-vertical + 0.5*@base-unit + 1; // align the link with the button
}
// Width of column for bulk actions
.table-bulk {
width: @base-unit * 1.25;
}
// Centered checkboxes in permission-matrix
.permission-matrix {
& .content-before {
background-color: @color-green-130;
}
& td:first-child, th:first-child {
text-align: left;
}
& td, th {
text-align: center;
}
.warning-icon {
cursor: default;
color: @color-warning;
padding: 0;
}
}
//
// Unigrid document and file type icons
// ------------------------------------
.table {
.icon-doctype,
.icon-file-default,
.icon-folder {
padding-right: @padding-small-horizontal;
color: @light-bg-icon-color;
}
// ImportGridView
.warning-icon {
margin-left: @margin-50;
}
}
//
// Media library- thumbnail view - file type icons
// -----------------------------------------------
.ThumbnailsView .icon-file-default {
color: @light-bg-icon-color;
}
// New document type selection table with no borders and bg
// .ContentNew class can be removed from here as soon as unigrid control will support .table-blank instead just .table-hover)
.table-blank tbody > tr, .ContentNewClasses .table tbody > tr {
border: none;
&:hover td {
border: none;
background: none;
}
}
// New doc type in Pages
.ContentNewClasses .table tbody > tr td {
padding: @base-unit * 0.125 @padding-small-horizontal;
}
// Unigrid icons
.unigrid-actions {
// Text before/after action button in unigrid
.text-unigrid-action {
display: inline-table;
margin-top: @base-unit * 0.125;
}
// Unigrid buttons
.btn-unigrid-action {
height: auto;
// Font icons
&.icon-only {
vertical-align: middle;
padding: @base-unit * 0.25;
}
// Colors
// Gray - default
i {
display: block;
color: @color-gray-70;
}
// Green - e.g. add, play
&.icon-style-allow {
i {
color: @color-green-100;
}
}
// Yellow - e.g. exlamation mark
&.icon-style-warning {
i {
color: @color-warning;
}
}
// Red - e.g. remove, bin
&.icon-style-critical {
i {
color: @color-red-70;
}
}
// Hover for all
&:hover {
i,
.icon-style-allow,
.icon-style-warning,
.icon-style-critical {
color: @color-blue-70;
}
}
// Disabled style for all
&:disabled {
i,
.icon-style-allow,
.icon-style-warning,
.icon-style-critical {
color: @color-gray-70;
}
}
}
// Unigrid More actions button (...)
.unigrid-actionmenu {
display: inline-block;
}
// Unigrid image icons - customer can use images as well
input[type="image"] {
vertical-align: middle;
padding: @base-unit * 0.25;
}
// Uploader in unigrid
// Inline styles fix for indent
>div {
width: auto !important;
}
// Media library files
.MediaView,
// Attachements
.update,
// Form tab
.direct-file-uploader,
[class*="Uploader_"] {
// Override inline styles - useful also for web dav margin
width: @base-unit * 1.5 !important;
height: @base-unit * 1.5 !important;
i {
cursor: pointer;
padding: @base-unit * 0.25;
margin: 0;
}
// disabled state
& .uploader-button-disabled {
color: @color-gray-70;
&:hover {
i {
cursor: default;
}
}
}
}
// Special hover style
.MouseOver {
i:not(.icon-disabled) {
color: @color-blue-70;
}
}
}
// Image editor
// ------------
.ImageEditorMain {
border-bottom: 1px solid #999999 !important;
border-left: 1px solid #999999 !important;
}
.ImageEditorMain .MenuHeaderItemSelected {
border-bottom: 1px solid #999999 !important;
}
.ImageEditorMain .Divider {
background-color: #999999 !important;
}
.ImageEditorFrame {
border: 1px solid #999999 !important;
}
.ImageEditorMain .MenuHeaderItem, .ImageEditorMain .MenuHeaderItemSelected {
text-decoration: none;
color: #313131;
height: 26px;
background: url('../../CMSPages/GetResource.ashx?image=BackgroundImageEditor.png') repeat-x left bottom;
border-top: 1px solid #999999 !important;
}
.ModalPopupDialog .DialogPageContent {
min-height: 80px;
min-width: 475px;
padding: 16px;
}
.ModalPopupDialog {
background-color: #FFFFFF;
height: 176px;
left: 384px;
position: fixed;
top: 211px;
width: 495px;
z-index: 9998;
}
.WidgetTabsPageHeader .TextRight a {
color: #ffffff;
}
.ModalBackground {
background-color: #000;
opacity: 0.35;
}
// Categories
// ----------
.Categories {
.DialogLeftBlock {
height: 100%;
width: 251px;
float: left;
overflow: hidden;
}
.DialogRightBlock {
height: 100%;
overflow: hidden;
position: relative;
}
.PageTitleBreadCrumbsPadding {
border-bottom: 1px solid #CCCCCC;
display: block;
height: 15px;
padding: 7px 10px;
width: 100%;
}
}
.DialogTreeAreaSeparator {
background: url(../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Horizontal/Resizer.png) repeat-y scroll left top transparent;
float: left;
height: 100%;
width: 7px;
}
// Numeric spinner
// ---------------
.numeric-up-down {
.numeric-updown-buttons {
display: inline-block;
left: -22px;
position: relative;
height: 18px;
width: 16px;
.btn {
margin: 0;
padding: 0;
line-height: 8px;
height: 8px;
width: 16px;
font-size: 12px;
color: #403e3d;
border: none;
background: none;
position: absolute;
// Vertical position of the "bottom" button calculated from the input height
top: 14px;
// Vertical position of the "up" button
&:nth-child(1) {
margin-bottom: 2px;
top: 6px;
}
// Icons within buttons
i {
font-size: 12px;
line-height: 8px;
height: 8px;
}
}
}
// Textbox with up/down arrows
.form-control {
padding-right: 24px;
}
}
// Slider
// ------
// Horizontal layout
.slider-horizontal-rail {
height: 1px;
background-color: @color-gray-100;
margin-bottom: 10px;
margin-top: 10px;
position: relative;
}
.slider-horizontal-handle {
width: 10px;
height: 10px;
margin-top: -5px;
cursor: pointer;
}
// Vertical layout
.slider-vertical-rail {
width: 1px;
height: 150px;
margin-left: 6px;
position: relative;
background-color: @color-gray-100;
}
.slider-vertical-handle {
width: 10px;
height: 10px;
margin-left: -4px;
cursor: pointer;
}
// Uniselector
.UniSelector .btn-actions .btn {
vertical-align: middle;
}
// Context menu
// ------------
// Context menu styles
@context-menu-level0-bg: @color-gray-70;
@context-menu-level0-hover-bg: @color-gray-80;
@context-menu-level1-bg: @color-gray-80;
@context-menu-level1-hover-bg: @color-gray-90;
@context-menu-level2-bg: @color-gray-90;
@context-menu-level2-hover-bg: @color-gray-100;
@dropdown-divider-level0-bg: @dropdown-divider-bg;
@dropdown-divider-level1-bg: @color-gray-90;
@dropdown-divider-level2-bg: @color-gray-100;
&.ContextMenu {
border: none !important;
}
&.ContextMenu,
.TreeContextMenu,
.PortalContextMenu {
border-radius: @border-radius-small;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
background: @context-menu-level0-bg;
.item-last,
.Item {
border: none !important;
display: block;
height: auto !important;
text-decoration: none !important;
text-align: left !important;
.RTL & {
text-align: right !important;
}
.Name,
.NameInactive {
border: inherit !important;
text-decoration: inherit !important;
font-size: @font-size-base;
font-family: @font-family-base;
line-height: @line-height-80 !important;
color: @color-white !important;
}
}
.ItemDisabled {
cursor: not-allowed;
.Name,
.NameInactive {
cursor: not-allowed;
}
}
.ItemPadding {
padding: (@base-unit * 0.5) @base-unit;
border: none !important;
cursor: pointer;
line-height: @line-height-80;
.ImgLoader {
display: inline-block;
padding: 0px (@base-unit * 0.5);
height: 15px;
}
img {
display: inline-block;
}
}
.item-last:hover,
.Item:hover,
.ItemSelected {
cursor: pointer;
background: @context-menu-level0-hover-bg;
}
.Separator {
.nav-divider(@dropdown-divider-level0-bg);
}
}
.PortalContextMenu {
min-width: @base-unit * 8;
}
.TreeContextMenu {
min-width: @base-unit * 8;
> .TreeContextMenu {
box-shadow: none;
}
}
.TreeNewContextMenu {
min-width: @base-unit * 12;
}
.WebPartContextMenu,
.ZoneContextMenu,
.PlaceholderContextMenu {
min-width: @base-unit * 10;
}
// Portal context menu - additional styles
.PortalContextMenu .ItemDisabled {
.dropdown-disabled() !important;
}
.PortalContextMenu.CPMenu {
display: none;
}
&.ContextMenuLevel_1 {
// extra styles for the second context menu level
background: @context-menu-level1-bg;
.Item:hover,
.ItemSelected {
background: @context-menu-level1-hover-bg;
}
.Separator {
.nav-divider(@dropdown-divider-level1-bg);
}
}
&.ContextMenuLevel_2 {
// extra styles for the third context menu level
background: @context-menu-level2-bg;
.Item:hover,
.ItemSelected {
background: @context-menu-level2-hover-bg;
}
.Separator {
.nav-divider(@dropdown-divider-level2-bg);
}
}
// Button groups
// --------------------------------------------------
// Button carets
//
// Match the button text color to the arrow/caret for indicating dropdown-ness.
.caret {
.btn-default & {
border-top-color: @btn-default-color;
}
.btn-primary & {
border-top-color: @color-white;
}
}
.dropup {
& .btn-default .caret {
border-bottom-color: @btn-default-color;
}
.btn-primary {
.caret {
border-bottom-color: @color-white;
}
}
}
// Make the div behave like a button
.btn-group {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&.active {
z-index: @zindex-btn-group-active;
}
&.active {
background: @btn-secondary-bg;
color: @btn-secondary-color;
box-shadow: @btn-secondary-box-shadow 0 -@btn-shadow-width 0 inset;
i, .badge {
color: @btn-secondary-color;
}
}
&:focus {
// Remove focus outline when dropdown JS adds it after closing the menu
outline: none;
}
// No space between buttons in the button group
& + .btn {
margin-left: 0;
}
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
.border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(0);
}
}
.btn-group > .btn-group:last-child > .btn:first-child {
.border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Negative space for dropdown toggle
.btn-group > .btn + .dropdown-toggle {
padding: 0 (@base-unit * 0.5);
}
.btn-group > .btn-lg + .dropdown-toggle {
padding: 0 (@base-unit * 0.75);
}
// Checkbox and radio options
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
display: none;
}
// Fix dropdown toggler height on blank (non-styled) sites
.dropdown-toggle i {
line-height: normal;
}
// Vertical separated buttons
// ----------------------
.btns-vertical {
display: inline-block;
vertical-align: top;
white-space: nowrap;
.btn {
margin-bottom: @base-unit * 0.5;
display: block;
// No horizontal space between buttons
+ .btn {
margin-left: 0;
}
//
&:last-child {
margin-bottom: 0;
}
}
}
// Date time form control with calendar
// ----------------------
// Calendar button
.date-time-picker .btn {
margin: 0 5px;
}
input.datetime-ui-time-textbox {
width: 27px;
border: 1px solid #999993;
}
.datetime-ui-datepicker-title a {
height: 22px;
}
.datetime-ui-datepicker-title a i.CalendarIcon {
margin-top: 3px;
}
// Link Now
.calendar-action {
margin-right: 5px;
}
// Group polls
.PollsEdit .control-label {
display: inline-block;
}
// Sets MultiFileUploader overlay and hides original input, does not affect DirecFileUploaderControl
.uploader-overlay-div {
background: rgba(0,0,0,0);
overflow: hidden;
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
> input[type="file"] {
display: none;
}
}
}