From 2fdf30ab540321f1beaefd646a6f70ed10898d05 Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Wed, 28 Nov 2018 12:21:23 +0800 Subject: [PATCH] sync --- scss/roojs-bootstrap/alert.scss | 23 + scss/roojs-bootstrap/calendar.scss | 593 +++++++++++ scss/roojs-bootstrap/carousel.scss | 92 ++ scss/roojs-bootstrap/checkbox.scss | 182 ++++ scss/roojs-bootstrap/combobox.scss | 286 +++++ scss/roojs-bootstrap/datepicker.scss | 457 ++++++++ scss/roojs-bootstrap/document-manager.scss | 207 ++++ scss/roojs-bootstrap/document-slider.scss | 73 ++ scss/roojs-bootstrap/document-viewer.scss | 57 + scss/roojs-bootstrap/dropdown.scss | 99 ++ scss/roojs-bootstrap/input.scss | 21 + scss/roojs-bootstrap/label-pill.scss | 5 + scss/roojs-bootstrap/layout.scss | 257 +++++ scss/roojs-bootstrap/list-group.scss | 5 + scss/roojs-bootstrap/mask.scss | 69 ++ scss/roojs-bootstrap/masonary-squares.scss | 120 +++ scss/roojs-bootstrap/modal.scss | 128 +++ scss/roojs-bootstrap/money-field.scss | 44 + scss/roojs-bootstrap/nav-progress-bar.scss | 114 ++ scss/roojs-bootstrap/nav-tabs.scss | 108 ++ scss/roojs-bootstrap/navbar.scss | 15 + scss/roojs-bootstrap/numberbox.scss | 8 + scss/roojs-bootstrap/phone-input.scss | 1092 ++++++++++++++++++++ scss/roojs-bootstrap/pull-xs-right.scss | 3 + scss/roojs-bootstrap/radio-set.scss | 150 +++ scss/roojs-bootstrap/roojs-bootstrap.scss | 38 + scss/roojs-bootstrap/secure-pass.scss | 46 + scss/roojs-bootstrap/select2.scss | 651 ++++++++++++ scss/roojs-bootstrap/sidebar-nav.scss | 197 ++++ scss/roojs-bootstrap/sticky-footer.scss | 36 + scss/roojs-bootstrap/table.scss | 99 ++ scss/roojs-bootstrap/top-bar.scss | 120 +++ scss/roojs-bootstrap/tweaks.scss | 109 ++ scss/roojs-bootstrap/upload-cropbox.scss | 71 ++ 34 files changed, 5575 insertions(+) create mode 100644 scss/roojs-bootstrap/alert.scss create mode 100644 scss/roojs-bootstrap/calendar.scss create mode 100644 scss/roojs-bootstrap/carousel.scss create mode 100644 scss/roojs-bootstrap/checkbox.scss create mode 100644 scss/roojs-bootstrap/combobox.scss create mode 100644 scss/roojs-bootstrap/datepicker.scss create mode 100644 scss/roojs-bootstrap/document-manager.scss create mode 100644 scss/roojs-bootstrap/document-slider.scss create mode 100644 scss/roojs-bootstrap/document-viewer.scss create mode 100644 scss/roojs-bootstrap/dropdown.scss create mode 100644 scss/roojs-bootstrap/input.scss create mode 100644 scss/roojs-bootstrap/label-pill.scss create mode 100644 scss/roojs-bootstrap/layout.scss create mode 100644 scss/roojs-bootstrap/list-group.scss create mode 100644 scss/roojs-bootstrap/mask.scss create mode 100644 scss/roojs-bootstrap/masonary-squares.scss create mode 100644 scss/roojs-bootstrap/modal.scss create mode 100644 scss/roojs-bootstrap/money-field.scss create mode 100644 scss/roojs-bootstrap/nav-progress-bar.scss create mode 100644 scss/roojs-bootstrap/nav-tabs.scss create mode 100644 scss/roojs-bootstrap/navbar.scss create mode 100644 scss/roojs-bootstrap/numberbox.scss create mode 100644 scss/roojs-bootstrap/phone-input.scss create mode 100644 scss/roojs-bootstrap/pull-xs-right.scss create mode 100644 scss/roojs-bootstrap/radio-set.scss create mode 100644 scss/roojs-bootstrap/roojs-bootstrap.scss create mode 100644 scss/roojs-bootstrap/secure-pass.scss create mode 100644 scss/roojs-bootstrap/select2.scss create mode 100644 scss/roojs-bootstrap/sidebar-nav.scss create mode 100644 scss/roojs-bootstrap/sticky-footer.scss create mode 100644 scss/roojs-bootstrap/table.scss create mode 100644 scss/roojs-bootstrap/top-bar.scss create mode 100644 scss/roojs-bootstrap/tweaks.scss create mode 100644 scss/roojs-bootstrap/upload-cropbox.scss diff --git a/scss/roojs-bootstrap/alert.scss b/scss/roojs-bootstrap/alert.scss new file mode 100644 index 0000000000..d849d0fc8b --- /dev/null +++ b/scss/roojs-bootstrap/alert.scss @@ -0,0 +1,23 @@ + +.alert { + padding-left: 30px; + margin-top: 20px; + margin-left: 15px; + position: relative; +} + +.alert > .fa, +.alert > .glyphicon { + position: absolute; + left: -15px; + top: -15px; + width: 35px; + height: 35px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + line-height: 35px; + text-align: center; + background: inherit; + border: inherit; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/calendar.scss b/scss/roojs-bootstrap/calendar.scss new file mode 100644 index 0000000000..9e7872b9de --- /dev/null +++ b/scss/roojs-bootstrap/calendar.scss @@ -0,0 +1,593 @@ +/*! + * FullCalendar v1.6.4 Stylesheet + * Docs & License: http://arshaw.com/fullcalendar/ + * (c) 2013 Adam Shaw + * + * When taken - was MIT licence (18/Feb/2014) + */ + +.fc { + direction: ltr; + text-align: left; + margin: 0; + font-family: Lucida Sans,Arial,sans-serif; +} + +.fc table { + border-collapse: collapse; + border-spacing: 0; +} + +html .fc, +.fc table { + font-size: 1em; +} + +.fc td, +.fc th { + padding: 0; + vertical-align: top; + -moz-user-select: -moz-none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + user-select: none; +} + + + +/* Header +------------------------------------------------------------------------*/ + +.fc-header td { + white-space: nowrap; +} + +.fc-header-left { + width: 25%; + text-align: left; +} + +.fc-header-center { + text-align: center; +} + +.fc-header-right { + width: 25%; + text-align: right; +} + +.fc-header-title { + display: inline-block; + vertical-align: top; +} + +.fc-header-title h2 { + margin-top: 0; + white-space: nowrap; + font-size: 1.5em; + font-family: Lucida Sans,Arial,sans-serif; + font-weight: bold; + line-height: normal;; + margin:0; +} + +.fc .fc-header-space { + padding-left: 10px; +} + +.fc-header .fc-button { + margin-bottom: 1em; + vertical-align: top; +} + +/* buttons edges butting together */ + +.fc-header .fc-button { + margin-right: -1px; +} + +.fc-header .fc-corner-right, /* non-theme */ +.fc-header .ui-corner-right { /* theme */ + margin-right: 0; /* back to normal */ +} + +/* button layering (for border precedence) */ + +.fc-header .fc-state-hover, +.fc-header .ui-state-hover { + z-index: 2; +} + +.fc-header .fc-state-down { + z-index: 3; +} + +.fc-header .fc-state-active, +.fc-header .ui-state-active { + z-index: 4; +} + +/* Content +------------------------------------------------------------------------*/ + +.fc-content { + clear: both; + zoom: 1; /* for IE7, gives accurate coordinates for [un]freezeContentHeight */ +} + +.fc-view { + width: 100%; + overflow: hidden; +} + +/* Cell Styles +------------------------------------------------------------------------*/ + +.fc-widget-header, /* , usually */ +.fc-widget-content { /* , usually */ + border: 1px solid $gray-light; +} + +.fc-state-highlight { /* today cell */ /* TODO: add .fc-today to */ + background: $brand-warning; //#fcf8e3 +} + +.fc-cell-overlay { /* semi-transparent rectangle while dragging */ + background: $brand-info; //#bce8f1 + opacity: .3; + filter: alpha(opacity=30); /* for IE */ +} + +/* Buttons +------------------------------------------------------------------------*/ + +.fc-button { + position: relative; + display: inline-block; + padding: 0 .6em; + overflow: hidden; + height: 1.9em; + line-height: 1.9em; + white-space: nowrap; + cursor: pointer; +} + +.fc-state-default { /* non-theme */ + border: 1px solid; +} + +.fc-state-default.fc-corner-left { /* non-theme */ + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.fc-state-default.fc-corner-right { /* non-theme */ + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +/* + Our default prev/next buttons use HTML entities like ‹ › « » + and we'll try to make them look good cross-browser. +*/ + +.fc-text-arrow { + margin: 0 .1em; + font-size: 2em; + font-family: "Courier New", Courier, monospace; + vertical-align: baseline; /* for IE7 */ +} + +.fc-button-prev .fc-text-arrow, +.fc-button-next .fc-text-arrow { /* for ‹ › */ + font-weight: bold; +} + +/* icon (for jquery ui) */ + +.fc-button .fc-icon-wrap { + position: relative; + float: left; + top: 50%; +} + +.fc-button .ui-icon { + position: relative; + float: left; + margin-top: -50%; + *margin-top: 0; + *top: -50%; +} + +/* + button states + borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/) +*/ + +.fc-state-default { + background-color: $well-bg; + background-image: -moz-linear-gradient(top, $body-bg, $gray-light); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($body-bg), to($gray-light)); + background-image: -webkit-linear-gradient(top, $body-bg, $gray-light); + background-image: -o-linear-gradient(top, $body-bg, $gray-light); + background-image: linear-gradient(to bottom, $body-bg, $gray-light); + background-repeat: repeat-x; + border-color: $gray-light $gray-light $gray-light; + border-color: $black-opacity-20 $black-opacity-20 $black-opacity-50; + color: $gray-dark; +} + +.fc-state-hover, +.fc-state-down, +.fc-state-active, +.fc-state-disabled { + color: $gray-dark; + background-color: $gray-light; +} + +.fc-state-hover { + color: $gray-dark; + text-decoration: none; + background-position: 0 -15px; + -webkit-transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + transition: background-position 0.1s linear; +} + +.fc-state-down, +.fc-state-active { + background-color: $gray-light; + background-image: none; + outline: 0; + box-shadow: inset 0 2px 4px $black-opacity-20, 0 1px 2px $black-opacity-20; +} + +.fc-state-disabled { + cursor: default; + background-image: none; + opacity: 0.65; + filter: alpha(opacity=65); + box-shadow: none; +} + +/* Global Event Styles +------------------------------------------------------------------------*/ + +.fc-event-container > * { + z-index: 8; +} + +.fc-event-container > .ui-draggable-dragging, +.fc-event-container > .ui-resizable-resizing { + z-index: 9; +} + +.fc-event { + border: 1px solid $brand-primary; //#3a87ad; /* default BORDER color */ + background-color: $brand-primary; //#3a87ad; /* default BACKGROUND color */ + color: $body-bg; /* default TEXT color */ + font-size: .85em; + cursor: default; +} + +a.fc-event { + text-decoration: none; +} + +a.fc-event, +.fc-event-draggable { + cursor: pointer; +} + +.fc-rtl .fc-event { + text-align: right; +} + +.fc-event-inner { + width: 100%; + height: 100%; + overflow: hidden; +} + +.fc-event-time, +.fc-event-title { + padding: 0 1px; + overflow: hidden; + white-space: nowrap; +} + +.fc .ui-resizable-handle { + display: block; + position: absolute; + z-index: 99999; + overflow: hidden; /* hacky spaces (IE6/7) */ + font-size: 300%; /* */ + line-height: 50%; /* */ +} + + +/* Horizontal Events +------------------------------------------------------------------------*/ + +.fc-event-hori { + border-width: 1px 0; + margin-bottom: 1px; +} + +.fc-ltr .fc-event-hori.fc-event-start, +.fc-rtl .fc-event-hori.fc-event-end { + border-left-width: 1px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} + +.fc-ltr .fc-event-hori.fc-event-end, +.fc-rtl .fc-event-hori.fc-event-start { + border-right-width: 1px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} + +/* resizable */ + +.fc-event-hori .ui-resizable-e { + top: 0 !important; /* importants override pre jquery ui 1.7 styles */ + right: -3px !important; + width: 7px !important; + height: 100% !important; + cursor: e-resize; +} + +.fc-event-hori .ui-resizable-w { + top: 0 !important; + left: -3px !important; + width: 7px !important; + height: 100% !important; + cursor: w-resize; +} + +.fc-event-hori .ui-resizable-handle { + _padding-bottom: 14px; /* IE6 had 0 height */ +} + + + +/* Reusable Separate-border Table +------------------------------------------------------------*/ + +table.fc-border-separate { + border-collapse: separate; +} + +.fc-border-separate th, +.fc-border-separate td { + border-width: 1px 0 0 1px; +} + +.fc-border-separate th.fc-last, +.fc-border-separate td.fc-last { + border-right-width: 1px; +} + +.fc-border-separate tr.fc-last th, +.fc-border-separate tr.fc-last td { + border-bottom-width: 1px; +} + +.fc-border-separate tbody tr.fc-first td, +.fc-border-separate tbody tr.fc-first th { + border-top-width: 0; +} + + + +/* Month View, Basic Week View, Basic Day View +------------------------------------------------------------------------*/ + +.fc-grid th { + text-align: center; +} + +.fc .fc-week-number { + width: 22px; + text-align: center; +} + +.fc .fc-week-number div { + padding: 0 2px; +} + +.fc-grid .fc-day-number { + float: right; + padding: 0 2px; +} + +.fc-grid .fc-other-month .fc-day-number { + opacity: 0.3; + filter: alpha(opacity=30); /* for IE */ + /* opacity with small font can sometimes look too faded + might want to set the 'color' property instead + making day-numbers bold also fixes the problem */ +} + +.fc-grid .fc-day-content { + clear: both; + padding: 2px 2px 1px; /* distance between events and day edges */ +} + +/* event styles */ + +.fc-grid .fc-event-time { + font-weight: bold; +} + +/* right-to-left */ + +.fc-rtl .fc-grid .fc-day-number { + float: left; +} + +.fc-rtl .fc-grid .fc-event-time { + float: right; +} + + + +/* Agenda Week View, Agenda Day View +------------------------------------------------------------------------*/ + +.fc-agenda table { + border-collapse: separate; +} + +.fc-agenda-days th { + text-align: center; +} + +.fc-agenda .fc-agenda-axis { + width: 50px; + padding: 0 4px; + vertical-align: middle; + text-align: right; + white-space: nowrap; + font-weight: normal; +} + +.fc-agenda .fc-week-number { + font-weight: bold; +} + +.fc-agenda .fc-day-content { + padding: 2px 2px 1px; +} + +/* make axis border take precedence */ + +.fc-agenda-days .fc-agenda-axis { + border-right-width: 1px; +} + +.fc-agenda-days .fc-col0 { + border-left-width: 0; +} + +/* all-day area */ + +.fc-agenda-allday th { + border-width: 0 1px; +} + +.fc-agenda-allday .fc-day-content { + min-height: 34px; /* TODO: doesnt work well in quirksmode */ + _height: 34px; +} + +/* divider (between all-day and slots) */ + +.fc-agenda-divider-inner { + height: 2px; + overflow: hidden; +} + +.fc-widget-header .fc-agenda-divider-inner { + background: $gray-lighter; +} + +/* slot rows */ + +.fc-agenda-slots th { + border-width: 1px 1px 0; +} + +.fc-agenda-slots td { + border-width: 1px 0 0; + background: none; +} + +.fc-agenda-slots td div { + height: 20px; +} + +.fc-agenda-slots tr.fc-slot0 th, +.fc-agenda-slots tr.fc-slot0 td { + border-top-width: 0; +} + +.fc-agenda-slots tr.fc-minor th, +.fc-agenda-slots tr.fc-minor td { + border-top-style: dotted; +} + +.fc-agenda-slots tr.fc-minor th.ui-widget-header { + *border-top-style: solid; /* doesn't work with background in IE6/7 */ +} + + + +/* Vertical Events +------------------------------------------------------------------------*/ + +.fc-event-vert { + border-width: 0 1px; +} + +.fc-event-vert.fc-event-start { + border-top-width: 1px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} + +.fc-event-vert.fc-event-end { + border-bottom-width: 1px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} + +.fc-event-vert .fc-event-time { + white-space: nowrap; + font-size: 10px; +} + +.fc-event-vert .fc-event-inner { + position: relative; + z-index: 2; +} + +.fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay */ + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: $body-bg; + opacity: .25; + filter: alpha(opacity=25); +} + +.fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */ +.fc-select-helper .fc-event-bg { + display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */ +} + +/* resizable */ + +.fc-event-vert .ui-resizable-s { + bottom: 0 !important; /* importants override pre jquery ui 1.7 styles */ + width: 100% !important; + height: 8px !important; + overflow: hidden !important; + line-height: 8px !important; + font-size: 11px !important; + font-family: monospace; + text-align: center; + cursor: s-resize; +} + +.fc-agenda .ui-resizable-resizing { /* TODO: better selector */ + _overflow: hidden; +} + + diff --git a/scss/roojs-bootstrap/carousel.scss b/scss/roojs-bootstrap/carousel.scss new file mode 100644 index 0000000000..d6d4c4ad80 --- /dev/null +++ b/scss/roojs-bootstrap/carousel.scss @@ -0,0 +1,92 @@ +.clear { + clear: both; +} + +.carousel-bullets { + height: 17px; + bottom: 20px; + width: 100%; + text-align: center; + + z-index: 1000; + position: absolute; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + -moz-opacity: 1; + -khtml-opacity: 1; + opacity: 1; + -webkit-transition: opacity 0.2s ease-out; + -moz-transition: opacity 0.2s ease-out; + -o-transition: opacity 0.2s ease-out; + -ms-transition: opacity 0.2s ease-out; + -webkit-transform: translateZ(5px); +} + +.carousel-bullets > .bullet { + cursor: pointer; + position: relative !important; + background: rgba(0, 0, 0, 0.5) !important; + -webkit-border-radius: 10px; + border-radius: 10px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + width: 6px !important; + height: 6px !important; + border: 5px solid rgba(0, 0, 0, 0) !important; + display: inline-block; + margin-right: 2px !important; + margin-bottom: 0px !important; + -webkit-transition: background-color 0.2s, border-color 0.2s; + -moz-transition: background-color 0.2s, border-color 0.2s; + -o-transition: background-color 0.2s, border-color 0.2s; + -ms-transition: background-color 0.2s, border-color 0.2s; + transition: background-color 0.2s, border-color 0.2s; + float:none !important; + box-sizing:content-box; + -moz-box-sizing:content-box; + -webkit-box-sizing:content-box; +} + +.carousel-bullets > .bullet:hover, +.carousel-bullets > .bullet.selected { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + background: rgba(255, 255, 255, 1) !important; + width: 6px !important; + height: 6px !important; + border: 5px solid rgba(0, 0, 0, 1) !important; +} + +.carousel-inner > .carousel-arrow > .carousel-prev { + position: absolute; + display: block; + top: 50%; + color: $body-bg; + z-index: 100; + cursor: pointer; + padding: 10px; + margin-top: -22px; + left: 0; +} + +.carousel-inner > .carousel-arrow > .carousel-next { + position: absolute; + display: block; + top: 50%; + color: $body-bg; + z-index: 100; + cursor: pointer; + padding: 10px; + margin-top: -22px; + right: 0; +} + +.carousel-inner > .carousel-arrow > .carousel-prev > i, +.carousel-inner > .carousel-arrow > .carousel-next > i { + font-size: 24px; +} + +.carousel-inner .tab-pane.clickable { + cursor: pointer; +} diff --git a/scss/roojs-bootstrap/checkbox.scss b/scss/roojs-bootstrap/checkbox.scss new file mode 100644 index 0000000000..bfed23fe8a --- /dev/null +++ b/scss/roojs-bootstrap/checkbox.scss @@ -0,0 +1,182 @@ +/* + * + * From https://github.com/flatlogic/awesome-bootstrap-checkbox + * + */ +.checkbox label { + display: inline-block; + position: relative; + padding-left: 5px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.checkbox label::after { + display: inline-block; + position: absolute; + width: 16px; + height: 16px; + left: 0; + top: 0; + margin-left: -20px; + padding-left: 3px; + padding-top: 1px; + font-size: 11px; + color: $gray; } +.checkbox input[type="checkbox"] { + display: none; } +.checkbox input[type="checkbox"]:checked + label::after { + font-size: 18px; + padding-top: 0px; + font-family: 'Font Awesome 5 Free 400'; + font-weight: 900; + color: $brand-success; + content: "\f14a"; } +.checkbox input[type="checkbox"]:not(:checked) + label::after { + font-size: 18px; + padding-top: 0px; + font-family: 'Font Awesome 5 Free 400'; + font-weight: 900; + content: "\f0c8"; } + +.checkbox input[type="checkbox"]:disabled + label { + opacity: 0.65; } +.checkbox input[type="checkbox"]:disabled + label::before { + background-color: $gray-lighter; + cursor: not-allowed; } +.checkbox.checkbox-circle label::before { + border-radius: 50%; } + +.checkbox-primary input[type="checkbox"]:checked + label::before { + background-color: $brand-primary; + border-color: $brand-primary; } +.checkbox-primary input[type="checkbox"]:checked + label::after { + color: $body-bg; } + +.checkbox-danger input[type="checkbox"]:checked + label::before { + background-color: $brand-danger; + border-color: $brand-danger; } +.checkbox-danger input[type="checkbox"]:checked + label::after { + color: $body-bg; } + +.checkbox-info input[type="checkbox"]:checked + label::before { + background-color: $brand-info; + border-color: $brand-info; } +.checkbox-info input[type="checkbox"]:checked + label::after { + color: $body-bg; } + +.checkbox-warning input[type="checkbox"]:checked + label::before { + background-color: $brand-warning; + border-color: $brand-warning; } +.checkbox-warning input[type="checkbox"]:checked + label::after { + color: $body-bg; } + +.checkbox-success input[type="checkbox"]:checked + label::before { + background-color: $brand-success; + border-color: $brand-success; } +.checkbox-success input[type="checkbox"]:checked + label::after { + color: $body-bg; } + +/* before is the outer cicle */ +/* after is the inner circle.. */ + + + +.radio label { + display: inline-block; + position: relative; + padding-left: 5px; } +.radio label::before { + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + left: 0; + margin-left: -20px; + border: 1px solid $gray-light; + border-radius: 50%; + background-color: $body-bg; + -webkit-transition: border 0.15s ease-in-out; + -o-transition: border 0.15s ease-in-out; + transition: border 0.15s ease-in-out; } +.radio label::after { + display: inline-block; + position: absolute; + content: " "; + width: 11px; + height: 11px; + left: 3px; + top: 3px; + margin-left: -20px; + border-radius: 50%; + background-color: $body-bg; + -webkit-transform: scale(0, 0); + -ms-transform: scale(0, 0); + -o-transform: scale(0, 0); + transform: scale(0, 0); + -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); + -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); + -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); + transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); +} +.radio input[type="radio"] { + display: none; +} +.radio input[type="radio"]:checked + label::after { + -webkit-transform: scale(1, 1); + -ms-transform: scale(1, 1); + -o-transform: scale(1, 1); + transform: scale(1, 1); + background-color: $gray; +} +.radio input[type="radio"]:disabled + label { + opacity: 0.65; } +.radio input[type="radio"]:disabled + label::before { + cursor: not-allowed; } + +.radio-primary input[type="radio"] + label::after { + background-color: $body-bg; } +.radio-primary input[type="radio"]:checked + label::before { + border-color: $brand-primary; } +.radio-primary input[type="radio"]:checked + label::after { + background-color: $brand-primary; } + +.radio-danger input[type="radio"] + label::after { + background-color: $brand-danger; } +.radio-danger input[type="radio"]:checked + label::before { + border-color: $brand-danger; } +.radio-danger input[type="radio"]:checked + label::after { + background-color: $brand-danger; } + + + +.radio-info input[type="radio"] + label::after { + background-color: $body-bg; +} +.radio-info input[type="radio"]:checked + label::before { + border-color: $brand-info; } +.radio-info input[type="radio"]:checked + label::after { + background-color: $brand-info; } + +.radio-warning input[type="radio"] + label::after { + background-color: $body-bg; } +.radio-warning input[type="radio"]:checked + label::before { + border-color: $brand-warning; } +.radio-warning input[type="radio"]:checked + label::after { + background-color: $brand-warning; } + +.radio-success input[type="radio"] + label::after { + background-color: $body-bg; } +.radio-success input[type="radio"]:checked + label::before { + border-color: $brand-success; } +.radio-success input[type="radio"]:checked + label::after { + background-color: $brand-success; } + +.checkbox.checkbox-inline, +.radio.radio-inline { + margin-top: 0; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/combobox.scss b/scss/roojs-bootstrap/combobox.scss new file mode 100644 index 0000000000..cf3b723bfe --- /dev/null +++ b/scss/roojs-bootstrap/combobox.scss @@ -0,0 +1,286 @@ +/* + * + * From https://github.com/danielfarrell/bootstrap-combobox + * + */ + +.combobox-container { + margin-bottom: 5px; + *zoom: 1; + display: inline-table; +} +.combobox-container:before, +.combobox-container:after { + display: table; + content: ""; +} +.combobox-container:after { + /* clear: both; */ +} +.combobox-container input, +.combobox-container .uneditable-input { + -webkit-border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; +} +.combobox-container input:focus, +.combobox-container .uneditable-input:focus { + position: relative; + z-index: 2; +} +.combobox-container .uneditable-input { + border-left-color: $gray-light; +} +.combobox-container .add-on { + float: left; + display: inline-block; + width: auto; + min-width: 16px; + height: inherit !important; + margin-right: -1px; + padding: 4px 5px; + font-weight: normal; + color: $gray-light; + text-align: center; + text-shadow: 0 1px 0 $body-bg; + background-color: $well-bg; + border: 1px solid $gray-light; + -webkit-border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; + +} +.combobox-container .active { + background-color: $brand-primary; //#3875d7; + color: $body-bg; +} +.combobox-container input, +.combobox-container .uneditable-input { + float: left; + -webkit-border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; +} +.combobox-container .uneditable-input { + border-left-color: $gray-lighter; + border-right-color: $gray-light; +} +.combobox-container .add-on { + margin-right: 0; + margin-left: -1px; + -webkit-border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; +} +.combobox-container input:first-child { + *margin-left: -160px; +} +.combobox-container input:first-child + .add-on { + *margin-left: -21px; +} +.combobox-container select { + display: inline-block; + width: 0; + height: 0; + border: 0; + padding: 0; + margin: 0; + text-indent: -99999px; + *text-indent: 0; +} +.form-search .combobox-container, +.form-inline .combobox-container { + display: inline-block; + margin-bottom: 0; + vertical-align: top; +} +.form-search .combobox-container .add-on, +.form-inline .combobox-container .add-on { + vertical-align: middle; +} +.combobox-selected .combobox-clear { + display: inline-block; +} +.combobox-selected .caret { + display: none; +} +.combobox-clear { + display: none; + width: 14px; + height: 14px; + line-height: 14px; + vertical-align: top; + opacity: 0.3; + filter: alpha(opacity=30); +} +.dropdown:hover .combobox-clear, +.open.dropdown .combobox-clear { + opacity: 1; + filter: alpha(opacity=100); +} +.btn .combobox-clear { + margin-top: 1px; + margin-left: 1px; +} +.btn:hover .combobox-clear, +.open.btn-group .combobox-clear { + opacity: 1; + filter: alpha(opacity=100); +} +.typeahead-long { + max-height: 300px; + overflow-y: auto; +} +.control-group.error .combobox-container .add-on { + color: $brand-danger; //#B94A48; + border-color: $brand-danger; //#B94A48; +} +.control-group.error .combobox-container .caret { + border-top-color: $brand-danger; //#B94A48; +} +.control-group.warning .combobox-container .add-on { + color: $brand-warning; //#C09853; + border-color: $brand-warning; //#C09853; +} +.control-group.warning .combobox-container .caret { + border-top-color: $brand-warning; //#C09853; +} +.control-group.success .combobox-container .add-on { + color: $brand-success; //#468847; + border-color: $brand-success; //#468847; +} +.control-group.success .combobox-container .caret { + border-top-color: $brand-success; //#468847; +} +.btn .combobox-clear [class^="icon-"] { + line-height: 1.4em; +} +.combobox-container .dropdown-menu { + border-radius: 0; + padding: 0; + border: 1px solid $brand-primary; //#66afe9; + border-top: none; + +} + +.roo-select2-container .dropdown-menu { + border: 1px solid $brand-primary; //#5897fb; +} + +.dropdown-menu .active { + background: $brand-primary; //#3875d7; + color: $body-bg; +} + +.dropdown-menu .active label{ + color: $body-bg; +} + +.dropdown-menu .roo-select2-result { + padding: 3px 7px 4px; + margin: 0; + cursor: pointer; + min-height: 1em; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.roo-select2-container, +.roo-select2-choices .roo-select2-search-field{ + width: 100% +} +.roo-select2-container .x-combo-noedit { + cursor: pointer; + background-color: $body-bg; + +} +.roo-select2-container .x-combo-noedit[disabled] { + cursor: not-allowed; + background-color: $gray-lighter; + +} + +.roo-combobox-tickable .roo-select2-choices { + border: none; + background-image: none; +} + +.roo-combobox-tickable .roo-select2-result label { + width: 100%; +} +/* zindex of dialogs is 10000++ so dropdowns have to be higher... */ + +.dropdown-menu { + z-index: 20002 !important; +} + +.dropdown-menu .checkbox label { + width: 100%; +} + +.roo-select2-container-multi .dropdown-menu .roo-select2-result .checkbox { + margin-top: 0px; + margin-bottom: 0px; +} +.dropdown-menu .roo-select2-result .checkbox { + margin-top: 3px; + margin-bottom: 3px; +} + +.roo-select2-container .input-group-addon { + padding: 6px 12px; + border: 1px solid $input-border; + border-left: 0px; +} + +.roo-select2-container .roo-removable { + position: relative; +} + +.roo-select2-container .roo-removable .roo-combo-removable-btn { + position: absolute; + right: 10px; + z-index: 2; + top: 5px; +} + +.roo-select2-container .has-feedback .roo-combo-removable-btn { + position: absolute; + right: 35px; + z-index: 2; + top: 5px; +} + +/* +.roo-select2-container .roo-removable.has-feedback .roo-combo-removable-btn { + position: absolute; + right: 40px; + z-index: 2; + top: 5px; +} + +.roo-select2-container .roo-removable.has-feedback.input-group .roo-combo-removable-btn { + position: absolute; + right: 70px; + z-index: 2; + top: 5px; +} + + +.roo-select2-container.input-group .has-feedback .roo-combo-removable-btn { + position: absolute; + right: 35px; + z-index: 2; + top: 5px; +}*/ + +.has-warning .roo-select2-container-multi { + border: 1px solid $brand-warning; //#8a6d3b; +} + +.roo-ios-select { + width: 100%; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/datepicker.scss b/scss/roojs-bootstrap/datepicker.scss new file mode 100644 index 0000000000..c0d9370472 --- /dev/null +++ b/scss/roojs-bootstrap/datepicker.scss @@ -0,0 +1,457 @@ +/*! + * Datepicker for Bootstrap + * + * Copyright 2012 Stefan Petre + * Improvements by Andrew Rowls + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + */ +.datepicker { + padding: 8px 12px; + margin-top: 1px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + direction: ltr; + font-size: 13px; + /*.dow { + border-top: 1px solid $gray-light !important; + }*/ + +} +.datepicker-inline { + width: 220px; +} +.datepicker.datepicker-rtl { + direction: rtl; +} +.datepicker.datepicker-rtl table tr td span { + float: right; +} +.datepicker-dropdown { + top: 0; + left: 0; +} +/*.datepicker-dropdown:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid $gray-light; + border-bottom-color: $black-opacity-20; + position: absolute; + top: -7px; + left: 6px; +} +.datepicker-dropdown:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid $body-bg; + position: absolute; + top: -6px; + left: 7px; +}*/ + +.datepicker-dropdown.bottom:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid $gray-light; + border-bottom-color: $black-opacity-20; + position: absolute; + top: -7px; + left: 7px; +} +.datepicker-dropdown.bottom:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid $body-bg; + position: absolute; + top: -6px; + left: 8px; +} +.datepicker-dropdown.top:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 7px solid $gray-light; + border-bottom: 0; + border-top-color: $black-opacity-20; + position: absolute; + bottom: -7px; + left: 6px; +} + +.datepicker-dropdown.top:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid $body-bg; + border-bottom: 0; + position: absolute; + bottom: -6px; + left: 7px; +} + +.datepicker-dropdown.bottom-right:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid $gray-light; + border-bottom-color: $black-opacity-20; + position: absolute; + top: -7px; + left: 7px; +} +.datepicker-dropdown.bottom-right:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid $body-bg; + position: absolute; + top: -6px; + left: 8px; +} + +.datepicker-dropdown.bottom-left:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid $gray-light; + border-bottom-color: $black-opacity-20; + position: absolute; + top: -7px; + left: 260px; +} +.datepicker-dropdown.bottom-left:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid $body-bg; + position: absolute; + top: -6px; + left: 261px; +} + +.datepicker-dropdown.top-right:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 7px solid $gray-light; + border-top-color: $black-opacity-20; + position: absolute; + bottom: -7px; + left: 6px; +} + +.datepicker-dropdown.top-right:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid $body-bg; + position: absolute; + bottom: -6px; + left: 7px; +} + +.datepicker-dropdown.top-left:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 7px solid $gray-light; + border-top-color: $black-opacity-20; + position: absolute; + bottom: -7px; + left: 260px; +} + +.datepicker-dropdown.top-left:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid $body-bg; + position: absolute; + bottom: -6px; + left: 261px; +} + +.datepicker > div { + display: none; +} +.datepicker.days div.datepicker-days { + display: block; +} +.datepicker.months div.datepicker-months { + display: block; +} +.datepicker.years div.datepicker-years { + display: block; +} +.datepicker table { + margin: 0; +} +.datepicker td, +.datepicker th { + text-align: center; + width: 20px; + height: 20px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border: none; +} +.table-striped .datepicker table tr td, +.table-striped .datepicker table tr th { + background-color: transparent; +} +.datepicker table tr td.day:hover { + background: $gray-lighter; + cursor: pointer; +} +.datepicker table tr td.old, +.datepicker table tr td.new { + color: $gray-lighter; +} +.datepicker table tr td.disabled, +.datepicker table tr td.disabled:hover { + background: none; + color: $gray-lighter; + cursor: default; +} +.datepicker table tr td.today, +.datepicker table tr td.today:hover, +.datepicker table tr td.today.disabled, +.datepicker table tr td.today.disabled:hover { + background-color: $brand-warning; //#fde19a; + background-image: -moz-linear-gradient(top, $brand-warning, $brand-warning); + background-image: -ms-linear-gradient(top, $brand-warning, $brand-warning); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($brand-warning), to($brand-warning)); + background-image: -webkit-linear-gradient(top, $brand-warning, $brand-warning); + background-image: -o-linear-gradient(top, $brand-warning, $brand-warning); + background-image: linear-gradient(top, $brand-warning, $brand-warning); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$brand-warning', endColorstr='$brand-warning', GradientType=0); + border-color: $brand-warning $brand-warning $brand-warning; + border-color: $black-opacity-20 $black-opacity-20 $black-opacity-50; + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} +.datepicker table tr td.today:hover, +.datepicker table tr td.today:hover:hover, +.datepicker table tr td.today.disabled:hover, +.datepicker table tr td.today.disabled:hover:hover, +.datepicker table tr td.today:active, +.datepicker table tr td.today:hover:active, +.datepicker table tr td.today.disabled:active, +.datepicker table tr td.today.disabled:hover:active, +.datepicker table tr td.today.active, +.datepicker table tr td.today:hover.active, +.datepicker table tr td.today.disabled.active, +.datepicker table tr td.today.disabled:hover.active, +.datepicker table tr td.today.disabled, +.datepicker table tr td.today:hover.disabled, +.datepicker table tr td.today.disabled.disabled, +.datepicker table tr td.today.disabled:hover.disabled, +.datepicker table tr td.today[disabled], +.datepicker table tr td.today:hover[disabled], +.datepicker table tr td.today.disabled[disabled], +.datepicker table tr td.today.disabled:hover[disabled] { + background-color: $brand-warning; //#fdf59a; +} +.datepicker table tr td.today:active, +.datepicker table tr td.today:hover:active, +.datepicker table tr td.today.disabled:active, +.datepicker table tr td.today.disabled:hover:active, +.datepicker table tr td.today.active, +.datepicker table tr td.today:hover.active, +.datepicker table tr td.today.disabled.active, +.datepicker table tr td.today.disabled:hover.active { + background-color: $brand-warning; //#fbf069 \9; +} +.datepicker table tr td.active, +.datepicker table tr td.active:hover, +.datepicker table tr td.active.disabled, +.datepicker table tr td.active.disabled:hover { + background-color: $brand-primary; //#006dcc; + background-image: -moz-linear-gradient(top, lighten($brand-primary, 5%), $brand-primary); + background-image: -ms-linear-gradient(top, lighten($brand-primary, 5%), $brand-primary); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(lighten($brand-primary, 5%)), to($brand-primary)); + background-image: -webkit-linear-gradient(top, lighten($brand-primary, 5%), $brand-primary); + background-image: -o-linear-gradient(top, lighten($brand-primary, 5%), $brand-primary); + background-image: linear-gradient(top, lighten($brand-primary, 5%), $brand-primary); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='lighten($brand-primary, 5%)', endColorstr='$brand-primary', GradientType=0); + border-color: $brand-primary $brand-primary darken($brand-primary, 10%); + border-color: $black-opacity-20 $black-opacity-20 $black-opacity-50; + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + color: $body-bg; + text-shadow: 0 -1px 0 $black-opacity-50; +} +.datepicker table tr td.active:hover, +.datepicker table tr td.active:hover:hover, +.datepicker table tr td.active.disabled:hover, +.datepicker table tr td.active.disabled:hover:hover, +.datepicker table tr td.active:active, +.datepicker table tr td.active:hover:active, +.datepicker table tr td.active.disabled:active, +.datepicker table tr td.active.disabled:hover:active, +.datepicker table tr td.active.active, +.datepicker table tr td.active:hover.active, +.datepicker table tr td.active.disabled.active, +.datepicker table tr td.active.disabled:hover.active, +.datepicker table tr td.active.disabled, +.datepicker table tr td.active:hover.disabled, +.datepicker table tr td.active.disabled.disabled, +.datepicker table tr td.active.disabled:hover.disabled, +.datepicker table tr td.active[disabled], +.datepicker table tr td.active:hover[disabled], +.datepicker table tr td.active.disabled[disabled], +.datepicker table tr td.active.disabled:hover[disabled] { + background-color: $brand-primary; +} +.datepicker table tr td.active:active, +.datepicker table tr td.active:hover:active, +.datepicker table tr td.active.disabled:active, +.datepicker table tr td.active.disabled:hover:active, +.datepicker table tr td.active.active, +.datepicker table tr td.active:hover.active, +.datepicker table tr td.active.disabled.active, +.datepicker table tr td.active.disabled:hover.active { + background-color: darken($brand-primary, 10%); //#003399 \9; +} +.datepicker table tr td span { + display: block; + width: 23%; + height: 54px; + line-height: 54px; + float: left; + margin: 1%; + cursor: pointer; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.datepicker table tr td span:hover { + background: $gray-lighter; +} +.datepicker table tr td span.disabled, +.datepicker table tr td span.disabled:hover { + background: none; + color: $gray-light; + cursor: default; +} +.datepicker table tr td span.active, +.datepicker table tr td span.active:hover, +.datepicker table tr td span.active.disabled, +.datepicker table tr td span.active.disabled:hover { + background-color: $brand-primary; //#006dcc; + background-image: -moz-linear-gradient(top, lighten($brand-primary, 5%), $brand-primary); + background-image: -ms-linear-gradient(top, lighten($brand-primary, 5%), $brand-primary); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(lighten($brand-primary, 5%)), to($brand-primary)); + background-image: -webkit-linear-gradient(top, lighten($brand-primary, 5%), $brand-primary); + background-image: -o-linear-gradient(top, lighten($brand-primary, 5%), $brand-primary); + background-image: linear-gradient(top, lighten($brand-primary, 5%), $brand-primary); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='lighten($brand-primary, 5%)', endColorstr='$brand-primary', GradientType=0); + border-color: $brand-primary $brand-primary darken($brand-primary, 10%); + border-color: $black-opacity-20 $black-opacity-20 $black-opacity-50; + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + color: $body-bg; + text-shadow: 0 -1px 0 $black-opacity-50; +} +.datepicker table tr td span.active:hover, +.datepicker table tr td span.active:hover:hover, +.datepicker table tr td span.active.disabled:hover, +.datepicker table tr td span.active.disabled:hover:hover, +.datepicker table tr td span.active:active, +.datepicker table tr td span.active:hover:active, +.datepicker table tr td span.active.disabled:active, +.datepicker table tr td span.active.disabled:hover:active, +.datepicker table tr td span.active.active, +.datepicker table tr td span.active:hover.active, +.datepicker table tr td span.active.disabled.active, +.datepicker table tr td span.active.disabled:hover.active, +.datepicker table tr td span.active.disabled, +.datepicker table tr td span.active:hover.disabled, +.datepicker table tr td span.active.disabled.disabled, +.datepicker table tr td span.active.disabled:hover.disabled, +.datepicker table tr td span.active[disabled], +.datepicker table tr td span.active:hover[disabled], +.datepicker table tr td span.active.disabled[disabled], +.datepicker table tr td span.active.disabled:hover[disabled] { + background-color: $brand-primary; +} +.datepicker table tr td span.active:active, +.datepicker table tr td span.active:hover:active, +.datepicker table tr td span.active.disabled:active, +.datepicker table tr td span.active.disabled:hover:active, +.datepicker table tr td span.active.active, +.datepicker table tr td span.active:hover.active, +.datepicker table tr td span.active.disabled.active, +.datepicker table tr td span.active.disabled:hover.active { + background-color: darken($brand-primary, 10%); //#003399 \9; +} +.datepicker table tr td span.old { + color: $gray-light; +} +.datepicker th.switch { + width: 145px; +} +.datepicker thead tr:first-child th, +.datepicker tfoot tr:first-child th { + cursor: pointer; +} +.datepicker thead tr:first-child th:hover, +.datepicker tfoot tr:first-child th:hover { + background: $gray-lighter; +} +.datepicker .cw { + font-size: 10px; + width: 12px; + padding: 0 2px 0 5px; + vertical-align: middle; +} +.datepicker thead tr:first-child th.cw { + cursor: default; + background-color: transparent; +} +.input-append.date .add-on i, +.input-prepend.date .add-on i { + display: block; + cursor: pointer; + width: 16px; + height: 16px; +} + +.datepicker .datepicker-time td span { + display: block; + width: 47px; + height: 54px; + line-height: 54px; + float: left; + margin: 2px; + cursor: pointer; + border-radius: 4px; +} + +.datepicker .datepicker-time td span.timepicker-hour, +.datepicker .datepicker-time td span.timepicker-minute { + width: 100%; + font-weight: bold; + font-size: 1.2em; +} diff --git a/scss/roojs-bootstrap/document-manager.scss b/scss/roojs-bootstrap/document-manager.scss new file mode 100644 index 0000000000..82f7615230 --- /dev/null +++ b/scss/roojs-bootstrap/document-manager.scss @@ -0,0 +1,207 @@ + +.roo-document-manager-selector { // it must use visibility, display is not working on old safari... + visibility: hidden; + height: 0px; +} + +.roo-document-manager-uploader, +.roo-document-manager-loading, +.roo-document-manager-preview { + position: relative; + float: left; + width: 25%; + padding-left: 5px; + height: 100px; + max-height: 100px; + margin-top: 10px; + margin-left: 10px; +} + +.roo-document-manager-preview.wide { + width: 50%; +} + +.roo-document-manager-thumb, +.roo-document-manager-upload-btn { + width : 100%; + height: 100px; + line-height: 100px; + max-height: 100px; + border: 1px solid $gray-lighter; + -webkit-box-shadow: 1px 0px 5px 0px fade($gray-light, 75%); + -moz-box-shadow: 1px 0px 5px 0px fade($gray-light, 75%); + box-shadow: 1px 0px 5px 0px fade($gray-light, 75%); +} + +.roo-document-manager-thumb > i.fa, +.roo-document-manager-upload-btn > i.fa { + width: 100%; + line-height: 98px; + text-align: center; + vertical-align: middle; + color: $gray-light; + font-size: 2.5em; +} + +.roo-document-manager-thumb > i.fa { + font-size: 2.5em; +} + +.roo-document-manager-thumb > img { + width: 100%; + max-height: 100%; + text-align: center; + vertical-align: middle; + padding-bottom: 5px; +} + +.roo-document-manager-preview > .close { + position: absolute; + top: 0px; + right: 3px; + font-size: 20px; + opacity: 1; +} + +.roo-document-manager-preview > .close:hover { + color: $gray-dark; +} + +.roo-document-manager-preview.disabled > .roo-document-manager-thumb > img { + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -o-filter: grayscale(100%); + -ms-filter: grayscale(100%); + filter: grayscale(100%); +} + +.roo-document-manager-preview.disabled > .close { + display: none !important; +} + +.roo-document-manager-preview > .roo-document-manager-thumb > .fa { + position: absolute; + left: -5px; + top: -5px; + width: 25px; + height: 25px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + line-height: 25px; + text-align: center; + background-color: $body-bg; + /*border: inherit;*/ + font-size: 1.8em; + z-index: 1; +} + +.roo-document-manager-preview > .roo-document-manager-thumb.bottom > .fa { + top: inherit; + bottom: -5px; +} + +.roo-document-manager-preview > .roo-document-manager-thumb.primary > .fa { + color : $brand-primary +} + +.roo-document-manager-preview > .roo-document-manager-thumb.border-primary { + border: 3px solid $brand-primary; +} + +.roo-document-manager-preview.disabled > .roo-document-manager-thumb.primary > .fa { + color : $gray +} + +.roo-document-manager-preview.disabled > .roo-document-manager-thumb.border-primary { + border: none; +} + +/* +* sm +*/ + +@media (min-width: 768px) { + .roo-document-manager-uploader, + .roo-document-manager-loading, + .roo-document-manager-preview { + height: 200px; + max-height: 200px; + } + + .roo-document-manager-thumb, + .roo-document-manager-upload-btn { + line-height: 200px; + height: 200px; + max-height: 200px; + } + + .roo-document-manager-thumb > i.fa, + .roo-document-manager-upload-btn > i.fa { + line-height: 198px; + } + +} + +/* +* md +*/ + +@media (min-width: 992px) { + .roo-document-manager-uploader, + .roo-document-manager-loading, + .roo-document-manager-preview { + width: 8.33333333%; + height: 80px; + max-height: 80px; + } + + .roo-document-manager-preview.wide { + width: 16.66666666%; + } + + .roo-document-manager-thumb, + .roo-document-manager-upload-btn { + line-height: 80px; + height: 80px; + max-height: 80px; + } + + .roo-document-manager-thumb > i.fa, + .roo-document-manager-upload-btn > i.fa { + line-height: 78px; + } + +} + + +/* +* lg +*/ + +@media (min-width: 1200px) { + .roo-document-manager-uploader, + .roo-document-manager-loading, + .roo-document-manager-preview { + width: 8.33333333%; + height: 100px; + max-height: 100px; + } + + .roo-document-manager-preview.wide { + width: 16.66666666%; + } + + .roo-document-manager-thumb, + .roo-document-manager-upload-btn { + line-height: 100px; + height: 100px; + max-height: 100px; + } + + .roo-document-manager-thumb > i.fa, + .roo-document-manager-upload-btn > i.fa { + line-height: 98px; + } + +} diff --git a/scss/roojs-bootstrap/document-slider.scss b/scss/roojs-bootstrap/document-slider.scss new file mode 100644 index 0000000000..a5ccd76d37 --- /dev/null +++ b/scss/roojs-bootstrap/document-slider.scss @@ -0,0 +1,73 @@ + +.document-slider-dialog .modal-body { + padding: 0px; +} + +.roo-document-slider-header { + background-color: $black-opacity-50; +} + +.roo-document-slider-header .roo-document-slider-header-title { + width: 80%; + margin: 0 auto; + padding: 10px 0; + color: $body-bg; + font-weight: bold; + text-align: center; +} + +.roo-document-slider-body { + background-color: $body-bg; + width: 100%; + height: 450px; + position: relative; + overflow: hidden; +} + +.roo-document-slider-body .roo-document-slider-thumb { + position: absolute; + width: 80%; + height: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-sizing: border-box; + border: 1px solid rgb(102, 102, 102); + box-shadow: 0 0 0 1000px $black-opacity-50; + text-align: center; + vertical-align: middle; + overflow: auto; + cursor:move; +} + +.roo-document-slider-body .roo-document-slider-image{ + width: 100%; +} + +.roo-document-slider-prev { + position: absolute; + top: 0; + left: 0; + text-align: center; + width: 10%; + height: 100%; +} + +.roo-document-slider-next { + position: absolute; + top: 0; + right: 0; + text-align: center; + width: 10%; + height: 100%; +} + +.roo-document-slider-prev > i, +.roo-document-slider-next > i { + position: relative; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + font-size: 2em; +} + diff --git a/scss/roojs-bootstrap/document-viewer.scss b/scss/roojs-bootstrap/document-viewer.scss new file mode 100644 index 0000000000..0740bf6c10 --- /dev/null +++ b/scss/roojs-bootstrap/document-viewer.scss @@ -0,0 +1,57 @@ + +.document-viewer-dialog .modal-dialog { + margin: 0px auto; +} + +.document-viewer-dialog .modal-header, +.document-viewer-dialog .modal-footer { + padding-top: 5px; + padding-bottom: 5px; +} + +.document-viewer-dialog .modal-body { + padding: 0px; +} + +.roo-document-viewer-body { + background-color: $body-bg; + width: 100%; + height: 450px; + max-height: 450px; + position: relative; + overflow: hidden; + cursor:move; +} + +.roo-document-viewer-body .roo-document-viewer-thumb { + position: absolute; + width: 80%; + height: 80%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-sizing: border-box; + border: 1px solid rgb(102, 102, 102); + box-shadow: 0 0 0 1000px $black-opacity-50; + text-align: center; + vertical-align: middle; + overflow: auto; +} + +.roo-document-viewer-body .roo-document-viewer-image{ + width: 100%; +} + +.roo-document-viewer-btn-group button { + background-color: $gray-base; + color: $body-bg; + border-color: $gray-dark; +} + +.roo-document-viewer-btn-group > .btn-group:first-child > button { + border-top-left-radius: 0; +} + +.roo-document-viewer-btn-group > .btn-group:last-child > button { + border-top-right-radius: 0; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/dropdown.scss b/scss/roojs-bootstrap/dropdown.scss new file mode 100644 index 0000000000..33f56613cc --- /dev/null +++ b/scss/roojs-bootstrap/dropdown.scss @@ -0,0 +1,99 @@ +.dropdown-submenu:hover > a, +.dropdown-submenu:focus > a { + color: $body-bg; + text-decoration: none; + background-color: $brand-primary; + background-image: -moz-linear-gradient(top, $brand-primary, darken($brand-primary, 3%)); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($brand-primary), to(darken($brand-primary, 3%))); + background-image: -webkit-linear-gradient(top, $brand-primary, darken($brand-primary, 3%)); + background-image: -o-linear-gradient(top, $brand-primary, darken($brand-primary, 3%)); + background-image: linear-gradient(to bottom, $brand-primary, darken($brand-primary, 3%)); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$brand-primary', endColorstr='darken($brand-primary, 3%)', GradientType=0); +} + +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} + +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} + +.dropup .dropdown-submenu > .dropdown-menu { + top: auto; + bottom: 0; + margin-top: 0; + margin-bottom: -2px; + -webkit-border-radius: 5px 5px 5px 0; + -moz-border-radius: 5px 5px 5px 0; + border-radius: 5px 5px 5px 0; +} + +.dropup .dropdown-menu { + -webkit-animation-name: inherit; +} + +.dropdown-submenu > a:after { + display: block; + float: right; + width: 0; + height: 0; + margin-top: 5px; + margin-right: -10px; + border-color: transparent; + border-left-color: $gray-light; + border-style: solid; + border-width: 5px 0 5px 5px; + content: " "; +} + +.dropdown-submenu:hover > a:after { + border-left-color: $body-bg; +} + +.dropdown-submenu.pull-left { + float: none !important; +} + +.dropdown-submenu.pull-left > .dropdown-menu { + left: 0; + margin-left: 1px; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} + +.dropdown-button > i { + margin-right: 5px; +} + +li.dropdown-toggle i.glyphicon + span { + margin-left: 5px; +} + +li.dropdown-toggle span + i.glyphicon { + margin-left: 5px; +} + +li.dropdown-menu-item i.fa + span { + margin-left: 5px; +} + +li.dropdown-toggle button > i.glyphicon { + margin: 3px 0 0 5px; +} + +.dropdown-menu.nowrap li a span { + white-space: nowrap; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/input.scss b/scss/roojs-bootstrap/input.scss new file mode 100644 index 0000000000..b38949f1d5 --- /dev/null +++ b/scss/roojs-bootstrap/input.scss @@ -0,0 +1,21 @@ +div.input-group.has-feedback > .form-control-feedback { + right: 30px; +} + +div.input-group.has-feedback > .roo-input-after + .form-control-feedback { + right: 39px; +} + +.roo-required-indicator { + font-size: 8px; + color: $brand-danger; + vertical-align: top; +} + +.roo-required-indicator.left-indicator { + margin-right: 3px; +} + +.roo-required-indicator.right-indicator { + margin-left: 3px; +} diff --git a/scss/roojs-bootstrap/label-pill.scss b/scss/roojs-bootstrap/label-pill.scss new file mode 100644 index 0000000000..cc5616051f --- /dev/null +++ b/scss/roojs-bootstrap/label-pill.scss @@ -0,0 +1,5 @@ +.label-pill { + padding-right: .6em; + padding-left: .6em; + border-radius: 10rem; +} diff --git a/scss/roojs-bootstrap/layout.scss b/scss/roojs-bootstrap/layout.scss new file mode 100644 index 0000000000..7d5ea37ba0 --- /dev/null +++ b/scss/roojs-bootstrap/layout.scss @@ -0,0 +1,257 @@ + +.roo-layout-container{ + width:100%; + height:100%; + overflow:hidden; +} + +.roo-layout-inactive-content{ + position:absolute; + left:-10000px; + top:-10000px; + visibility:hidden; +} +.roo-layout-active-content{ + visibility:visible; + /* padding: 10px; */ +} +.roo-layout-panel{ + position:absolute; + /* overflow:hidden; -- menus inside of contains do not work with this */ + /* + background-color:white; + border:1px solid #98c0f4; + */ +} +.roo-layout-panel-east, .roo-layout-panel-west { + z-index:10; +} +.roo-layout-panel-north, .roo-layout-panel-south { + z-index:11; +} +/* +.roo-layout-collapsed-north, .x-layout-collapsed-south, .x-layout-collapsed-east, .x-layout-collapsed-west { + z-index:12; +} +*/ +.roo-layout-panel-body{ + overflow:hidden; +} +/* + +.roo-layout-grid-wrapper{ + +} +*/ +.roo-layout-split +{ + position:absolute; + height:5px; + width:5px; + line-height:1px; + font-size:1px; + z-index:3; + background-color:$well-bg; +} +.roo-layout-split-south, .roo-layout-split-north { + border-bottom : 1px solid $gray-light; +} +.roo-layout-split-east, .roo-layout-split-west { + border-right: 1px solid $gray-light; +} + + +.roo-layout-panel-hd{ + + position:relative; +} +.roo-layout-panel-hd.breadcrumb { + margin-bottom: 0; +} + +.roo-layout-panel-hd-text{ + padding: 4px; + padding-left: 4px; + display:block; + white-space: nowrap; +} +.roo-layout-panel-hd-tools{ + position:absolute; + right:0; + top:0; + text-align:right; + padding-top:2px; + padding-right:2px; + width:40px; +} +/* +.x-layout-tools-button{ + z-index:6; + padding:2px; + float:right; + cursor:pointer; +} +.x-layout-tools-button-over{ + padding:1px; + border:1px solid #98c0f4; + background-color:white; +} +.x-layout-tools-button-inner{ + height:12px; + width:12px; + line-height:1px; + font-size:1px; + background-repeat:no-repeat; + background-position:center; +} +.x-layout-close{ + background-image:url(../images/default/layout/layout-sprite.gif); + background-repeat: no-repeat; + background-position: 50% -48px; +} +.x-layout-collapse-west,.x-layout-expand-east{ + background-image:url(../images/default/layout/layout-sprite.gif); + background-repeat: no-repeat; + background-position: 50% 0; +} +.x-layout-expand-west,.x-layout-collapse-east{ + background-image:url(../images/default/layout/layout-sprite.gif); + background-repeat: no-repeat; + background-position: 50% -12px; +} +.x-layout-collapse-north,.x-layout-expand-south{ + background-image:url(../images/default/layout/layout-sprite.gif); + background-repeat: no-repeat; + background-position: 50% -24px; +} +.x-layout-expand-north,.x-layout-collapse-south{ + background-image:url(../images/default/layout/layout-sprite.gif); + background-repeat: no-repeat; + background-position: 50% -36px; +} +.x-layout-split-h{ + background-image:url(../images/default/sizer/e-handle.gif); + background-position: left; + cursor:col-resize; +} +.x-layout-split-v{ + background-image:url(../images/default/sizer/s-handle.gif); + background-position: top; + cursor:row-resize; +} +.x-layout-panel .x-tabs-wrap{ + background:url(../images/default/layout/gradient-bg.gif); +} +*/ + + + + +.roo-layout-panel .roo-tabbody { + background-color: $body-bg; + overflow: auto; + height: 100%; +} + +.roo-layout-component-panel, .roo-layout-nested-layout { + position:relative; + padding:0; + overflow:hidden; + width:200px; + height:200px; +} +.roo-layout-nested-layout .roo-layout-panel { + border:0 none; +} +/* +.x-layout-nested-layout .x-layout-panel-north { + border-bottom:1px solid #98c0f4; +} +.x-layout-nested-layout .x-layout-panel-south { + border-top:1px solid #98c0f4; +} +.x-layout-nested-layout .x-layout-panel-east { + border-left:1px solid #98c0f4; +} +.x-layout-nested-layout .x-layout-panel-west { + border-right:1px solid #98c0f4; +} +*/ +.roo-repaint{ + zoom:1; + background-color: transparent; +} +/* +.x-layout-panel-dragover { + border: 2px solid #6593cf; +} +.x-layout-panel-proxy { + background-image: url(../images/default/layout/gradient-bg.gif); + background-color:#c3daf9; + border:1px dashed #6593cf; + z-index:10001; + overflow:hidden; + position:absolute; + left:0;top:0; +} + +.x-layout-slider { + z-index:15; + overflow:hidden; + position:absolute; +} +*/ +.roo-unselectable{ + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + cursor:default; +} + +/** --- split bar dragging ---*/ + +.roo-splitbar-proxy{ + z-index:40009; + visibility:hidden; + position:absolute; + background: $gray-light; + border: 1px solid $gray-base; + overflow:hidden; +} +.roo-splitbar-h,.roo-splitbar-proxy-h{ + cursor:col-resize; +} +.roo-splitbar-v,.roo-splitbar-proxy-v{ + cursor:row-resize; +} +/* +.x-grid-resize-proxy +{ + z-index:40009; + visibility:hidden; + position:absolute; + background:#666; + border: 1px solid #000; + overflow:hidden; + cursor:col-resize; + overflow:hidden; + width: 2px; +} + + +*/ +.roo-layout-panel-body .navbar ul.nav-tabs { + margin-top: 9px; + display: table; +} + +.roo-layout-panel-body .navbar { + margin-bottom: 0px; +} + +.roo-form-group-label-left::before, +.roo-form-group-label-left::after { + display: table; + content: " "; + clear: both; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/list-group.scss b/scss/roojs-bootstrap/list-group.scss new file mode 100644 index 0000000000..a0f5a45e58 --- /dev/null +++ b/scss/roojs-bootstrap/list-group.scss @@ -0,0 +1,5 @@ +a.list-group-item, button.list-group-item { + width: 100%; + color: $gray; + text-align: inherit; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/mask.scss b/scss/roojs-bootstrap/mask.scss new file mode 100644 index 0000000000..f05ffc07db --- /dev/null +++ b/scss/roojs-bootstrap/mask.scss @@ -0,0 +1,69 @@ +.roo-el-mask +{ + z-index:20000; + position:absolute; + top:0; + left:0; + -moz-opacity: 0.5; + opacity:.50; + filter: alpha(opacity=50); + background-color:$gray-light; + width:100%; + height:100%; + zoom:1; +} +.roo-el-mask-msg +{ + position: absolute; + z-index:20000; + /*border: 4px double #557; */ + background-color: $body-bg; + padding: 0px; + /*background-image: url('#{$bootstrap-image-path}/ux/lightbox/loading.gif');*/ + background-repeat: no-repeat; + border: 10px solid white; + border-radius: 20px; + display: table; + min-width: 250px; +} + +.roo-el-mask-msg i { + font-size: 36px; + vertical-align: middle; + float: left; +} + +.roo-el-mask-msg div +{ + font-family: 'Source Sans Pro', sans-serif; + font-size: 24px; + font-weight: 500; + z-index:20001; + padding:0px 15px; + color: $gray; //#557; + display: table-cell; + vertical-align: middle; + float: left; + +} +.x-body-masked +{ + overflow:hidden !important; +} +.x-body-masked select,.ext-masked object,.ext-masked embed +{ + visibility:hidden; +} +.x-dlg-mask +{ + z-index:10000; + display:none; + position:absolute; + top:0; + left:0; + -moz-opacity: 0.5; + opacity:.50; + filter: alpha(opacity=50); + background-color: $gray-light; +} + \ No newline at end of file diff --git a/scss/roojs-bootstrap/masonary-squares.scss b/scss/roojs-bootstrap/masonary-squares.scss new file mode 100644 index 0000000000..6d00ffb454 --- /dev/null +++ b/scss/roojs-bootstrap/masonary-squares.scss @@ -0,0 +1,120 @@ + + +.masonary .masonry-bottom-title { + background-color: transparent; +} + +.masonry-brick-link, +.roo-brick-link { + cursor: pointer; + text-decoration: none; + outline: 0; +} + +.masonry-brick-paragraph, +.roo-brick-paragraph { + overflow: hidden; +} + +.masonry-brick .masonry-brick-paragraph { + padding: 9px; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-color: inherit; +} + +.masonry-center-title .masonry-brick-paragraph, +.masonry-bottom-title .masonry-brick-paragraph, +.roo-brick-center-title .roo-brick-paragraph, +.roo-brick-bottom-title .roo-brick-paragraph { + display: table; +} + +.masonry-center-title .masonry-brick-paragraph .masonry-brick-title, +.roo-brick-center-title .roo-brick-paragraph .roo-brick-title { + display:table-cell; + vertical-align:middle; + text-align:center; +} + +.masonry-bottom-title .masonry-brick-paragraph .masonry-brick-title, +.roo-brick-bottom-title .roo-brick-paragraph .roo-brick-title { + display:table-cell; + vertical-align:bottom; + text-align:right; +} + +.masonry-brick-image .masonry-brick-paragraph, +.roo-brick-image .roo-brick-paragraph { + opacity: 0; +} + +.masonry-bottom-title .masonry-brick-paragraph { + opacity: 1; +} + + +.masonry-brick-image-view { + width: 100%; + height: 100%; + object-fit: cover; +} + +.masonry-brick-paragraph .masonry-brick-title, +.roo-brick-paragraph .roo-brick-title { + margin-top: 0; +} + +.roo-brick .roo-brick-paragraph { + padding: 9px; + width: 100%; + height: 100%; + background-color: inherit; +} + +.roo-brick-image-view { + position: absolute; + top: 0; + object-fit: cover; +} + +a.roo-brick-link:focus, +a.roo-brick-link:hover { + text-decoration: none; + outline: 0; +} + +.masonry-brick-split .masonry-brick-split-head, +.masonry-brick-split .masonry-brick-split-head .masonry-brick-paragraph { + height: 75%; +} + +.masonry-brick-split .masonry-brick-split-body { + height: 25%; + padding: 4px; + color: $gray-base; + font-size: 11px; +} + +.enable-mask:hover .masonry-brick-mask { + width:100%; + height:100%; + position:absolute; + top: 0; + left: 0; + background-color:$gray-base; + opacity:0.2; +} + +@media (min-width: 768px) { + .mask-inverse .masonry-brick-paragraph { + background: $black-opacity-50; + } + + .mask-inverse:hover .masonry-brick-paragraph { + background: none; + } +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/modal.scss b/scss/roojs-bootstrap/modal.scss new file mode 100644 index 0000000000..468c138b79 --- /dev/null +++ b/scss/roojs-bootstrap/modal.scss @@ -0,0 +1,128 @@ +/* + Document : modal + Created on : Apr 23, 2014, 11:24:28 AM + Author : edward + Description: + Purpose of the stylesheet follows. +*/ + + +.modal-md-1, +.modal-md-2, +.modal-md-3, +.modal-md-4, +.modal-md-5, +.modal-md-6, +.modal-md-7, +.modal-md-8, +.modal-md-9, +.modal-md-10, +.modal-md-11, +.modal-md-12 { + float: left; +} + +.modal-md-12 .modal-dialog { + width: 100%; + margin: 30 auto; +} +.modal-md-11 .modal-dialog { + width: 91.66666666666666%; + margin: 30 auto; +} +.modal-md-10 .modal-dialog { + width: 83.33333333333334%; + margin: 30 auto; +} +.modal-md-9 .modal-dialog { + width: 75%; + margin: 30 auto; +} +.modal-md-8 .modal-dialog { + width: 66.66666666666666%; + margin: 30 auto; +} +.modal-md-7 .modal-dialog { + width: 58.333333333333336%; + margin: 30 auto; +} +.modal-md-6 .modal-dialog { + width: 50%; + margin: 30 auto; +} +.modal-md-5 .modal-dialog { + width: 41.66666666666667%; + margin: 30 auto; +} +.modal-md-4 .modal-dialog { + width: 33.33333333333333%; + margin: 30 auto; +} +.modal-md-3 .modal-dialog { + width: 25%; + margin: 30 auto; +} +.modal-md-2 .modal-dialog { + width: 16.666666666666664%; + margin: 30 auto; +} +.modal-md-1 .modal-dialog { + width: 8.333333333333332%; + margin: 30 auto; +} + +/* + this appears to break the layout on dialog buttons on mobile? +@media (max-width: 568px) { + .modal-footer .btn+.btn { + margin-left: 0px; + margin-top: 5px; + } +} +*/ + +.modal-body.roo-layout-container, +.modal-body > .container { + padding: 0; +} + +.modal-dialog { + max-width: 100%; +} + +@media (max-width: 768px) { + + .modal-body .col-md-12 { + padding : 0; + } + + .modal-body { + padding: 5px; + } + .modal-body .row { + margin-left: -5px; + margin-right: -5px; + } + + .modal-body > .container .col-xs-12 { + padding: 0; + } + +} + +.modal .roo-mb-progress-wrap { + margin-top: 4px; + border: 1px solid darken($brand-primary, 10%);; +} + +.modal .roo-mb-progress-wrap .roo-mb-progress { + height: 18px; + background: transparent url('#{$bootstrap-image-path}/default/basic-dialog/progress2.gif') repeat-x 1px 1px; +} + +.modal .roo-mb-progress-wrap .roo-mb-progress .roo-mb-progress-bar { + height: 18px; + overflow: hidden; + width: 0; + background: $brand-primary; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/money-field.scss b/scss/roojs-bootstrap/money-field.scss new file mode 100644 index 0000000000..e7fd2883e4 --- /dev/null +++ b/scss/roojs-bootstrap/money-field.scss @@ -0,0 +1,44 @@ + +.roo-money-field { + + .roo-money-currency { + padding-right: 0px; + } + + .roo-money-amount { + padding-left: 0px; + } + + .roo-money-currency-input { + border-right: 0px; + } + + .input-group-addon { + background-color: transparent; + border-left: 0px; + border-right: 0px; + border-radius: 0px; + } + + .roo-money-amount-input { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + text-align: right; + } + +} + +.has-success .roo-money-currency .roo-select2-container .input-group-addon { + border-color: $state-success-text; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 2px $state-success-text; +} + +.has-warning .roo-money-currency .roo-select2-container .input-group-addon { + border-color: $state-warning-text; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 2px $state-warning-text; +} + +.has-error .roo-money-currency .roo-select2-container .input-group-addon { + border-color: $state-danger-text; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 2px $state-danger-text; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/nav-progress-bar.scss b/scss/roojs-bootstrap/nav-progress-bar.scss new file mode 100644 index 0000000000..3b1e3bcd5b --- /dev/null +++ b/scss/roojs-bootstrap/nav-progress-bar.scss @@ -0,0 +1,114 @@ + +.roo-navigation-bar-group, +.roo-navigation-top-bar, +.roo-navigation-bullets-bar, +.roo-navigation-bottom-bar { + width: 100%; + float: left; +} + +.roo-navigation-bar-text > span { + text-transform: uppercase; + width: 90%; + display: inline-block; +} + + +.roo-navigation-bar-text { + float: left; + line-height: 24px; + height: 100%; + min-height: 24px; + text-align: center; + position: relative; +} + +.roo-navigation-bar { + counter-reset: step; + text-align: center; + padding: 0px; + overflow: hidden; + margin: 0px; +} + +.roo-navigation-bar .roo-navigation-bar-item { + list-style-type: none; + color: $gray-base; + text-transform: uppercase; + font-size: 14px; + float: left; + position: relative; +} + +.roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon:before { + counter-increment: step; + width: 25px; + line-height: 25px; + display: block; + color: $body-bg; + background: $brand-primary; + border-radius: 5px; + font-weight: bold; + cursor: pointer; +} + +.roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon.step-number:before { + content: counter(step); +} + +.roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon:after { + content: ''; + width: 100%; + height: 5px; + background: $brand-primary; + position: absolute; + top: 10px; + z-index: -1; +} + +.roo-navigation-bar .roo-navigation-bar-item:last-child > .roo-navigation-bar-item-icon:after { + content: none; +} + +.roo-navigation-bar .roo-navigation-bar-item.active .roo-navigation-bar-item-icon:before { + background: darken($brand-danger, 17%); + color: $body-bg; +} + +.roo-navigation-bar .roo-navigation-bar-item.disabled .roo-navigation-bar-item-icon:before { + background: $gray-light; + color: $body-bg; + cursor: not-allowed; +} + +.roo-navigation-bar .roo-navigation-bar-item.active .roo-navigation-bar-item-icon:before { + cursor: default; +} + +.roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon { + font: normal normal normal 14px/1 FontAwesome; + display: inline-block; + +} + +@media (min-width: 768px) { + .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before { + content: counter(step); + } + +} + +@media (min-width: 992px) { + .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before, + .roo-navigation-bar .roo-navigation-bar-item.sm-icon > .roo-navigation-bar-item-icon:before { + content: counter(step); + } +} + +@media (min-width: 1200px) { + .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before, + .roo-navigation-bar .roo-navigation-bar-item.sm-icon > .roo-navigation-bar-item-icon:before, + .roo-navigation-bar .roo-navigation-bar-item.md-icon > .roo-navigation-bar-item-icon:before { + content: counter(step); + } +} diff --git a/scss/roojs-bootstrap/nav-tabs.scss b/scss/roojs-bootstrap/nav-tabs.scss new file mode 100644 index 0000000000..6233304943 --- /dev/null +++ b/scss/roojs-bootstrap/nav-tabs.scss @@ -0,0 +1,108 @@ +/* NAV TABS */ +.nav-tabs-custom { + margin-bottom: 20px; + background: $body-bg; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); +} +.nav-tabs-custom > .nav-tabs { + margin: 0; + border-bottom-color: $gray-light; //#f4f4f4; +} +.nav-tabs-custom > .nav-tabs > li { + border-top: 3px solid transparent; + margin-bottom: -2px; + margin-right: 5px; +} +.nav-tabs-custom > .nav-tabs > li > a { + -webkit-border-radius: 0 !important; + -moz-border-radius: 0 !important; + border-radius: 0 !important; +} +.nav-tabs-custom > .nav-tabs > li > a, +.nav-tabs-custom > .nav-tabs > li > a:hover { + background: transparent; + margin: 0; +} +.nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover, +.nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus, +.nav-tabs-custom > .nav-tabs > li:not(.active) > a:active { + border-color: transparent; +} +.nav-tabs-custom > .nav-tabs > li.active { + border-top-color: $brand-primary; //#3c8dbc; +} +.nav-tabs-custom > .nav-tabs > li.active > a, +.nav-tabs-custom > .nav-tabs > li.active:hover > a { + background-color: $body-bg; +} +.nav-tabs-custom > .nav-tabs > li.active > a { + border-top: 0; + border-left-color: $gray-light; //#f4f4f4;; + border-right-color: $gray-light; //#f4f4f4;; +} +.nav-tabs-custom > .nav-tabs > li:first-of-type { + margin-left: 0px; +} +.nav-tabs-custom > .nav-tabs > li:first-of-type.active > a { + border-left-width: 0; +} +.nav-tabs-custom > .nav-tabs.pull-right { + float: none!important; +} +.nav-tabs-custom > .nav-tabs.pull-right > li { + float: right; +} +.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type { + margin-right: 0px; +} +.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a { + border-left-width: 1px; + border-right-width: 0px; +} +.nav-tabs-custom > .nav-tabs > li.header { + font-weight: 400; + line-height: 35px; + padding: 0 10px; + font-size: 20px; + color: $gray-dark; //#444; + cursor: default; +} +.nav-tabs-custom > .nav-tabs > li.header > .fa, +.nav-tabs-custom > .nav-tabs > li.header > .glyphicon, +.nav-tabs-custom > .nav-tabs > li.header > .ion { + margin-right: 10px; +} +.nav-tabs-custom > .tab-content { + background: $body-bg; + padding: 10px; +} +/* --- override it appears it's done un-reliably in JS normally.. */ +.tab-content > .tab-pane { + position: absolute; +} + +.tab-content > .tab-pane .navbar > .navbar-nav > .nav-item .roo-toolbar { + margin: 0 5px; +} + +.tab-content > .tab-pane .navbar > .navbar-nav > .nav-item .roo-toolbar > .column { + padding: 10px 5px; +} + +@media (max-width: 768px) { + .tab-content > .tab-pane .navbar > .navbar-nav > .nav-item .roo-toolbar > .column { + padding: 5px 5px; + } +} + +.tab-content > .tab-pane .navbar > .navbar-nav > .nav-item .form-group { + margin-bottom: 0px; +} + +.tab-content > .tab-pane .navbar > .navbar-nav > .nav-item button + button { + margin-left: 5px; +} + +.tab-content > .tab-pane .navbar > .navbar-nav a.dropdown-toggle { + padding: 10px 5px; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/navbar.scss b/scss/roojs-bootstrap/navbar.scss new file mode 100644 index 0000000000..0f95e20076 --- /dev/null +++ b/scss/roojs-bootstrap/navbar.scss @@ -0,0 +1,15 @@ +/* for some reason it's -15px on BS */ + +@media (min-width: 768px) { + .navbar-right { + margin-right: 15px; + } +} +/* was -15 before, on mobile it made the buttons too close to the edit.. */ +.navbar-nav { + margin: 0px -5px; +} + +table td .navbar { + min-height: auto; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/numberbox.scss b/scss/roojs-bootstrap/numberbox.scss new file mode 100644 index 0000000000..20a714818d --- /dev/null +++ b/scss/roojs-bootstrap/numberbox.scss @@ -0,0 +1,8 @@ +.roo-numberbox{ + background-color: $brand-primary !important; //#00c0ef !important; + border: 10px solid black; +} + +.roo-numberbox h{ + font-size: 24px; +} diff --git a/scss/roojs-bootstrap/phone-input.scss b/scss/roojs-bootstrap/phone-input.scss new file mode 100644 index 0000000000..4333ddfa94 --- /dev/null +++ b/scss/roojs-bootstrap/phone-input.scss @@ -0,0 +1,1092 @@ +.tel-input { + padding-left: 105px; + border-radius: 4px !important; +} + +.dial-code-holder { + position: absolute; + width: 60px; + left: 55px; + z-index: 3; + padding: 7px; + border: 1px solid transparent; + background: transparent; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.tel-list { + li { + a { + padding-left: 10px; + .flag { + margin-right: 20px; + } + .dial-code { + color: #999; + } + } + } +} + +.flag-box { + position: absolute; + top: 6px; + height: 20px; + width: 50px; + padding: 5px; + margin-left: 5px; + display: flex; + flex-direction: row; + justify-content: space-around; + z-index: 4; //>input::focus + .caret { + margin-top: 3px; + } +} + +.flag { + background-image: url('#{$bootstrap-image-path}/default/flags.png'); + background-repeat: no-repeat; + width: 20px; + height: inherit; + display: inline-block; + margin-right: 10px; + &.ac { + height: 10px; + background-position: 0px 0px; + } + &.ad { + height: 14px; + background-position: -22px 0px; + } + &.ae { + height: 10px; + background-position: -44px 0px; + } + &.af { + height: 14px; + background-position: -66px 0px; + } + &.ag { + height: 14px; + background-position: -88px 0px; + } + &.ai { + height: 10px; + background-position: -110px 0px; + } + &.al { + height: 15px; + background-position: -132px 0px; + } + &.am { + height: 10px; + background-position: -154px 0px; + } + &.ao { + height: 14px; + background-position: -176px 0px; + } + &.aq { + height: 14px; + background-position: -198px 0px; + } + &.ar { + height: 13px; + background-position: -220px 0px; + } + &.as { + height: 10px; + background-position: -242px 0px; + } + &.at { + height: 14px; + background-position: -264px 0px; + } + &.au { + height: 10px; + background-position: -286px 0px; + } + &.aw { + height: 14px; + background-position: -308px 0px; + } + &.ax { + height: 13px; + background-position: -330px 0px; + } + &.az { + height: 10px; + background-position: -352px 0px; + } + &.ba { + height: 10px; + background-position: -374px 0px; + } + &.bb { + height: 14px; + background-position: -396px 0px; + } + &.bd { + height: 12px; + background-position: -418px 0px; + } + &.be { + height: 15px; + background-position: -440px 0px; + } + &.bf { + height: 14px; + background-position: -460px 0px; + } + &.bg { + height: 12px; + background-position: -482px 0px; + } + &.bh { + height: 12px; + background-position: -504px 0px; + } + &.bi { + height: 12px; + background-position: -526px 0px; + } + &.bj { + height: 14px; + background-position: -548px 0px; + } + &.bl { + height: 14px; + background-position: -570px 0px; + } + &.bm { + height: 10px; + background-position: -592px 0px; + } + &.bn { + height: 10px; + background-position: -614px 0px; + } + &.bo { + height: 14px; + background-position: -636px 0px; + } + &.bq { + height: 14px; + background-position: -658px 0px; + } + &.br { + height: 14px; + background-position: -680px 0px; + } + &.bs { + height: 10px; + background-position: -702px 0px; + } + &.bt { + height: 14px; + background-position: -724px 0px; + } + &.bv { + height: 15px; + background-position: -746px 0px; + } + &.bw { + height: 14px; + background-position: -768px 0px; + } + &.by { + height: 10px; + background-position: -790px 0px; + } + &.bz { + height: 14px; + background-position: -812px 0px; + } + &.ca { + height: 10px; + background-position: -834px 0px; + } + &.cc { + height: 10px; + background-position: -856px 0px; + } + &.cd { + height: 15px; + background-position: -878px 0px; + } + &.cf { + height: 14px; + background-position: -900px 0px; + } + &.cg { + height: 14px; + background-position: -922px 0px; + } + &.ch { + height: 15px; + background-position: -944px 0px; + } + &.ci { + height: 14px; + background-position: -961px 0px; + } + &.ck { + height: 10px; + background-position: -983px 0px; + } + &.cl { + height: 14px; + background-position: -1005px 0px; + } + &.cm { + height: 14px; + background-position: -1027px 0px; + } + &.cn { + height: 14px; + background-position: -1049px 0px; + } + &.co { + height: 14px; + background-position: -1071px 0px; + } + &.cp { + height: 14px; + background-position: -1093px 0px; + } + &.cr { + height: 12px; + background-position: -1115px 0px; + } + &.cu { + height: 10px; + background-position: -1137px 0px; + } + &.cv { + height: 12px; + background-position: -1159px 0px; + } + &.cw { + height: 14px; + background-position: -1181px 0px; + } + &.cx { + height: 10px; + background-position: -1203px 0px; + } + &.cy { + height: 13px; + background-position: -1225px 0px; + } + &.cz { + height: 14px; + background-position: -1247px 0px; + } + &.de { + height: 12px; + background-position: -1269px 0px; + } + &.dg { + height: 10px; + background-position: -1291px 0px; + } + &.dj { + height: 14px; + background-position: -1313px 0px; + } + &.dk { + height: 15px; + background-position: -1335px 0px; + } + &.dm { + height: 10px; + background-position: -1357px 0px; + } + &.do { + height: 13px; + background-position: -1379px 0px; + } + &.dz { + height: 14px; + background-position: -1401px 0px; + } + &.ea { + height: 14px; + background-position: -1423px 0px; + } + &.ec { + height: 14px; + background-position: -1445px 0px; + } + &.ee { + height: 13px; + background-position: -1467px 0px; + } + &.eg { + height: 14px; + background-position: -1489px 0px; + } + &.eh { + height: 10px; + background-position: -1511px 0px; + } + &.er { + height: 10px; + background-position: -1533px 0px; + } + &.es { + height: 14px; + background-position: -1555px 0px; + } + &.et { + height: 10px; + background-position: -1577px 0px; + } + &.eu { + height: 14px; + background-position: -1599px 0px; + } + &.fi { + height: 12px; + background-position: -1621px 0px; + } + &.fj { + height: 10px; + background-position: -1643px 0px; + } + &.fk { + height: 10px; + background-position: -1665px 0px; + } + &.fm { + height: 11px; + background-position: -1687px 0px; + } + &.fo { + height: 15px; + background-position: -1709px 0px; + } + &.fr { + height: 14px; + background-position: -1731px 0px; + } + &.ga { + height: 15px; + background-position: -1753px 0px; + } + &.gb { + height: 10px; + background-position: -1775px 0px; + } + &.gd { + height: 12px; + background-position: -1797px 0px; + } + &.ge { + height: 14px; + background-position: -1819px 0px; + } + &.gf { + height: 14px; + background-position: -1841px 0px; + } + &.gg { + height: 14px; + background-position: -1863px 0px; + } + &.gh { + height: 14px; + background-position: -1885px 0px; + } + &.gi { + height: 10px; + background-position: -1907px 0px; + } + &.gl { + height: 14px; + background-position: -1929px 0px; + } + &.gm { + height: 14px; + background-position: -1951px 0px; + } + &.gn { + height: 14px; + background-position: -1973px 0px; + } + &.gp { + height: 14px; + background-position: -1995px 0px; + } + &.gq { + height: 14px; + background-position: -2017px 0px; + } + &.gr { + height: 14px; + background-position: -2039px 0px; + } + &.gs { + height: 10px; + background-position: -2061px 0px; + } + &.gt { + height: 13px; + background-position: -2083px 0px; + } + &.gu { + height: 11px; + background-position: -2105px 0px; + } + &.gw { + height: 10px; + background-position: -2127px 0px; + } + &.gy { + height: 12px; + background-position: -2149px 0px; + } + &.hk { + height: 14px; + background-position: -2171px 0px; + } + &.hm { + height: 10px; + background-position: -2193px 0px; + } + &.hn { + height: 10px; + background-position: -2215px 0px; + } + &.hr { + height: 10px; + background-position: -2237px 0px; + } + &.ht { + height: 12px; + background-position: -2259px 0px; + } + &.hu { + height: 10px; + background-position: -2281px 0px; + } + &.ic { + height: 14px; + background-position: -2303px 0px; + } + &.id { + height: 14px; + background-position: -2325px 0px; + } + &.ie { + height: 10px; + background-position: -2347px 0px; + } + &.il { + height: 15px; + background-position: -2369px 0px; + } + &.im { + height: 10px; + background-position: -2391px 0px; + } + &.in { + height: 14px; + background-position: -2413px 0px; + } + &.io { + height: 10px; + background-position: -2435px 0px; + } + &.iq { + height: 14px; + background-position: -2457px 0px; + } + &.ir { + height: 12px; + background-position: -2479px 0px; + } + &.is { + height: 15px; + background-position: -2501px 0px; + } + &.it { + height: 14px; + background-position: -2523px 0px; + } + &.je { + height: 12px; + background-position: -2545px 0px; + } + &.jm { + height: 10px; + background-position: -2567px 0px; + } + &.jo { + height: 10px; + background-position: -2589px 0px; + } + &.jp { + height: 14px; + background-position: -2611px 0px; + } + &.ke { + height: 14px; + background-position: -2633px 0px; + } + &.kg { + height: 12px; + background-position: -2655px 0px; + } + &.kh { + height: 13px; + background-position: -2677px 0px; + } + &.ki { + height: 10px; + background-position: -2699px 0px; + } + &.km { + height: 12px; + background-position: -2721px 0px; + } + &.kn { + height: 14px; + background-position: -2743px 0px; + } + &.kp { + height: 10px; + background-position: -2765px 0px; + } + &.kr { + height: 14px; + background-position: -2787px 0px; + } + &.kw { + height: 10px; + background-position: -2809px 0px; + } + &.ky { + height: 10px; + background-position: -2831px 0px; + } + &.kz { + height: 10px; + background-position: -2853px 0px; + } + &.la { + height: 14px; + background-position: -2875px 0px; + } + &.lb { + height: 14px; + background-position: -2897px 0px; + } + &.lc { + height: 10px; + background-position: -2919px 0px; + } + &.li { + height: 12px; + background-position: -2941px 0px; + } + &.lk { + height: 10px; + background-position: -2963px 0px; + } + &.lr { + height: 11px; + background-position: -2985px 0px; + } + &.ls { + height: 14px; + background-position: -3007px 0px; + } + &.lt { + height: 12px; + background-position: -3029px 0px; + } + &.lu { + height: 12px; + background-position: -3051px 0px; + } + &.lv { + height: 10px; + background-position: -3073px 0px; + } + &.ly { + height: 10px; + background-position: -3095px 0px; + } + &.ma { + height: 14px; + background-position: -3117px 0px; + } + &.mc { + height: 15px; + background-position: -3139px 0px; + } + &.md { + height: 10px; + background-position: -3160px 0px; + } + &.me { + height: 10px; + background-position: -3182px 0px; + } + &.mf { + height: 14px; + background-position: -3204px 0px; + } + &.mg { + height: 14px; + background-position: -3226px 0px; + } + &.mh { + height: 11px; + background-position: -3248px 0px; + } + &.mk { + height: 10px; + background-position: -3270px 0px; + } + &.ml { + height: 14px; + background-position: -3292px 0px; + } + &.mm { + height: 14px; + background-position: -3314px 0px; + } + &.mn { + height: 10px; + background-position: -3336px 0px; + } + &.mo { + height: 14px; + background-position: -3358px 0px; + } + &.mp { + height: 10px; + background-position: -3380px 0px; + } + &.mq { + height: 14px; + background-position: -3402px 0px; + } + &.mr { + height: 14px; + background-position: -3424px 0px; + } + &.ms { + height: 10px; + background-position: -3446px 0px; + } + &.mt { + height: 14px; + background-position: -3468px 0px; + } + &.mu { + height: 14px; + background-position: -3490px 0px; + } + &.mv { + height: 14px; + background-position: -3512px 0px; + } + &.mw { + height: 14px; + background-position: -3534px 0px; + } + &.mx { + height: 12px; + background-position: -3556px 0px; + } + &.my { + height: 10px; + background-position: -3578px 0px; + } + &.mz { + height: 14px; + background-position: -3600px 0px; + } + &.na { + height: 14px; + background-position: -3622px 0px; + } + &.nc { + height: 10px; + background-position: -3644px 0px; + } + &.ne { + height: 15px; + background-position: -3666px 0px; + } + &.nf { + height: 10px; + background-position: -3686px 0px; + } + &.ng { + height: 10px; + background-position: -3708px 0px; + } + &.ni { + height: 12px; + background-position: -3730px 0px; + } + &.nl { + height: 14px; + background-position: -3752px 0px; + } + &.no { + height: 15px; + background-position: -3774px 0px; + } + &.np { + height: 15px; + background-position: -3796px 0px; + } + &.nr { + height: 10px; + background-position: -3811px 0px; + } + &.nu { + height: 10px; + background-position: -3833px 0px; + } + &.nz { + height: 10px; + background-position: -3855px 0px; + } + &.om { + height: 10px; + background-position: -3877px 0px; + } + &.pa { + height: 14px; + background-position: -3899px 0px; + } + &.pe { + height: 14px; + background-position: -3921px 0px; + } + &.pf { + height: 14px; + background-position: -3943px 0px; + } + &.pg { + height: 15px; + background-position: -3965px 0px; + } + &.ph { + height: 10px; + background-position: -3987px 0px; + } + &.pk { + height: 14px; + background-position: -4009px 0px; + } + &.pl { + height: 13px; + background-position: -4031px 0px; + } + &.pm { + height: 14px; + background-position: -4053px 0px; + } + &.pn { + height: 10px; + background-position: -4075px 0px; + } + &.pr { + height: 14px; + background-position: -4097px 0px; + } + &.ps { + height: 10px; + background-position: -4119px 0px; + } + &.pt { + height: 14px; + background-position: -4141px 0px; + } + &.pw { + height: 13px; + background-position: -4163px 0px; + } + &.py { + height: 11px; + background-position: -4185px 0px; + } + &.qa { + height: 8px; + background-position: -4207px 0px; + } + &.re { + height: 14px; + background-position: -4229px 0px; + } + &.ro { + height: 14px; + background-position: -4251px 0px; + } + &.rs { + height: 14px; + background-position: -4273px 0px; + } + &.ru { + height: 14px; + background-position: -4295px 0px; + } + &.rw { + height: 14px; + background-position: -4317px 0px; + } + &.sa { + height: 14px; + background-position: -4339px 0px; + } + &.sb { + height: 10px; + background-position: -4361px 0px; + } + &.sc { + height: 10px; + background-position: -4383px 0px; + } + &.sd { + height: 10px; + background-position: -4405px 0px; + } + &.se { + height: 13px; + background-position: -4427px 0px; + } + &.sg { + height: 14px; + background-position: -4449px 0px; + } + &.sh { + height: 10px; + background-position: -4471px 0px; + } + &.si { + height: 10px; + background-position: -4493px 0px; + } + &.sj { + height: 15px; + background-position: -4515px 0px; + } + &.sk { + height: 14px; + background-position: -4537px 0px; + } + &.sl { + height: 14px; + background-position: -4559px 0px; + } + &.sm { + height: 15px; + background-position: -4581px 0px; + } + &.sn { + height: 14px; + background-position: -4603px 0px; + } + &.so { + height: 14px; + background-position: -4625px 0px; + } + &.sr { + height: 14px; + background-position: -4647px 0px; + } + &.ss { + height: 10px; + background-position: -4669px 0px; + } + &.st { + height: 10px; + background-position: -4691px 0px; + } + &.sv { + height: 12px; + background-position: -4713px 0px; + } + &.sx { + height: 14px; + background-position: -4735px 0px; + } + &.sy { + height: 14px; + background-position: -4757px 0px; + } + &.sz { + height: 14px; + background-position: -4779px 0px; + } + &.ta { + height: 10px; + background-position: -4801px 0px; + } + &.tc { + height: 10px; + background-position: -4823px 0px; + } + &.td { + height: 14px; + background-position: -4845px 0px; + } + &.tf { + height: 14px; + background-position: -4867px 0px; + } + &.tg { + height: 13px; + background-position: -4889px 0px; + } + &.th { + height: 14px; + background-position: -4911px 0px; + } + &.tj { + height: 10px; + background-position: -4933px 0px; + } + &.tk { + height: 10px; + background-position: -4955px 0px; + } + &.tl { + height: 10px; + background-position: -4977px 0px; + } + &.tm { + height: 14px; + background-position: -4999px 0px; + } + &.tn { + height: 14px; + background-position: -5021px 0px; + } + &.to { + height: 10px; + background-position: -5043px 0px; + } + &.tr { + height: 14px; + background-position: -5065px 0px; + } + &.tt { + height: 12px; + background-position: -5087px 0px; + } + &.tv { + height: 10px; + background-position: -5109px 0px; + } + &.tw { + height: 14px; + background-position: -5131px 0px; + } + &.tz { + height: 14px; + background-position: -5153px 0px; + } + &.ua { + height: 14px; + background-position: -5175px 0px; + } + &.ug { + height: 14px; + background-position: -5197px 0px; + } + &.um { + height: 11px; + background-position: -5219px 0px; + } + &.us { + height: 11px; + background-position: -5241px 0px; + } + &.uy { + height: 14px; + background-position: -5263px 0px; + } + &.uz { + height: 10px; + background-position: -5285px 0px; + } + &.va { + height: 15px; + background-position: -5307px 0px; + } + &.vc { + height: 14px; + background-position: -5324px 0px; + } + &.ve { + height: 14px; + background-position: -5346px 0px; + } + &.vg { + height: 10px; + background-position: -5368px 0px; + } + &.vi { + height: 14px; + background-position: -5390px 0px; + } + &.vn { + height: 14px; + background-position: -5412px 0px; + } + &.vu { + height: 12px; + background-position: -5434px 0px; + } + &.wf { + height: 14px; + background-position: -5456px 0px; + } + &.ws { + height: 10px; + background-position: -5478px 0px; + } + &.xk { + height: 15px; + background-position: -5500px 0px; + } + &.ye { + height: 14px; + background-position: -5522px 0px; + } + &.yt { + height: 14px; + background-position: -5544px 0px; + } + &.za { + height: 14px; + background-position: -5566px 0px; + } + &.zm { + height: 14px; + background-position: -5588px 0px; + } + &.zw { + height: 10px; + background-position: -5610px 0px; + } + &.ot { + height: 0px; + } +} + + diff --git a/scss/roojs-bootstrap/pull-xs-right.scss b/scss/roojs-bootstrap/pull-xs-right.scss new file mode 100644 index 0000000000..212e5d442a --- /dev/null +++ b/scss/roojs-bootstrap/pull-xs-right.scss @@ -0,0 +1,3 @@ +.pull-xs-right { + float: right!important; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/radio-set.scss b/scss/roojs-bootstrap/radio-set.scss new file mode 100644 index 0000000000..875f094a90 --- /dev/null +++ b/scss/roojs-bootstrap/radio-set.scss @@ -0,0 +1,150 @@ + +.roo-radio-set:before, +.roo-radio-set:after { + display: table; + content: " "; + clear: both; +} + +.radio.checked label::after +{ + -webkit-transform: scale(1, 1); + -ms-transform: scale(1, 1); + -o-transform: scale(1, 1); + transform: scale(1, 1); + background-color: $gray; +} + +.roo-radio-set.disabled .radio label +{ + opacity: 0.65; +} + +.roo-radio-set.disabled .radio label +{ + cursor: not-allowed; +} + +.roo-radio-primary .radio label::after +{ + background-color: $body-bg; +} + +.roo-radio-primary .radio.checked label::before +{ + border-color: $brand-primary; //#428bca; +} + +.roo-radio-primary .radio.checked label::after +{ + background-color: $brand-primary; //#428bca; +} + +.roo-radio-danger .radio label::after +{ + background-color: $brand-danger; +} + +.roo-radio-danger .radio.checked label::before +{ + border-color: $brand-danger; +} + +.roo-radio-danger .radio.checked label::after +{ + background-color: $brand-danger; +} + +.roo-radio-info .radio label::after +{ + background-color: $body-bg; +} + +.roo-radio-info .radio.checked label::before +{ + border-color: $brand-info; +} + +.roo-radio-info .radio.checked label::after +{ + background-color: $brand-info; +} + +.roo-radio-warning .radio label::after +{ + background-color: $body-bg; +} + +.roo-radio-warning .radio.checked label::before +{ + border-color: $brand-warning; +} + +.roo-radio-warning .radio.checked label::after +{ + background-color: $brand-warning; +} + +.roo-radio-success .radio label::after +{ + background-color: $body-bg; +} + +.roo-radio-success .radio.checked label::before +{ + border-color: $brand-success; +} + +.roo-radio-success .radio.checked label::after +{ + background-color: $brand-success; +} + +.roo-radio-set.has-warning .roo-radio-set-items label, +.roo-radio-set.has-warning .roo-radio-set-label { + color: $brand-warning; //#8a6d3b; +} + +.roo-radio-set.has-error .roo-radio-set-items label, +.roo-radio-set.has-error .roo-radio-set-label { + color: $brand-danger; //#a94442; +} + +.roo-radio-set.has-success .roo-radio-set-items label, +.roo-radio-set.has-success .roo-radio-set-label { + color: $brand-success; //#3c763d; +} + +.roo-radio-set-inline .radio { + position: relative; + display: inline-block; + padding-left: 20px; + margin-top: 0px; + margin-bottom: 0; + font-weight: 400; + vertical-align: middle; + cursor: pointer; +} + +.roo-radio-set-inline .radio + .radio { + margin-left: 10px; +} + +.roo-radio-set-label .roo-required-indicator.right-indicator { + position: absolute; +} + +.roo-radio-set-label .roo-required-indicator.right-indicator.fa-star { + font-size: 8px; + margin-left: 3px; + color: $brand-danger; +} + +.roo-form-error-popover.in { + opacity: 1; +} + +.roo-form-error-popover .tooltip-inner { + max-width: 100%; + padding: 10px; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/roojs-bootstrap.scss b/scss/roojs-bootstrap/roojs-bootstrap.scss new file mode 100644 index 0000000000..c99f29bfbc --- /dev/null +++ b/scss/roojs-bootstrap/roojs-bootstrap.scss @@ -0,0 +1,38 @@ +/* + * CAUTION! + * This CSS file is auto generated. Please edit the .scss instead! + */ + +@import "alert.scss"; +@import "calendar.scss"; +@import "carousel.scss"; +@import "checkbox.scss"; +@import "combobox.scss"; +@import "datepicker.scss"; +@import "document-manager.scss"; +@import "document-slider.scss"; +@import "document-viewer.scss"; +@import "dropdown.scss"; +@import "input.scss"; +@import "label-pill.scss"; +@import "layout.scss"; +@import "list-group.scss"; +@import "mask.scss"; +@import "masonary-squares.scss"; +@import "modal.scss"; +@import "nav-progress-bar.scss"; +@import "nav-tabs.scss"; +@import "navbar.scss"; +@import "numberbox.scss"; +@import "pull-xs-right.scss"; +@import "radio-set.scss"; +@import "secure-pass.scss"; +@import "select2.scss"; +@import "sidebar-nav.scss"; +@import "sticky-footer.scss"; +@import "table.scss"; +@import "top-bar.scss"; +@import "tweaks.scss"; +@import "upload-cropbox.scss"; +@import "phone-input.scss"; +@import "money-field.scss"; \ No newline at end of file diff --git a/scss/roojs-bootstrap/secure-pass.scss b/scss/roojs-bootstrap/secure-pass.scss new file mode 100644 index 0000000000..ab369e2664 --- /dev/null +++ b/scss/roojs-bootstrap/secure-pass.scss @@ -0,0 +1,46 @@ + + +.x-form-field-wrap .form-group { /* what is this doing here?? */ + margin-bottom: 0px; +} + +.roo-password-meter-grey { + background: $gray-light; + margin-bottom: 30px; + height: 10px; +} + +.roo-password-meter { + font-size: 12px; +} + +.roo-password-meter-container { + margin-bottom: 20px; +} + +.roo-password-meter-tooweak { + background: $brand-danger; + height: 10px; +} + +.roo-password-meter-weak { + background: $brand-warning; //#ffdddd; + height: 10px; +} + +.roo-password-meter-medium { + background: $brand-info; + height: 10px; +} + +.roo-password-meter-strong { + background: $brand-success; + height: 10px; +} + +.roo-password-meter-text { + /* padding-bottom:5px; */ + margin-bottom:30px; + font-size: 12px; + height: 10px; +} diff --git a/scss/roojs-bootstrap/select2.scss b/scss/roojs-bootstrap/select2.scss new file mode 100644 index 0000000000..ad59fcbbc3 --- /dev/null +++ b/scss/roojs-bootstrap/select2.scss @@ -0,0 +1,651 @@ +/* +Version: 3.4.8 Timestamp: Thu May 1 09:50:32 EDT 2014 +*/ +.roo-select2-container { + margin: 0; + position: relative; + /*display: inline-block;*/ + /* inline-block for ie7 */ + zoom: 1; + *display: inline; + vertical-align: middle; +} + +.roo-select2-container, +.roo-select2-drop, +.roo-select2-search, +.roo-select2-search input { + /* + Force border-box so that % widths fit the parent + container without overlap because of margin/padding. + More Info : http://www.quirksmode.org/css/box.html + */ + -webkit-box-sizing: border-box; /* webkit */ + -moz-box-sizing: border-box; /* firefox */ + box-sizing: border-box; /* css3 */ +} + +.roo-select2-container .roo-select2-choice { + display: block; + height: 26px; + padding: 0 0 0 8px; + overflow: hidden; + position: relative; + + border: 1px solid $gray-light; //#aaa; + white-space: nowrap; + line-height: 26px; + color: $gray-dark; //#444; + text-decoration: none; + + border-radius: 4px; + + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: $body-bg; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $gray-lighter), color-stop(0.5, $body-bg)); + background-image: -webkit-linear-gradient(center bottom, $gray-lighter 0%, $body-bg 50%); + background-image: -moz-linear-gradient(center bottom, $gray-lighter 0%, $body-bg 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '$body-bg', endColorstr = '$gray-lighter', GradientType = 0); + background-image: linear-gradient(to top, $gray-lighter 0%, $body-bg 50%); +} + +.roo-select2-container.roo-select2-drop-above .roo-select2-choice { + border-bottom-color: $gray-light; //#aaa; + + border-radius: 0 0 4px 4px; + + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $gray-lighter), color-stop(0.9, $body-bg)); + background-image: -webkit-linear-gradient(center bottom, $gray-lighter 0%, $body-bg 90%); + background-image: -moz-linear-gradient(center bottom, $gray-lighter 0%, $body-bg 90%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$body-bg', endColorstr='$gray-lighter', GradientType=0); + background-image: linear-gradient(to bottom, $gray-lighter 0%, $body-bg 90%); +} + +.roo-select2-container.roo-select2-allowclear .roo-select2-choice .roo-select2-chosen { + margin-right: 42px; +} + +.roo-select2-container .roo-select2-choice > .roo-select2-chosen { + margin-right: 26px; + display: block; + overflow: hidden; + + white-space: nowrap; + + text-overflow: ellipsis; + float: none; + width: auto; +} + +.roo-select2-container .roo-select2-choice abbr { + display: none; + width: 12px; + height: 12px; + position: absolute; + right: 24px; + top: 8px; + + font-size: 1px; + text-decoration: none; + + border: 0; + background: url('#{$bootstrap-image-path}/select2/select2.png') right top no-repeat; + cursor: pointer; + outline: 0; +} + +.roo-select2-container.roo-select2-allowclear .roo-select2-choice abbr { + display: inline-block; +} + +.roo-select2-container .roo-select2-choice abbr:hover { + background-position: right -11px; + cursor: pointer; +} + +.roo-select2-drop-mask { + border: 0; + margin: 0; + padding: 0; + position: fixed; + left: 0; + top: 0; + min-height: 100%; + min-width: 100%; + height: auto; + width: auto; + opacity: 0; + z-index: 9998; + /* styles required for IE to work */ + background-color: $body-bg; + filter: alpha(opacity=0); +} + +.roo-select2-drop { + width: 100%; + margin-top: -1px; + position: absolute; + z-index: 9999; + top: 100%; + + background: $body-bg; + color: $gray-base; + border: 1px solid $gray-light; + border-top: 0; + + border-radius: 0 0 4px 4px; + + -webkit-box-shadow: 0 4px 5px $black-opacity-20; + box-shadow: 0 4px 5px $black-opacity-20; +} + +.roo-select2-drop.roo-select2-drop-above { + margin-top: 1px; + border-top: 1px solid $gray-light; //#aaa; + border-bottom: 0; + + border-radius: 4px 4px 0 0; + + -webkit-box-shadow: 0 -4px 5px $black-opacity-20; + box-shadow: 0 -4px 5px $black-opacity-20; +} + +.roo-select2-drop-active { + border: 1px solid $brand-primary; //#5897fb; + border-top: none; +} + +.roo-select2-drop.roo-select2-drop-above.roo-select2-drop-active { + border-top: 1px solid $brand-primary; //#5897fb; +} + +.roo-select2-drop-auto-width { + border-top: 1px solid $gray-light; //#aaa; + width: auto; +} + +.roo-select2-drop-auto-width .roo-select2-search { + padding-top: 4px; +} + +.roo-select2-container .roo-select2-choice .roo-select2-arrow { + display: inline-block; + width: 18px; + height: 100%; + position: absolute; + right: 0; + top: 0; + + border-left: 1px solid $gray-light; //#aaa; + border-radius: 0 4px 4px 0; + + background-clip: padding-box; + + background: $gray-light; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $gray-light), color-stop(0.6, $gray-lighter)); + background-image: -webkit-linear-gradient(center bottom, $gray-light 0%, $gray-lighter 60%); + background-image: -moz-linear-gradient(center bottom, $gray-light 0%, $gray-lighter 60%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '$gray-lighter', endColorstr = '$gray-light', GradientType = 0); + background-image: linear-gradient(to top, $gray-light 0%, $gray-lighter 60%); +} + +.roo-select2-container .roo-select2-choice .roo-select2-arrow b { + display: block; + width: 100%; + height: 100%; + background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 0 1px; +} + +.roo-select2-search { + display: inline-block; + width: 100%; + min-height: 26px; + margin: 0; + padding-left: 4px; + padding-right: 4px; + + position: relative; + z-index: 10000; + + white-space: nowrap; +} + +.roo-select2-search input { + width: 100%; + height: auto !important; + min-height: 26px; + padding: 4px 20px 4px 5px; + margin: 0; + + outline: 0; + font-family: sans-serif; + font-size: 1em; + + border: 1px solid $gray-light; + border-radius: 0; + + -webkit-box-shadow: none; + box-shadow: none; + + background: $body-bg url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px; + background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, $body-bg), color-stop(0.99, $gray-lighter)); + background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, $body-bg 85%, $gray-lighter 99%); + background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, $body-bg 85%, $gray-lighter 99%); + background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, $body-bg 85%, $gray-lighter 99%) 0 0; +} + +.roo-select2-drop.roo-select2-drop-above .roo-select2-search input { + margin-top: 4px; +} + +.roo-select2-search input.roo-select2-active { + background: $body-bg url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%; + background: url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, $body-bg), color-stop(0.99, $gray-lighter)); + background: url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, $body-bg 85%, $gray-lighter 99%); + background: url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, $body-bg 85%, $gray-lighter 99%); + background: url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, $body-bg 85%, $gray-lighter 99%) 0 0; +} + +.roo-select2-container-active .roo-select2-choice, +.roo-select2-container-active .roo-select2-choices { + border: 1px solid $brand-primary; //#5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px $black-opacity-50; + box-shadow: 0 0 5px $black-opacity-50; +} + +.roo-select2-dropdown-open .roo-select2-choice { + border-bottom-color: transparent; + -webkit-box-shadow: 0 1px 0 $body-bg inset; + box-shadow: 0 1px 0 $body-bg inset; + + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + background-color: $gray-lighter; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $body-bg), color-stop(0.5, $gray-lighter)); + background-image: -webkit-linear-gradient(center bottom, $body-bg 0%, $gray-lighter 50%); + background-image: -moz-linear-gradient(center bottom, $body-bg 0%, $gray-lighter 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$gray-lighter', endColorstr='$body-bg', GradientType=0); + background-image: linear-gradient(to top, $body-bg 0%, $gray-lighter 50%); +} + +.roo-select2-dropdown-open.roo-select2-drop-above .roo-select2-choice, +.roo-select2-dropdown-open.roo-select2-drop-above .roo-select2-choices { + border: 1px solid $brand-primary; //#5897fb; + border-top-color: transparent; + + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $body-bg), color-stop(0.5, $gray-lighter)); + background-image: -webkit-linear-gradient(center top, $body-bg 0%, $gray-lighter 50%); + background-image: -moz-linear-gradient(center top, $body-bg 0%, $gray-lighter 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$gray-lighter', endColorstr='$body-bg', GradientType=0); + background-image: linear-gradient(to bottom, $body-bg 0%, $gray-lighter 50%); +} + +.roo-select2-dropdown-open .roo-select2-choice .roo-select2-arrow { + background: transparent; + border-left: none; + filter: none; +} +.roo-select2-dropdown-open .roo-select2-choice .roo-select2-arrow b { + background-position: -18px 1px; +} + +.roo-select2-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* results */ +.roo-select2-results { + max-height: 200px; + padding: 0 0 0 4px; + margin: 4px 4px 4px 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; + -webkit-tap-highlight-color: fade($gray-base, 0%); +} + +.roo-select2-results ul.roo-select2-result-sub { + margin: 0; + padding-left: 0; +} + +.roo-select2-results li { + list-style: none; + display: list-item; + background-image: none; +} + +.roo-select2-results li.roo-select2-result-with-children > .roo-select2-result-label { + font-weight: bold; +} + +.roo-select2-results .roo-select2-result-label { + padding: 3px 7px 4px; + margin: 0; + cursor: pointer; + + min-height: 1em; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.roo-select2-results-dept-1 .roo-select2-result-label { padding-left: 20px } +.roo-select2-results-dept-2 .roo-select2-result-label { padding-left: 40px } +.roo-select2-results-dept-3 .roo-select2-result-label { padding-left: 60px } +.roo-select2-results-dept-4 .roo-select2-result-label { padding-left: 80px } +.roo-select2-results-dept-5 .roo-select2-result-label { padding-left: 100px } +.roo-select2-results-dept-6 .roo-select2-result-label { padding-left: 110px } +.roo-select2-results-dept-7 .roo-select2-result-label { padding-left: 120px } + +.roo-select2-results .roo-select2-highlighted { + background: $brand-primary; //#3875d7; + color: $body-bg; +} + +.roo-select2-results li em { + background: $brand-warning; + font-style: normal; +} + +.roo-select2-results .roo-select2-highlighted em { + background: transparent; +} + +.roo-select2-results .roo-select2-highlighted ul { + background: $body-bg; + color: $gray-base; +} + + +.roo-select2-results .roo-select2-no-results, +.roo-select2-results .roo-select2-searching, +.roo-select2-results .roo-select2-selection-limit { + background: $gray-light; //#f4f4f4; + display: list-item; + padding-left: 5px; +} + +/* +disabled look for disabled choices in the results dropdown +*/ +.roo-select2-results .roo-select2-disabled.roo-select2-highlighted { + color: $gray-lighter; //#666; + background: $gray-light; //#f4f4f4; + display: list-item; + cursor: default; +} +.roo-select2-results .roo-select2-disabled { + background: $gray-light; //#f4f4f4; + display: list-item; + cursor: default; +} + +.roo-select2-results .roo-select2-selected { + display: none; +} + +.roo-select2-more-results.roo-select2-active { + background: $gray-light url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%; +} + +.roo-select2-more-results { + background: $gray-light; //#f4f4f4; + display: list-item; +} + +/* disabled styles */ + +.roo-select2-container.roo-select2-container-disabled .roo-select2-choice { + background-color: $gray-light; //#f4f4f4; + background-image: none; + border: 1px solid $gray-light; + cursor: default; +} + +.roo-select2-container.roo-select2-container-disabled .roo-select2-choice .roo-select2-arrow { + background-color: $gray-light; //#f4f4f4; + background-image: none; + border-left: 0; +} + +.roo-select2-container.roo-select2-container-disabled .roo-select2-choice abbr { + display: none; +} + + +/* multiselect */ + +.roo-select2-container-multi .roo-select2-choices { + height: auto !important; + height: 1%; + margin: 0; + padding: 0; + /*position: relative;*/ + border: 1px solid $gray-light; + cursor: text; + overflow: hidden; + background-color: $body-bg; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, $gray-lighter), color-stop(15%, $body-bg)); + background-image: -webkit-linear-gradient(top, $gray-lighter 1%, $body-bg 15%); + background-image: -moz-linear-gradient(top, $gray-lighter 1%, $body-bg 15%); + background-image: linear-gradient(to bottom, $gray-lighter 1%, $body-bg 15%); +} + +.roo-select2-locked { + padding: 3px 5px 3px 5px !important; +} + +.roo-select2-container-multi .roo-select2-choices { + min-height: 26px; +} + +.roo-select2-container-multi.roo-select2-container-active .roo-select2-choices { + border: 1px solid $brand-primary; + outline: none; + + -webkit-box-shadow: 0 0 5px $black-opacity-50; + box-shadow: 0 0 5px $black-opacity-50; +} +.roo-select2-container-multi .roo-select2-choices li { + float: left; + list-style: none; +} +html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices li +{ + float: right; +} +.roo-select2-container-multi .roo-select2-choices .roo-select2-search-field { + margin: 0; + padding: 0; + white-space: nowrap; +} + +.roo-select2-container-multi .roo-select2-choices .roo-select2-search-field input { + padding: 5px; + margin: 1px 0; + + font-family: sans-serif; + font-size: 100%; + color: $gray; //#666; + outline: 0; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: transparent !important; +} + +.roo-select2-container-multi .roo-select2-choices .roo-select2-search-field input.roo-select2-active { + background: $body-bg url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100% !important; +} + +.roo-select2-default { + color: $gray-light !important; +} + +.roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice { + + + padding: 4px 7px 4px 16px; + margin: 0 1px; + position: relative; + line-height: 13px; + color: $gray-dark; + cursor: default; + border: 1px solid $gray-light; + border-radius: 3px; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + + +html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice +{ + margin-left: 0; + margin-right: 5px; +} +.roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice .roo-select2-chosen { + cursor: default; +} +.roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice-focus { + background: $gray-light; //#d4d4d4; +} + +.roo-select2-search-choice-close { + display: block; + width: 12px; + height: 13px; + position: absolute; + right: 3px; + top: 4px; + font-size: 12px; + outline: none; + color: $gray-light; + /*background: url('#{$bootstrap-image-path}/select2/select2.png') right top no-repeat;*/ +} + +.roo-select2-search-choice-close:hover { + color: $gray-dark; +} + +html[dir="rtl"] .roo-select2-search-choice-close { + right: auto; + left: 3px; +} + +.roo-select2-container-multi .roo-select2-search-choice-close { + left: 3px; +} + +.roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice .roo-select2-search-choice-close:hover { + background-position: right -11px; +} +.roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice-focus .roo-select2-search-choice-close { + background-position: right -11px; +} + +/* disabled styles */ +.roo-select2-container-multi.roo-select2-container-disabled .roo-select2-choices { + background-color: $gray-light; //#f4f4f4; + background-image: none; + border: 1px solid $gray-light; + cursor: default; +} + +.roo-select2-container-multi.roo-select2-container-disabled .roo-select2-choices .roo-select2-search-choice { + padding: 3px 5px 3px 5px; + border: 1px solid $gray-light; + background-image: none; + background-color: $gray-light; //#f4f4f4; +} + +.roo-select2-container-multi.roo-select2-container-disabled .roo-select2-choices .roo-select2-search-choice .roo-select2-search-choice-close { display: none; + background: none; +} +/* end multiselect */ + + +.roo-select2-result-selectable .roo-select2-match, +.roo-select2-result-unselectable .roo-select2-match { + text-decoration: underline; +} + +.roo-select2-offscreen, .roo-select2-offscreen:focus { + clip: rect(0 0 0 0) !important; + width: 1px !important; + height: 1px !important; + border: 0 !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + position: absolute !important; + outline: 0 !important; + left: 0px !important; + top: 0px !important; +} + +.roo-select2-display-none { + display: none; +} + +.roo-select2-measure-scrollbar { + position: absolute; + top: -10000px; + left: -10000px; + width: 100px; + height: 100px; + overflow: scroll; +} + +/* Retina-ize icons */ + +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) { + .roo-select2-search input, + .roo-select2-search-choice-close, + .roo-select2-container .roo-select2-choice abbr, + .roo-select2-container .roo-select2-choice .roo-select2-arrow b { + background-image: url('#{$bootstrap-image-path}/select2/select2x2.png') !important; + background-repeat: no-repeat !important; + background-size: 60px 40px !important; + } + + .roo-select2-search input { + background-position: 100% -21px !important; + } +} + +.has-error .roo-select2-choices { + border-color: $brand-danger; //#a94442; + -webkit-box-shadow: inset 0 1px 1px $black-opacity-80; + box-shadow: inset 0 1px 1px $black-opacity-80; +} + +.dropdown-menu .roo-select2-result.disabled { + background-color: $gray-lighter; + color: $gray-light; + cursor: not-allowed; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/sidebar-nav.scss b/scss/roojs-bootstrap/sidebar-nav.scss new file mode 100644 index 0000000000..729593f014 --- /dev/null +++ b/scss/roojs-bootstrap/sidebar-nav.scss @@ -0,0 +1,197 @@ +.sidebar { + margin-bottom: 5px; +} + +/* override boostrap a:hover */ +.sidebar a:hover { + text-decoration: none; +} + +.sidebar .sidebar-menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* GREY BG */ +.sidebar .sidebar-menu > li, +.sidebar .sidebar-menu li.active li.treeview-menu +{ + margin: 0; + padding: 0; + border-bottom: 1px solid $gray-light; + background-color: $gray-lighter; +} +/* active child menu - white BG */ +.sidebar .sidebar-menu li.active li.treeview-menu { + background-color: $gray-light; +} + +.sidebar .sidebar-menu > li > a , +.sidebar .sidebar-menu li.open li.treeview-menu > a +{ + padding: 12px 5px 12px 15px; + display: block; + color: $gray-dark; +} + +.sidebar .sidebar-menu > li > a > .fa, +.sidebar .sidebar-menu > li > a > .glyphicon, +.sidebar .sidebar-menu > li > a > .ion { + width: 20px; +} + +.sidebar .sidebar-menu li:hover, +.sidebar .sidebar-menu li:focus, +.sidebar .sidebar-menu li:active, +.sidebar .sidebar-menu li.active li.treeview-menu:hover, +.sidebar .sidebar-menu li.active li.treeview-menu:focus, +.sidebar .sidebar-menu li.active li.treeview-menu:active +{ + background-color: $body-bg; +} + + +.sidebar .sidebar-menu li:hover a, +.sidebar .sidebar-menu li:focus a, +.sidebar .sidebar-menu li:active a, +.sidebar .sidebar-menu li.oepn li.treeview-menu a:hover, +.sidebar .sidebar-menu li.open li.treeview-menu a:focus, +.sidebar .sidebar-menu li.open li.treeview-menu a:active +{ + color: $gray-base; + text-decoration: none; +} + + +/* BLUE ACTIVE */ +.sidebar .sidebar-menu li.active { + color: $body-bg; + background-color: $brand-primary; //#337ab7; + border-color: darken($brand-primary, 10%); //#2e6da4; +} + +.sidebar .sidebar-menu li.active:hover, +.sidebar .sidebar-menu li.active:focus, +.sidebar .sidebar-menu li.active.focus +{ + color: $body-bg; + background-color: $brand-primary; //#204d74; + border-color: darken($brand-primary, 10%); //#122b40; +} + +.sidebar .sidebar-menu li.active a { + color: $body-bg; +} + +.sidebar .sidebar-menu li.disabled { + color: $gray-dark; + background-color: $body-bg; + border-color: $gray-dark; +} + +.sidebar .sidebar-menu li.disabled a { + color: $gray-light; + cursor: default; +} + +.sidebar .sidebar-menu li.danger, +.sidebar .sidebar-menu li.danger.active { + color: $body-bg; + background-color: $brand-danger; + border-color: lighten($brand-danger, 10%); +} + +.sidebar .sidebar-menu li.danger:hover, +.sidebar .sidebar-menu li.danger:focus, +.sidebar .sidebar-menu li.danger.active:focus +{ + color: $body-bg; + background-color: $brand-danger; + border-color: darken($brand-danger, 10%); + border-bottom: 1px solid darken($brand-danger, 10%); +} + +.sidebar .sidebar-menu li.danger a, +.sidebar .sidebar-menu li.danger.active a{ + color: $body-bg; +} + +/* --- open */ +.sidebar .sidebar-menu li.open ul { + display:block; +} + +.sidebar .sidebar-menu li.open .treeview-menu { + display: block; +} + +/* --- treeview menu */ + +.sidebar .sidebar-menu .treeview-menu { + display: none; + list-style: none; + padding: 0; + margin: 0; +} +.sidebar .sidebar-menu .treeview-menu > li { + margin: 0; +} +.sidebar .sidebar-menu li.open li.treeview-menu > a { + padding: 5px 5px 5px 20px; + display: block; + font-size: 14px; + margin: 0px 0px; +} +.sidebar .sidebar-menu .treeview-menu > li > a > .fa, +.sidebar .sidebar-menu .treeview-menu > li > a > .glyphicon, +.sidebar .sidebar-menu .treeview-menu > li > a > .ion { + width: 20px; +} +/* background to highlighted treeview node +.sidebar .sidebar-menu li li.treeview-menu.active { + background: #fff; +} +*/ + +.sidebar .sidebar-menu li li.treeview-menu.active > a { + font-weight: bold; +} +/* active sidebard... */ + + + +.badge-default { + background-color: $gray-light; + color: $body-bg; +} + +.badge-primary { + background-color: $brand-primary; + color: $body-bg; +} + +.badge-success { + background-color: $brand-success; + color: $body-bg; +} + +.badge-info { + background-color: $brand-info; + color: $body-bg; +} + +.badge-warning { + background-color: $brand-warning; + color: $body-bg; +} + +.badge-danger { + background-color: $brand-danger; + color: $body-bg; +} + +.sidebar .sidebar-menu > li.active .badge-info { + background-color: $body-bg; + color: $brand-info; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/sticky-footer.scss b/scss/roojs-bootstrap/sticky-footer.scss new file mode 100644 index 0000000000..62f8b7e660 --- /dev/null +++ b/scss/roojs-bootstrap/sticky-footer.scss @@ -0,0 +1,36 @@ +/*html, */ + + + +/* Sticky footer styles +-------------------------------------------------- */ +html.bootstrap-sticky { + position: relative; + min-height: 100%; +} +html.bootstrap-sticky body { + /* Margin bottom by footer height */ + margin-bottom: 60px; +} +.bootstrap-sticky-footer { + position: absolute; + bottom: 0; + width: 100%; + /* Set the fixed height of the footer here */ + height: 60px; + background-color: $well-bg; +} + + + +/* Lastly, apply responsive CSS fixes as necessary */ +@media (max-width: 767px) { + .bootstrap-sticky-footer { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + } +} + + diff --git a/scss/roojs-bootstrap/table.scss b/scss/roojs-bootstrap/table.scss new file mode 100644 index 0000000000..ca65d4ba1d --- /dev/null +++ b/scss/roojs-bootstrap/table.scss @@ -0,0 +1,99 @@ +/* paging toolbar */ + +.table { + .pagination .x-paging-position span { + padding: 3px 6px; + } + .pagination .x-paging-position span input { + margin: 0 0 0 7px; + width: 42px; + padding: 0 5px; + } + +} +.navbar .pagination>li>span { + min-height:34px; +} + +.navbar .pagination { + margin: 0; +} + + +/* these are technicall adminlte related */ +.skin-blue .navbar .pagination > li > a:active, +.skin-blue .navbar .pagination > li > a:focus, +.skin-blue .navbar .pagination>li>a { + background-color: $brand-primary; + +} +.skin-blue .navbar .pagination > li > a:hover +{ + background-color: $gray-light; +} +.skin-blue table .navbar { + background-color: $body-bg; + +} +.skin-blue .navbar .pagination>li.disabled >a{ + background-color: $gray-light; +} +.skin-blue table .navbar { + margin-bottom: 0; + min-height: 0; +} + +.table .sortable { + cursor: pointer; +} + +.table-body-fixed tbody { + overflow-y: scroll; + width: 100%; +} +.table-body-fixed thead, +.table-body-fixed tbody, +.table-body-fixed th { + display: block; +} +.table-body-fixed thead { + overflow: hidden; +} + + +.table-body-fixed tbody td, +.table-body-fixed thead > tr> th { + float: left; + border-bottom-width: 0; +} + +/* fake infinate widt.. */ +.table-body-fixed thead > tr, +.table-body-fixed tbody > tr +{ + display: block; + overflow: hidden; +} + +/* standard bootstrap does not colour rows very well.. */ + +.table > tbody > tr.info +{ + background-color: $state-info-bg; //#d9edf7; +} + +.table-hover > tbody > tr.info:hover +{ + background-color: darken($state-info-bg, 5%); //#c4e3f3; +} + +.table tfoot .navbar { + min-height : inherit; +} + +/* for ie11 && edge: fixing height inheriting from tbody to tr */ +.roo-ie11 table.table tbody tr, +.roo-edge table.table tbody tr +{ + height: auto; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/top-bar.scss b/scss/roojs-bootstrap/top-bar.scss new file mode 100644 index 0000000000..8bb7714a6d --- /dev/null +++ b/scss/roojs-bootstrap/top-bar.scss @@ -0,0 +1,120 @@ +.header .top-bar { + min-height: 30px; + background: $gray-light; + border-bottom: 1px solid $gray-lighter; + padding: 0; +} + + +@media (min-width: 980px) +{ + .top-bar .collapse { + display: block !important; + visibility: visible !important; + height: auto !important; + overflow: visible !important; + padding-bottom: 0; + } +} + +@media (min-width: 768px) and (max-width: 979px) { + .header .top-bar { + min-height: 0; + padding: 3px 0; + } +} + + +.header .social, +.footer .social { + margin-right: 4px; + line-height: 30px; + padding-left: 0; + margin-bottom: 0; +} + + +.footer .social li:last-child, +.footer .social { margin-right: 0 !important } + +.header .social li:first-child { border-left: 1px solid $gray-light } + +.header .social li, +.footer .social li { + border-right: 1px solid $gray-light; + display: table-cell; + vertical-align: middle; + height: 40px; + margin-right: 5px; + width: 40px; + text-align: center; + -webkit-transition: background .5s ease-in-out; + -moz-transition: background .5s ease-in-out; + -o-transition: background .5s ease-in-out; + -ms-transition: background .5s ease-in-out; + transition: background .5s ease-in-out; + padding: 1px; +} + +.header .social i, +.footer .social i { + color: $gray; + font-size: 16px; + -webkit-transition: color .5s ease-in-out; + -moz-transition: color .5s ease-in-out; + -o-transition: color .5s ease-in-out; + -ms-transition: color .5s ease-in-out; + transition: color .5s ease-in-out; +} + +.header .social li:hover a i, +.footer .social li:hover a i { color: $body-bg } + + + + +.team .item .team-member-links a.facebook:hover, +.member-social.dark a.facebook:hover, +.header .social li.facebook:hover, +.footer .social li.facebook:hover { background: $brand-primary } + +.team .item .team-member-links a.dribbble:hover, +.member-social.dark a.dribbble:hover, +.header .social li.dribbble:hover, +.footer .social li.dribbble:hover { background: $brand-warning } + +.team .item .team-member-links a.twitter:hover, +.member-social.dark a.twitter:hover, +.header .social li.twitter:hover, +.footer .social li.twitter:hover { background: $brand-primary } + +.team .item .team-member-links a.gplus:hover, +.member-social.dark a.gplus:hover, +.header .social li.gplus:hover, +.footer .social li.gplus:hover { background: $brand-danger } + +.team .item .team-member-links a.linkedin:hover, +.member-social.dark a.linkedin:hover, +.header .social li.linkedin:hover, +.footer .social li.linkedin:hover { background: $brand-primary } + +.team .item .team-member-links a.pinterest:hover, +.member-social.dark a.pinterest:hover, +.header .social li.pinterest:hover, +.footer .social li.pinterest:hover { background:$brand-danger } + +.header .social li.rss:hover, +.footer .social li.rss:hover { background: $brand-warning } + + +.top-bar .languages { + padding: 8px 0; +} + +.top-bar .languages a { + margin-right: 20px; + color: $gray; + font-family: "Open Sans",Helvetica,Arial,sans-serif; + font-size: 14px; + line-height: 24px; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/tweaks.scss b/scss/roojs-bootstrap/tweaks.scss new file mode 100644 index 0000000000..54f2da1738 --- /dev/null +++ b/scss/roojs-bootstrap/tweaks.scss @@ -0,0 +1,109 @@ +/* WTF is this! !! + * + * DO NOT EVER PUT ANYTHIGN IN THIS FILE... tweaks - bad name... * + */ + + +.navbar-left .input-group[class*="col-"] { + float:left; +} + +.ellipsis { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} + +.sw-child-headline { + display: inline-block; + width: auto; +} + +.box-input-label { + width: 100%; + display: inline-block; + font-weight: bold; +} + +.box-label { + margin-left: 5px; + cursor: pointer; +} +/* needed as menu ontop of form does not work */ +.input-group .form-control { + + z-index: 1; +} + +/* admin-lte - messes with checkbox and radio.. */ +.checkbox, .radio { + padding-left: 15px !important; +} + +/* inside a column it needs even more padding...*/ +/* +* It breaks all the checkbox layout. comment it first... +*/ +/*.column .checkbox, +.column .radio { + padding-left: 25px !important; +}*/ +/* paging toolbar */ + +.pagination .x-paging-position span { + padding-top:3px; padding-bottom:3px; +} +.pagination .x-paging-position span input { + margin: 0 3px; +} + +.panel-header-right { + float: right; + text-align: right; +} + +.badge-error { + background-color: $brand-danger; +} +.badge-error:hover { + background-color: darken($brand-danger, 10%); +} +.badge-warning { + background-color: $brand-warning; +} +.badge-warning:hover { + background-color: darken($brand-warning, 10%); +} +.badge-success { + background-color: $brand-success; +} +.badge-success:hover { + background-color: darken($brand-success, 10%); +} +.badge-info { + background-color: $brand-info; +} +.badge-info:hover { + background-color: darken($brand-info, 10%); +} +.badge-inverse { + background-color: $gray-dark; +} +.badge-inverse:hover { + background-color: $gray-darker; +} + +.tooltip.fade.in { + z-index: 10002; +} + +.x-hidden +{ + position:absolute; + top:0; + left:0; + visibility: hidden; + display: none; +} \ No newline at end of file diff --git a/scss/roojs-bootstrap/upload-cropbox.scss b/scss/roojs-bootstrap/upload-cropbox.scss new file mode 100644 index 0000000000..88a791e324 --- /dev/null +++ b/scss/roojs-bootstrap/upload-cropbox.scss @@ -0,0 +1,71 @@ + +.roo-upload-cropbox-selector { // it must use visibility, display is not working on old safari... + visibility: hidden; + height: 0px; +} + +.roo-upload-cropbox-dialog .modal-header, +.roo-upload-cropbox-dialog .modal-footer { + padding-top: 5px; + padding-bottom: 5px; +} + +.roo-upload-cropbox-body { + background-color: $body-bg; + border: 1px solid $gray-light; + width: 100%; + height: 450px; + max-height: 450px; + position: relative; + overflow: hidden; + cursor:move; +} + +.roo-upload-cropbox-preview { + position: absolute; + top: 0px; + left: 0px; + text-align: center; + margin: 0px; + padding: 0px; + border: none; +} + +.roo-upload-cropbox-body .roo-upload-cropbox-thumb { + position: absolute; +/* top: 50%; + left: 50%; + transform: translate(-50%, -50%);*/ + box-sizing: border-box; + border: 1px solid $gray-light; + box-shadow: 0 0 0 1000px $black-opacity-50; + background: none repeat scroll 0% 0% transparent; +} + +.roo-upload-cropbox-body .roo-upload-cropbox-empty-notify { + height: 100%; + background-color: $black-opacity-50; + color: $body-bg; + font-weight: bold; + font-size: 24px; + text-align: center; + padding-top: 50px; + font-style: italic; +} + +.roo-upload-cropbox-btn-group button { + background-color: $gray-base; + color: $body-bg; + border-color: $gray-dark; +} + +.roo-upload-cropbox-error-notify { + border-radius: 0px; + text-align: center; + padding: 0px !important; + margin: 0px !important; + position: absolute; + top: 0; + left: 0; +} + -- 2.39.2