diff --git a/DIST/RestServices_mx7_5.0.0.mpk b/DIST/RestServices_mx7_5.0.0.mpk new file mode 100644 index 0000000..15a7eb7 Binary files /dev/null and b/DIST/RestServices_mx7_5.0.0.mpk differ diff --git a/RestServices.mpr b/RestServices.mpr index 7f0cbb6..4f00ae2 100644 Binary files a/RestServices.mpr and b/RestServices.mpr differ diff --git a/javasource/restservices/RestServices.java b/javasource/restservices/RestServices.java index e0a5dd5..b2fc030 100644 --- a/javasource/restservices/RestServices.java +++ b/javasource/restservices/RestServices.java @@ -20,7 +20,7 @@ public class RestServices { /** * Version of the RestServices module */ - public static final String VERSION = "4.2.2"; + public static final String VERSION = "5.0.0"; /** * Amount of objects that are processed by the module at the same time. diff --git a/theme/.DS_Store b/theme/.DS_Store new file mode 100644 index 0000000..61dafc5 Binary files /dev/null and b/theme/.DS_Store differ diff --git a/theme/LICENSE b/theme/LICENSE new file mode 100644 index 0000000..2b833a4 --- /dev/null +++ b/theme/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017 Mendix + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/theme/README.md b/theme/README.md new file mode 100644 index 0000000..1d349f0 --- /dev/null +++ b/theme/README.md @@ -0,0 +1,55 @@ +# Mendix Atlas UI +Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go [here](https://atlas.mendix.com/). + +### Theme folder structure +The theme folder contains the default HTML pages, Sass, CSS and resources needed to style your application. + +#### Workflow +In the Sass folder you will notice two main folders, custom and lib. The lib folder houses the complete Mendix UI Framework. The custom folder is where we recommend doing *all customizations*. This will making updating to the new framework easier. + +##### Structure +Mendix is capable of creating beautiful and user-friendly UI. Our Atlas UI framework demonstrates some of its possibilities. Here you will find a basic overview of our framework. + +``` +theme/ +├── styles/ +| ├── css/ +| │ ├── * all output files +| └── sass/ +| ├── custom/ +| | ├── _custom-variable.scss +| | ├── custom.scss +| ├── lib/ +|           ├── base/ +|           ├── buildinblocks/ +| ├── components/ +| ├── customwidgets/ +|           ├── layouts/ +|          ├── _variable.scss +| ├── lib.scss +| +├── * index files +├── * assets +``` + +###### Base +The base folder contains the *architecture* for our framework. Here you will find our *mixins* and *resets*. + +###### Components +This directory contains the styling of all kinds of basic components like the datagrid, buttons, label, form, listview, and anything along those lines. They have distinct properties and can't be broken down further without losing their meaning. + +###### Custom Widgets +This directory contains any extra styling that might be needed for custom widgets downloaded from the Mendix App Store. + +###### Building Blocks +Building blocks are made up of components and widgets. For example *cards* or *headers* are building blocks. A building block could be an image, a title, and a button, assembled together into one UI block. + +###### Layouts +The layout directory contains some styles for the main sections of the layout (topbar, sidebar, footer and so on). + +###### Variable.scss +This file contains the style settings that are used across the project, allowing for consistent typography, color schemes, etc. + +### License + +MIT diff --git a/theme/components.json b/theme/components.json new file mode 100644 index 0000000..1f89214 --- /dev/null +++ b/theme/components.json @@ -0,0 +1 @@ +{"files":{"css":["lib/bootstrap/css/bootstrap.min.css","mxclientsystem/mxui/ui/mxui.css","styles/css/lib/lib.css","styles/css/custom/custom.css"],"js":["mxclientsystem/mxui/mxui.js"]},"cachebust":"635689412670032000"} \ No newline at end of file diff --git a/theme/config.rb b/theme/config.rb new file mode 100644 index 0000000..c24a352 --- /dev/null +++ b/theme/config.rb @@ -0,0 +1,19 @@ +# This file makes sure every theme has the same default output +# More documentation: http://compass-style.org/help/documentation/configuration-reference/ + +# Can be :scss or :sass. Defaults to :scss +preferred_syntax = :scss +# The path to the project when running within the web server +http_path = '/' +# The directory where the css stylesheets are kept +css_dir = 'styles/css' +# The directory where the sass stylesheets are kept +sass_dir = 'styles/sass' +# Indicates whether the compass helper functions should generate relative urls from the generated css to assets, or absolute urls using the http path for that asset type +relative_assets = true +# Indicates whether line comments should be added to compiled css that says where the selectors were defined +line_comments = false +# Set this to true to enable sourcemap output +sourcemap = false +# The output style for the compiled css +output_style = :expanded diff --git a/theme/favicon.ico b/theme/favicon.ico new file mode 100644 index 0000000..dde3234 Binary files /dev/null and b/theme/favicon.ico differ diff --git a/theme/index-rtl.html b/theme/index-rtl.html new file mode 100644 index 0000000..626c591 --- /dev/null +++ b/theme/index-rtl.html @@ -0,0 +1,27 @@ + + + + + + Mendix + + + + + + + + + + +
+ + + + diff --git a/theme/index.html b/theme/index.html new file mode 100644 index 0000000..bf765d4 --- /dev/null +++ b/theme/index.html @@ -0,0 +1,39 @@ + + + + + + Mendix + + + + + + + + + + + + + + + + + + +
+ + + + + diff --git a/theme/login-with-sso.html b/theme/login-with-sso.html new file mode 100644 index 0000000..325d18b --- /dev/null +++ b/theme/login-with-sso.html @@ -0,0 +1,40 @@ + + + + + + Login + + + + + + +
+
+ + + + + + +
+
+ + + + + diff --git a/theme/login.html b/theme/login.html new file mode 100644 index 0000000..20029f8 --- /dev/null +++ b/theme/login.html @@ -0,0 +1,37 @@ + + + + + + Login + + + + + + +
+
+ + + +
+
+ + + + + diff --git a/theme/logo.png b/theme/logo.png new file mode 100644 index 0000000..e49703b Binary files /dev/null and b/theme/logo.png differ diff --git a/theme/settings.json b/theme/settings.json new file mode 100644 index 0000000..5694fbb --- /dev/null +++ b/theme/settings.json @@ -0,0 +1,547 @@ +{ + "pageTemplates" : "WebModeler", + "designProperties": { + "Widget": [ + { + "name": "Spacing top", + "type": "Dropdown", + "description": "The outer top margin of an element.", + "options": [ + { + "name": "None", + "class": "spacing-outer-top-none" + }, + { + "name": "Small", + "class": "spacing-outer-top" + }, + { + "name": "Medium", + "class": "spacing-outer-top-medium" + }, + { + "name": "Large", + "class": "spacing-outer-top-large" + }, + { + "name": "Layout", + "class": "spacing-outer-top-layout" + } + ] + }, + { + "name": "Spacing bottom", + "type": "Dropdown", + "description": "The outer bottom margin of an element.", + "options": [ + { + "name": "None", + "class": "spacing-outer-bottom-none" + }, + { + "name": "Small", + "class": "spacing-outer-bottom" + }, + { + "name": "Medium", + "class": "spacing-outer-bottom-medium" + }, + { + "name": "Large", + "class": "spacing-outer-bottom-large" + }, + { + "name": "Layout", + "class": "spacing-outer-bottom-layout" + } + ] + }, + { + "name": "Spacing left", + "type": "Dropdown", + "description": "The outer left margin of an element.", + "options": [ + { + "name": "None", + "class": "spacing-outer-left-none" + }, + { + "name": "Small", + "class": "spacing-outer-left" + }, + { + "name": "Medium", + "class": "spacing-outer-left-medium" + }, + { + "name": "Large", + "class": "spacing-outer-left-large" + }, + { + "name": "Layout", + "class": "spacing-outer-left-layout" + } + ] + }, + { + "name": "Spacing right", + "type": "Dropdown", + "description": "The outer right margin of an element.", + "options": [ + { + "name": "None", + "class": "spacing-outer-right-none" + }, + { + "name": "Small", + "class": "spacing-outer-right" + }, + { + "name": "Medium", + "class": "spacing-outer-right-medium" + }, + { + "name": "Large", + "class": "spacing-outer-right-large" + }, + { + "name": "Layout", + "class": "spacing-outer-right-layout" + } + ] + }, + { + "name": "Align Self", + "type": "Dropdown", + "description": "Float an element to the left or right.", + "options": [ + { + "name": "Left", + "class": "pull-left" + }, + { + "name": "Right", + "class": "pull-right" + } + ] + } + ], + "DivContainer": [ + { + "name": "Align content", + "type": "Dropdown", + "description": "Align content of the element left, right, or center as a row or column.", + "options": [ + { + "name": "Left align as row", + "class": "row-left" + }, + { + "name": "Center align as row", + "class": "row-center" + }, + { + "name": "Right align as row", + "class": "row-right" + }, + { + "name": "Left align as column", + "class": "col-left" + }, + { + "name": "Center align as column", + "class": "col-center" + }, + { + "name": "Right align as column", + "class": "col-right" + } + ] + } + ], + "Button": [ + { + "name": "Size", + "type": "Dropdown", + "description": "Size of buttons", + "options": [ + { + "name": "Small", + "class": "btn-sm" + }, + { + "name": "Large", + "class": "btn-lg" + } + ] + }, + { + "name": "Full width", + "type": "Toggle", + "description": "Create block-level buttons (buttons that span the full width of a parent).", + "class": "btn-block" + }, + + { + "name": "Bordered", + "type": "Toggle", + "description": "Buttons styled with a transparent background, colored border, and colored text.", + "class": "btn-bordered" + }, + { + "name": "Align icon", + "type": "Dropdown", + "description": "Align an icon to the left or right of an element.", + "options": [ + { + "name": "Right", + "class": "btn-icon-right" + }, + { + "name": "Top", + "class": "btn-icon-top" + } + ] + } + ], + "ListView": [ + { + "name": "Style", + "type": "Dropdown", + "description": "Choose one of the following styles to change the appearance of the listview.", + "options": [ + { + "name": "Striped", + "class": "listview-striped" + }, + { + "name": "Bordered", + "class": "listview-bordered" + }, + { + "name": "Lined", + "class": "listview-lined" + }, + { + "name": "No Styling", + "class": "listview-stylingless" + } + ] + }, + { + "name": "Hover style", + "type": "Toggle", + "description": "Enable listview hover to make the rows hoverable.", + "class": "listview-hover" + }, + { + "name": "Row Size", + "type": "Dropdown", + "description": "Increase or decrease the row spacing of the listview.", + "options": [ + { + "name": "Small", + "class": "listview-sm" + }, + { + "name": "Large", + "class": "listview-lg" + } + ] + } + ], + "DataGrid": [ + { + "name": "Style", + "type": "Dropdown", + "description": "Choose one of the following styles to change the appearance of the data grid.", + "options": [ + { + "name": "Striped", + "class": "datagrid-striped" + }, + { + "name": "Bordered", + "class": "datagrid-bordered" + }, + { + "name": "Lined", + "class": "datagrid-lined" + } + ] + }, + { + "name": "Hover style", + "type": "Toggle", + "description": "Enable data grid hover to make the rows hoverable.", + "class": "datagrid-hover" + }, + { + "name": "Row size", + "type": "Dropdown", + "description": "Increase or decrease the row spacing of the data grid row.", + "options": [ + { + "name": "Small", + "class": "datagrid-sm" + }, + { + "name": "Large", + "class": "datagrid-lg" + } + ] + } + ], + "TemplateGrid": [ + { + "name": "Style", + "type": "Dropdown", + "description": "Choose one of the following styles to change the appearance of the template grid.", + "options": [ + { + "name": "Striped", + "class": "templategrid-striped" + }, + { + "name": "Bordered", + "class": "templategrid-bordered" + }, + { + "name": "Lined", + "class": "templategrid-lined" + }, + { + "name": "No styling", + "class": "templategrid-stylingless" + } + ] + }, + { + "name": "Hover style", + "type": "Toggle", + "description": "Enable template grid hover to make the rows hoverable.", + "class": "templategrid-hover" + } + ], + "GroupBox": [ + { + "name": "Style", + "type": "Dropdown", + "description": "Choose one of the following styles to change the appearance of the groupbox.", + "options": [ + { + "name": "Default", + "class": "groupbox-default" + }, + { + "name": "Primary", + "class": "groupbox-primary" + }, + { + "name": "Inverse", + "class": "groupbox-inverse" + }, + { + "name": "Success", + "class": "groupbox-success" + }, + { + "name": "Warning", + "class": "groupbox-warning" + }, + { + "name": "Danger", + "class": "groupbox-danger" + }, + { + "name": "Transparent", + "class": "groupbox-transparent" + } + ] + }, + { + "name": "Callout style", + "type": "Toggle", + "description": "Enable the groupbox callout functionality to highlight the importance of the groupbox.", + "class": "groupbox-callout" + } + ], + "Image": [ + { + "name": "Style", + "type": "Dropdown", + "description": "Choose the style of your image.", + "options": [ + { + "name": "Rounded", + "class": "img-rounded" + }, + { + "name": "Thumbnail", + "class": "img-thumbnail" + }, + { + "name": "Circle", + "class": "img-circle" + } + ] + }, + { + "name": "Center", + "type": "Toggle", + "description": "Align the image in the center of an element.", + "class": "img-center" + } + ], + "Label": [ + { + "name": "Style", + "type": "Dropdown", + "description": "Change the appearance of a label.", + "options": [ + { + "name": "Default", + "class": "label-default" + }, + { + "name": "Primary", + "class": "label-primary" + }, + { + "name": "Inverse", + "class": "label-inverse" + }, + { + "name": "Success", + "class": "label-success" + }, + { + "name": "Warning", + "class": "label-warning" + }, + { + "name": "Danger", + "class": "label-danger" + } + ] + } + ], + "DynamicText": [ + { + "name": "Weight", + "type": "Dropdown", + "description": "Emphasize a snippet of text with a heavier or lighter font weight.", + "options": [ + { + "name": "Light", + "class": "text-light" + }, + { + "name": "Normal", + "class": "text-normal" + }, + { + "name": "Semibold", + "class": "text-semibold" + }, + { + "name": "Bold", + "class": "text-bold" + } + ] + }, + { + "name": "Color", + "type": "Dropdown", + "description": "Change the color of a snippet of text.", + "options": [ + { + "name": "Header color", + "class": "text-header" + }, + { + "name": "Detail color", + "class": "text-detail" + }, + { + "name": "Default", + "class": "text-default" + }, + { + "name": "Primary", + "class": "text-primary" + }, + { + "name": "Inverse", + "class": "text-inverse" + }, + { + "name": "Success", + "class": "text-success" + }, + { + "name": "Warning", + "class": "text-warning" + }, + { + "name": "Danger", + "class": "text-danger" + } + ] + }, + { + "name": "Alignment", + "type": "Dropdown", + "description": "Align text to components.", + "options": [ + { + "name": "Left", + "class": "text-left d-block" + }, + { + "name": "Center", + "class": "text-center d-block" + }, + { + "name": "Right", + "class": "text-right d-block" + } + ] + }, + { + "name": "Transform", + "type": "Dropdown", + "description": "Change the letter case of your text.", + "options": [ + { + "name": "Lowercase", + "class": "text-lowercase" + }, + { + "name": "Uppercase", + "class": "text-uppercase" + }, + { + "name": "Capitalize", + "class": "text-capitalize" + } + ] + }, + { + "name": "Wrap options", + "type": "Dropdown", + "description": "Break long words and sentences into multiple lines.", + "options": [ + { + "name": "Wrap", + "class": "text-break" + }, + { + "name": "No Wrap", + "class": "text-nowrap" + } + ] + } + ] + } +} diff --git a/theme/styles/.DS_Store b/theme/styles/.DS_Store new file mode 100644 index 0000000..ada1cc9 Binary files /dev/null and b/theme/styles/.DS_Store differ diff --git a/theme/styles/css/custom/custom.css b/theme/styles/css/custom/custom.css new file mode 100644 index 0000000..e69de29 diff --git a/theme/styles/css/lib/lib.css b/theme/styles/css/lib/lib.css new file mode 100644 index 0000000..cb5f94c --- /dev/null +++ b/theme/styles/css/lib/lib.css @@ -0,0 +1,5757 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); +@keyframes slideInUp { + from { + visibility: visible; + transform: translate3d(0, 100%, 0); + } + to { + transform: translate3d(0, 0, 0); + } +} +.animated { + animation-duration: 0.4s; + animation-fill-mode: both; +} + +.slideInUp { + animation-name: slideInUp; +} + +@keyframes slideInDown { + from { + visibility: visible; + transform: translate3d(0, -100%, 0); + } + to { + transform: translate3d(0, 0, 0); + } +} +.slideInDown { + animation-name: slideInDown; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.fadeIn { + animation-name: fadeIn; +} + +.mx-scrollcontainer .mx-scrollcontainer-wrapper { + padding: 0; +} +.mx-scrollcontainer .mx-scrollcontainer-wrapper .mx-layoutgrid-fixed { + width: 100%; + margin: auto; +} +@media (min-width: 768px) { + .mx-scrollcontainer .mx-scrollcontainer-wrapper .mx-layoutgrid-fixed { + max-width: 750px; + } +} +@media (min-width: 992px) { + .mx-scrollcontainer .mx-scrollcontainer-wrapper .mx-layoutgrid-fixed { + max-width: 970px; + } +} +@media (min-width: 1200px) { + .mx-scrollcontainer .mx-scrollcontainer-wrapper .mx-layoutgrid-fixed { + max-width: 1170px; + } +} + +.mx-scrollcontainer .mx-placeholder { + width: 100%; + height: 100%; +} +@media (max-width: 767px) { + .mx-scrollcontainer .mx-placeholder .mx-layoutgrid { + padding: 15px 15px 15px 15px; + } +} +@media (min-width: 768px) { + .mx-scrollcontainer .mx-placeholder .mx-layoutgrid { + padding: 30px 30px 30px 30px; + } +} +@media (min-width: 992px) { + .mx-scrollcontainer .mx-placeholder .mx-layoutgrid { + padding: 30px 30px 30px 30px; + } +} +.mx-scrollcontainer .mx-placeholder .mx-layoutgrid .mx-layoutgrid { + padding: 0; +} + +/* ========================================================================== + Base + + Default settings +========================================================================== */ +html { + height: 100%; +} + +body { + min-height: 100%; + color: #555555; + background-color: #FFFFFF; + font-family: "Open Sans", sans-serif; + font-size: 14px; + font-weight: normal; + line-height: 1.42857; +} + +a { + -webkit-transition: 0.25s; + -moz-transition: 0.25s; + -o-transition: 0.25s; + transition: 0.25s; + color: #0595DB; + -webkit-backface-visibility: hidden; +} + +a:hover { + text-decoration: underline; + color: #036290; +} + +a:focus { + outline: thin dotted; +} + +a:active, +a:hover { + outline: 0; +} + +input:focus, +button:focus, +.mx-link:focus { + outline: 0; +} + +div[tabindex] { + outline: 0; +} + +.disabled, +[disabled] { + cursor: not-allowed; + opacity: 0.65; + -webkit-box-shadow: none; + box-shadow: none; + filter: alpha(opacity=65); +} + +/* ========================================================================== + Inputs + + The form-control class style all inputs +========================================================================== */ +.form-control { + display: block; + width: 100%; + height: auto; + padding: 8px 10px; + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + color: #555555; + border: 1px solid #D7D7D7; + border-radius: 4px; + background-color: #FFF; + background-image: none; + -webkit-box-shadow: none; + box-shadow: none; + font-size: 14px; + line-height: 1.42857; + -moz-appearance: none; + -webkit-appearance: none; +} + +.form-control:focus { + border-color: #0595DB; + outline: 0; + background-color: #FFF; + -webkit-box-shadow: none; + box-shadow: none; +} + +textarea.form-control { + height: auto; +} + +select.form-control { + padding-right: 30px; + background-image: url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: calc(100% - 10px) center; + -moz-appearance: none; + -webkit-appearance: none; +} + +.form-control-lined { + border: 0; + border-bottom: 1px solid #D7D7D7; + border-radius: 0; + background-color: transparent; +} +.form-control-lined:focus { + background-color: transparent; +} + +.form-control-static, .form-group div[class*="textBox"] > label, +.form-group div[class*="textArea"] > label, +.form-group div[class*="datePicker"] > label { + overflow: hidden; + min-height: auto; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 10px; + border-bottom: 1px solid #F0F0EE; + font-size: 14px; + line-height: 1.42857; +} + +.mx-textarea label { + height: auto; +} + +.mx-fileinput { + /* File input widget hover fix */ +} +.mx-fileinput .mx-wrapped-label { + display: inline-block; + width: 200px; +} +.mx-fileinput .mx-wrapped-form .mx-wrapped-input { + cursor: pointer; +} +.mx-fileinput .mx-wrapped-form .mx-fileinput-upload-button:hover { + background-color: #FFF; +} + +.form-group { + margin-bottom: 15px; +} +.form-group > [class*="col-"] { + padding-right: 15px; + padding-left: 15px; +} +.form-group .control-label { + color: #666; + font-size: 14px; + font-weight: 600; +} + +@media (min-width: 768px) { + .form-horizontal .control-label { + padding-top: 8px; + padding-bottom: 8px; + line-height: 1.42857; + } +} + +/* ========================================================================== + Alerts + + Default Bootstrap Alert boxes. Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages +========================================================================== */ +.alert { + margin-top: 0; + padding: 15px; + border: 0; + border-radius: 4px; +} + +.alert-bordered { + border: 1px solid; +} + +.alert-success { + color: #477901; + border-color: #538d01; + background-color: #e4f4cc; +} + +.alert-info { + color: #2b6a94; + border-color: #327bad; + background-color: #daeffd; +} + +.alert-warning { + color: #955d11; + border-color: #ae6d14; + background-color: #feebd2; +} + +.alert-danger { + color: #8e1116; + border-color: #a61419; + background-color: #fbd2d3; +} + +.has-error .alert { + margin-top: 8px; + margin-bottom: 0; +} + +/* ========================================================================== + Backgrounds + + Different background components, all managed by variables +========================================================================== */ +.background-main { + background-color: #FFFFFF !important; +} + +.background-secondary { + background-color: #F5F8FD !important; +} + +.background-default { + background-color: #DDDDDD !important; +} + +.background-default-darker { + background-color: #858585 !important; +} + +.background-default-dark { + background-color: #9b9b9b !important; +} + +.background-default-light { + background-color: #ebebeb !important; +} + +.background-default-lighter { + background-color: #f8f8f8 !important; +} + +.background-inverse { + background-color: #252C36 !important; +} + +.background-inverse-darker { + background-color: #161a20 !important; +} + +.background-inverse-dark { + background-color: #1a1f26 !important; +} + +.background-inverse-light { + background-color: #7c8086 !important; +} + +.background-inverse-lighter { + background-color: #d3d5d7 !important; +} + +.background-primary { + background-color: #0595DB !important; +} + +.background-primary-darker { + background-color: #035983 !important; +} + +.background-primary-dark { + background-color: #046899 !important; +} + +.background-primary-light { + background-color: #69bfe9 !important; +} + +.background-primary-lighter { + background-color: #cdeaf8 !important; +} + +.background-info { + background-color: #48B0F7 !important; +} + +.background-info-darker { + background-color: #2b6a94 !important; +} + +.background-info-dark { + background-color: #327bad !important; +} + +.background-info-light { + background-color: #91d0fa !important; +} + +.background-info-lighter { + background-color: #daeffd !important; +} + +.background-success { + background-color: #76CA02 !important; +} + +.background-success-darker { + background-color: #477901 !important; +} + +.background-success-dark { + background-color: #538d01 !important; +} + +.background-success-light { + background-color: #addf67 !important; +} + +.background-success-lighter { + background-color: #e4f4cc !important; +} + +.background-warning { + background-color: #F99B1D !important; +} + +.background-warning-darker { + background-color: #955d11 !important; +} + +.background-warning-dark { + background-color: #ae6d14 !important; +} + +.background-warning-light { + background-color: #fbc377 !important; +} + +.background-warning-lighter { + background-color: #feebd2 !important; +} + +.background-danger { + background-color: #ED1C24 !important; +} + +.background-danger-darker { + background-color: #8e1116 !important; +} + +.background-danger-dark { + background-color: #a61419 !important; +} + +.background-danger-light { + background-color: #f4777c !important; +} + +.background-danger-lighter { + background-color: #fbd2d3 !important; +} + +.background-brand-gradient { + background-image: linear-gradient(152deg, #0CC7F0 0%, #087ECC 51%, #077AC9 55%, #0659B9 78%); +} + +/* ========================================================================== + Buttons + + Default Bootstrap and Mendix Buttons +========================================================================== */ +.btn, +.mx-button { + display: inline-block; + margin-bottom: 0; + padding: 0.6em 1em; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + text-align: center; + vertical-align: middle; + white-space: nowrap; + color: #0595DB; + border: 1px solid transparent; + border-radius: 4px; + background-color: #FFF; + background-image: none; + box-shadow: none; + text-shadow: none; + font-size: 14px; + line-height: 1.42857; +} +.btn:hover, .btn:focus, .btn:active, +.mx-button:hover, +.mx-button:focus, +.mx-button:active { + outline: none; + box-shadow: none; +} + +.mx-link { + padding: 0; + color: #0595DB; +} +.mx-link a { + color: inherit; +} + +.btn img, +.mx-button img, +.mx-link img { + height: 18px; + margin-top: -1px; + margin-right: 5px; +} + +.dj_ie8 .mx-link { + margin-right: 0; + white-space: normal; +} + +.btn, +.btn-default { + color: #0595DB; + border-color: #DDDDDD; + background-color: #FFF; +} +.btn:hover, .btn:focus, .btn:active, .btn.active, .open > .btn.dropdown-toggle, +.btn-default:hover, +.btn-default:focus, +.btn-default:active, +.btn-default.active, .open > +.btn-default.dropdown-toggle { + color: #0595DB; + border-color: #DDDDDD; + background-color: #DDDDDD; +} +.btn:active, .btn.active, .open > .btn.dropdown-toggle, +.btn-default:active, +.btn-default.active, .open > +.btn-default.dropdown-toggle { + background-image: none; +} +.btn.disabled, .btn.disabled:hover, .btn.disabled:focus, .btn.disabled:active, .btn.disabled.active, .btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus, .btn[disabled]:active, .btn[disabled].active, +.btn fieldset[disabled], +.btn fieldset[disabled]:hover, +.btn fieldset[disabled]:focus, +.btn fieldset[disabled]:active, +.btn fieldset[disabled].active, +.btn-default.disabled, +.btn-default.disabled:hover, +.btn-default.disabled:focus, +.btn-default.disabled:active, +.btn-default.disabled.active, +.btn-default[disabled], +.btn-default[disabled]:hover, +.btn-default[disabled]:focus, +.btn-default[disabled]:active, +.btn-default[disabled].active, +.btn-default fieldset[disabled], +.btn-default fieldset[disabled]:hover, +.btn-default fieldset[disabled]:focus, +.btn-default fieldset[disabled]:active, +.btn-default fieldset[disabled].active { + border-color: #DDDDDD; + background-color: #FFF; +} +.btn.btn-bordered, +.btn-default.btn-bordered { + background-color: transparent; +} +.btn.btn-bordered:hover, .btn.btn-bordered:focus, .btn.btn-bordered:active, .btn.btn-bordered.active, .open > .btn.btn-bordered.dropdown-toggle, +.btn-default.btn-bordered:hover, +.btn-default.btn-bordered:focus, +.btn-default.btn-bordered:active, +.btn-default.btn-bordered.active, .open > +.btn-default.btn-bordered.dropdown-toggle { + color: #0595DB; + border-color: #DDDDDD; + background-color: #DDDDDD; +} +.btn.btn-link, +.btn-default.btn-link { + text-decoration: none; + border-color: transparent; + background-color: transparent; +} +.btn.btn-link:hover, +.btn-default.btn-link:hover { + border-color: #EEEEEE; + background-color: #EEEEEE; +} + +.btn-primary, .datagrid-fullsearch.mx-grid .mx-grid-search-button { + color: #FFF; + border-color: #0595DB; + background-color: #0595DB; +} +.btn-primary:hover, .datagrid-fullsearch.mx-grid .mx-grid-search-button:hover, .btn-primary:focus, .datagrid-fullsearch.mx-grid .mx-grid-search-button:focus, .btn-primary:active, .datagrid-fullsearch.mx-grid .mx-grid-search-button:active, .btn-primary.active, .datagrid-fullsearch.mx-grid .active.mx-grid-search-button, .open > .btn-primary.dropdown-toggle, .datagrid-fullsearch.mx-grid .open > .dropdown-toggle.mx-grid-search-button { + color: #FFF; + border-color: #0477af; + background-color: #0477af; +} +.btn-primary:active, .datagrid-fullsearch.mx-grid .mx-grid-search-button:active, .btn-primary.active, .datagrid-fullsearch.mx-grid .active.mx-grid-search-button, .open > .btn-primary.dropdown-toggle, .datagrid-fullsearch.mx-grid .open > .dropdown-toggle.mx-grid-search-button { + background-image: none; +} +.btn-primary.disabled, .datagrid-fullsearch.mx-grid .disabled.mx-grid-search-button, .btn-primary.disabled:hover, .datagrid-fullsearch.mx-grid .disabled.mx-grid-search-button:hover, .btn-primary.disabled:focus, .datagrid-fullsearch.mx-grid .disabled.mx-grid-search-button:focus, .btn-primary.disabled:active, .datagrid-fullsearch.mx-grid .disabled.mx-grid-search-button:active, .btn-primary.disabled.active, .datagrid-fullsearch.mx-grid .disabled.active.mx-grid-search-button, .btn-primary[disabled], .datagrid-fullsearch.mx-grid [disabled].mx-grid-search-button, .btn-primary[disabled]:hover, .datagrid-fullsearch.mx-grid [disabled].mx-grid-search-button:hover, .btn-primary[disabled]:focus, .datagrid-fullsearch.mx-grid [disabled].mx-grid-search-button:focus, .btn-primary[disabled]:active, .datagrid-fullsearch.mx-grid [disabled].mx-grid-search-button:active, .btn-primary[disabled].active, .datagrid-fullsearch.mx-grid [disabled].active.mx-grid-search-button, +.btn-primary fieldset[disabled], +.datagrid-fullsearch.mx-grid .mx-grid-search-button fieldset[disabled], +.btn-primary fieldset[disabled]:hover, +.datagrid-fullsearch.mx-grid .mx-grid-search-button fieldset[disabled]:hover, +.btn-primary fieldset[disabled]:focus, +.datagrid-fullsearch.mx-grid .mx-grid-search-button fieldset[disabled]:focus, +.btn-primary fieldset[disabled]:active, +.datagrid-fullsearch.mx-grid .mx-grid-search-button fieldset[disabled]:active, +.btn-primary fieldset[disabled].active, +.datagrid-fullsearch.mx-grid .mx-grid-search-button fieldset[disabled].active { + border-color: #0595DB; + background-color: #0595DB; +} +.btn-primary.btn-bordered, .datagrid-fullsearch.mx-grid .btn-bordered.mx-grid-search-button { + background-color: transparent; + color: #0595DB; +} +.btn-primary.btn-bordered:hover, .datagrid-fullsearch.mx-grid .btn-bordered.mx-grid-search-button:hover, .btn-primary.btn-bordered:focus, .datagrid-fullsearch.mx-grid .btn-bordered.mx-grid-search-button:focus, .btn-primary.btn-bordered:active, .datagrid-fullsearch.mx-grid .btn-bordered.mx-grid-search-button:active, .btn-primary.btn-bordered.active, .datagrid-fullsearch.mx-grid .btn-bordered.active.mx-grid-search-button, .open > .btn-primary.btn-bordered.dropdown-toggle, .datagrid-fullsearch.mx-grid .open > .btn-bordered.dropdown-toggle.mx-grid-search-button { + color: #FFF; + border-color: #0595DB; + background-color: #0595DB; +} +.btn-primary.btn-link, .datagrid-fullsearch.mx-grid .btn-link.mx-grid-search-button { + text-decoration: none; + border-color: transparent; + background-color: transparent; + color: #0595DB; +} +.btn-primary.btn-link:hover, .datagrid-fullsearch.mx-grid .btn-link.mx-grid-search-button:hover { + border-color: #EEEEEE; + background-color: #EEEEEE; +} + +.btn-inverse { + color: #FFF; + border-color: #252C36; + background-color: #252C36; +} +.btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .open > .btn-inverse.dropdown-toggle { + color: #FFF; + border-color: #51565e; + background-color: #51565e; +} +.btn-inverse:active, .btn-inverse.active, .open > .btn-inverse.dropdown-toggle { + background-image: none; +} +.btn-inverse.disabled, .btn-inverse.disabled:hover, .btn-inverse.disabled:focus, .btn-inverse.disabled:active, .btn-inverse.disabled.active, .btn-inverse[disabled], .btn-inverse[disabled]:hover, .btn-inverse[disabled]:focus, .btn-inverse[disabled]:active, .btn-inverse[disabled].active, +.btn-inverse fieldset[disabled], +.btn-inverse fieldset[disabled]:hover, +.btn-inverse fieldset[disabled]:focus, +.btn-inverse fieldset[disabled]:active, +.btn-inverse fieldset[disabled].active { + border-color: #252C36; + background-color: #252C36; +} +.btn-inverse.btn-bordered { + background-color: transparent; + color: #252C36; +} +.btn-inverse.btn-bordered:hover, .btn-inverse.btn-bordered:focus, .btn-inverse.btn-bordered:active, .btn-inverse.btn-bordered.active, .open > .btn-inverse.btn-bordered.dropdown-toggle { + color: #FFF; + border-color: #252C36; + background-color: #252C36; +} +.btn-inverse.btn-link { + text-decoration: none; + border-color: transparent; + background-color: transparent; + color: #252C36; +} +.btn-inverse.btn-link:hover { + border-color: #EEEEEE; + background-color: #EEEEEE; +} + +.btn-success { + color: #FFF; + border-color: #76CA02; + background-color: #76CA02; +} +.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle { + color: #FFF; + border-color: #5ea202; + background-color: #5ea202; +} +.btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle { + background-image: none; +} +.btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled]:active, .btn-success[disabled].active, +.btn-success fieldset[disabled], +.btn-success fieldset[disabled]:hover, +.btn-success fieldset[disabled]:focus, +.btn-success fieldset[disabled]:active, +.btn-success fieldset[disabled].active { + border-color: #76CA02; + background-color: #76CA02; +} +.btn-success.btn-bordered { + background-color: transparent; + color: #76CA02; +} +.btn-success.btn-bordered:hover, .btn-success.btn-bordered:focus, .btn-success.btn-bordered:active, .btn-success.btn-bordered.active, .open > .btn-success.btn-bordered.dropdown-toggle { + color: #FFF; + border-color: #76CA02; + background-color: #76CA02; +} +.btn-success.btn-link { + text-decoration: none; + border-color: transparent; + background-color: transparent; + color: #76CA02; +} +.btn-success.btn-link:hover { + border-color: #EEEEEE; + background-color: #EEEEEE; +} + +.btn-info { + color: #FFF; + border-color: #48B0F7; + background-color: #48B0F7; +} +.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle { + color: #FFF; + border-color: #3a8dc6; + background-color: #3a8dc6; +} +.btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle { + background-image: none; +} +.btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled]:active, .btn-info[disabled].active, +.btn-info fieldset[disabled], +.btn-info fieldset[disabled]:hover, +.btn-info fieldset[disabled]:focus, +.btn-info fieldset[disabled]:active, +.btn-info fieldset[disabled].active { + border-color: #48B0F7; + background-color: #48B0F7; +} +.btn-info.btn-bordered { + background-color: transparent; + color: #48B0F7; +} +.btn-info.btn-bordered:hover, .btn-info.btn-bordered:focus, .btn-info.btn-bordered:active, .btn-info.btn-bordered.active, .open > .btn-info.btn-bordered.dropdown-toggle { + color: #FFF; + border-color: #48B0F7; + background-color: #48B0F7; +} +.btn-info.btn-link { + text-decoration: none; + border-color: transparent; + background-color: transparent; + color: #48B0F7; +} +.btn-info.btn-link:hover { + border-color: #EEEEEE; + background-color: #EEEEEE; +} + +.btn-warning { + color: #FFF; + border-color: #F99B1D; + background-color: #F99B1D; +} +.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle { + color: #FFF; + border-color: #c77c17; + background-color: #c77c17; +} +.btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle { + background-image: none; +} +.btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled]:active, .btn-warning[disabled].active, +.btn-warning fieldset[disabled], +.btn-warning fieldset[disabled]:hover, +.btn-warning fieldset[disabled]:focus, +.btn-warning fieldset[disabled]:active, +.btn-warning fieldset[disabled].active { + border-color: #F99B1D; + background-color: #F99B1D; +} +.btn-warning.btn-bordered { + background-color: transparent; + color: #F99B1D; +} +.btn-warning.btn-bordered:hover, .btn-warning.btn-bordered:focus, .btn-warning.btn-bordered:active, .btn-warning.btn-bordered.active, .open > .btn-warning.btn-bordered.dropdown-toggle { + color: #FFF; + border-color: #F99B1D; + background-color: #F99B1D; +} +.btn-warning.btn-link { + text-decoration: none; + border-color: transparent; + background-color: transparent; + color: #F99B1D; +} +.btn-warning.btn-link:hover { + border-color: #EEEEEE; + background-color: #EEEEEE; +} + +.btn-danger { + color: #FFF; + border-color: #ED1C24; + background-color: #ED1C24; +} +.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle { + color: #FFF; + border-color: #be161d; + background-color: #be161d; +} +.btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle { + background-image: none; +} +.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, +.btn-danger fieldset[disabled], +.btn-danger fieldset[disabled]:hover, +.btn-danger fieldset[disabled]:focus, +.btn-danger fieldset[disabled]:active, +.btn-danger fieldset[disabled].active { + border-color: #ED1C24; + background-color: #ED1C24; +} +.btn-danger.btn-bordered { + background-color: transparent; + color: #ED1C24; +} +.btn-danger.btn-bordered:hover, .btn-danger.btn-bordered:focus, .btn-danger.btn-bordered:active, .btn-danger.btn-bordered.active, .open > .btn-danger.btn-bordered.dropdown-toggle { + color: #FFF; + border-color: #ED1C24; + background-color: #ED1C24; +} +.btn-danger.btn-link { + text-decoration: none; + border-color: transparent; + background-color: transparent; + color: #ED1C24; +} +.btn-danger.btn-link:hover { + border-color: #EEEEEE; + background-color: #EEEEEE; +} + +.btn-lg { + font-size: 16px; +} +.btn-lg img { + height: calc($font-size-small + 4px); +} + +.btn-sm { + font-size: 12px; +} +.btn-sm img { + height: calc($font-size-small + 4px); +} + +.btn-image { + padding: 0; + vertical-align: middle; + border-style: none; + background-color: transparent; +} +.btn-image img { + display: block; + height: auto; +} +.btn-image:hover, .btn-image:focus { + background-color: transparent; +} + +.btn-icon > img, .btn-icon > .glyphicon { + margin: 0; +} + +.btn-icon-right > img, .btn-icon-right > .glyphicon { + float: right; + margin-left: 5px; +} + +.btn-icon-top { + padding-right: 0; + padding-left: 0; +} +.btn-icon-top > img, .btn-icon-top > .glyphicon { + display: block; + margin: 0 0 5px 0; +} + +.profile-phone .btn, +.profile-phone .mx-link { + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + transition: all 0.2s; +} +.profile-phone .btn:active, +.profile-phone .mx-link:active { + -webkit-transform: translateY(1px); + transform: translateY(1px); +} + +/* ========================================================================== + Grid + + Default Mendix Grid (used for Mendix Datagrid) +========================================================================== */ +.mx-grid { + padding: 0px; + border: 0; + border-radius: 0; +} +.mx-grid .mx-grid-controlbar { + margin: 10px 0; + /* Paging */ +} +.mx-grid .mx-grid-controlbar .mx-grid-pagingbar { + /* Buttons */ + /* Text Paging .. to .. to .. */ +} +.mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-button { + padding: 6px; + color: #888888; + border-color: transparent; + background-color: transparent; +} +.mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-button:hover { + color: #0595DB; + border-color: transparent; + background-color: transparent; +} +.mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-grid-paging-status { + padding: 0 8px 8px; +} +.mx-grid .mx-grid-searchbar { + margin: 10px 0; +} +.mx-grid .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-label { + vertical-align: middle; +} +.mx-grid .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-label label { + padding-top: 5px; +} +.mx-grid .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-input .form-control { + height: 28px; + font-size: 11px; +} +.mx-grid .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-input select.form-control { + padding: 3px; + vertical-align: middle; +} +.mx-grid .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-input .mx-button { + height: 28px; + padding-top: 2px; + padding-bottom: 2px; +} + +.mx-dataview .mx-grid { + border: 0; +} + +/* ========================================================================== + Datagrid Default + + Default Mendix Datagrid Widget. The datagrid shows a list of objects in a grid +========================================================================== */ +.mx-datagrid .mx-datagrid-head-table { + border-width: 0; + background-color: transparent; + /* Table header */ +} +.mx-datagrid .mx-datagrid-head-table th { + border-style: solid; + border-color: #D7D7D7; + border-top-width: 0; + border-right: 0; + border-bottom-width: 1px; + border-left: 0; + background-color: transparent; +} +.mx-datagrid .mx-datagrid-head-table .mx-datagrid-head-wrapper { + padding: 15px 15px 15px 15px; + vertical-align: middle; +} +.mx-datagrid .mx-datagrid-head-table .mx-datagrid-head-wrapper .mx-datagrid-head-caption { + white-space: normal; +} +.mx-datagrid .mx-datagrid-body-table { + border-width: 0; + /* Table Body */ + /* Table Footer */ +} +.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td { + padding: 15px 15px 15px 15px; + vertical-align: middle; + border-width: 0; + border-color: #D7D7D7; + border-bottom-width: 1px; + border-bottom-style: solid; + background-color: #FFF; + /* Text without spaces */ +} +.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td:focus { + outline: none; +} +.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td .mx-datagrid-data-wrapper { + text-overflow: ellipsis; +} +.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr.selected td, .mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr.selected:hover td { + color: #555555; + background-color: #f3f3f3 !important; +} +.mx-datagrid .mx-datagrid-body-table .mx-datagrid-foot > tr > th { + padding: 15px 15px 15px 15px; + border-width: 0; + background-color: #D7D7D7; +} +.mx-datagrid .mx-datagrid-body-table .mx-datagrid-foot > tr > td { + padding: 15px 15px 15px 15px; + border-width: 0; + background-color: #FFF; + font-weight: bold; +} +.mx-datagrid .mx-datagrid-body-table *:focus { + outline: 0; +} + +.datagrid-striped.mx-datagrid .mx-datagrid-head-table th { + border-width: 0; +} +.datagrid-striped.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td { + border-top-width: 0; +} +.datagrid-striped.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr:nth-child(odd) td { + background-color: #fbfbfb; +} + +.datagrid-bordered.mx-datagrid .mx-datagrid-head-table th { + border: 1px solid #D7D7D7; + border-bottom-width: 1px; +} +.datagrid-bordered.mx-datagrid .mx-datagrid-body-table { + border: 1px solid; +} +.datagrid-bordered.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td { + border: 1px solid #D7D7D7; +} +.datagrid-bordered.mx-datagrid .mx-datagrid-foot > tr > th { + border-width: 0; + background-color: #D7D7D7; +} +.datagrid-bordered.mx-datagrid .mx-datagrid-foot > tr > td { + border-width: 1px; +} + +.datagrid-transparent.mx-datagrid .mx-datagrid-head-table { + background-color: transparent; +} +.datagrid-transparent.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr:nth-of-type(odd) { + background-color: transparent; +} +.datagrid-transparent.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td { + background-color: transparent; +} + +.datagrid-hover.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr:hover td { + background-color: #f7f7f7 !important; +} +.datagrid-hover.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr.selected:hover td { + background-color: #ebebeb !important; +} + +.datagrid-lg.mx-datagrid .mx-datagrid-head-table .mx-datagrid-head-wrapper { + padding: 30px 30px 30px 30px; +} +.datagrid-lg.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td { + padding: 30px 30px 30px 30px; +} + +.datagrid-sm.mx-datagrid .mx-datagrid-head-table .mx-datagrid-head-wrapper { + padding: 7.5px 7.5px 7.5px 7.5px; +} +.datagrid-sm.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td { + padding: 7.5px 7.5px 7.5px grid-padding-left/2; +} + +.datagrid-fullsearch.mx-grid .mx-grid-reset-button { + display: none; +} +.datagrid-fullsearch.mx-grid .mx-grid-search-item { + display: block; +} +.datagrid-fullsearch.mx-grid .mx-grid-search-label { + display: none; +} +.datagrid-fullsearch.mx-grid .mx-grid-searchbar .mx-grid-search-controls { + position: absolute; + right: 0; +} +.datagrid-fullsearch.mx-grid .mx-grid-searchbar .mx-grid-search-input { + width: 80%; + padding-left: 0; +} +.datagrid-fullsearch.mx-grid .mx-grid-searchbar .mx-grid-search-input .form-control { + height: 35px; + font-size: 12px; +} + +/* ========================================================================== + Dataview + + Default Mendix Dataview Widget. The data view is used for showing the contents of exactly one object +========================================================================== */ +.mx-dataview { + /* Control bar */ + /* Dataview-content gives problems for nexted layout grid containers */ + /* Dataview empty message */ +} +.mx-dataview .mx-dataview-controls { + clear: both; + margin-top: 10px; + padding: 8px 0; + border-top: 1px solid #D7D7D7; + border-radius: 0; + background-color: transparent; + /* Buttons */ +} +.mx-dataview .mx-dataview-controls .mx-button { + margin-right: 0.3em; + margin-bottom: 0; +} +.mx-dataview .mx-dataview-controls .mx-button:last-child { + margin-right: 0; +} +.mx-dataview > .mx-dataview-content > .mx-container-nested > .row { + margin-right: 0; + margin-left: 0; +} +.mx-dataview .mx-dataview-message { + color: #555555; + background: #FFFFFF; +} + +/* ========================================================================== + Header + + Default Mendix Mobile Header +========================================================================== */ +.mx-header { + z-index: 100; + display: flex; + width: 100%; + height: 45px; + padding: 0; + text-align: initial; + color: #555; + border-bottom: 1px solid #D7D7D7; + background-color: #FFFFFF; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); +} +.mx-header div.mx-header-left, +.mx-header div.mx-header-right { + position: relative; + top: initial; + right: initial; + left: initial; + display: flex; + align-items: center; + width: 25%; + height: 100%; +} +.mx-header div.mx-header-left .mx-placeholder, +.mx-header div.mx-header-right .mx-placeholder { + display: flex; + align-items: center; + height: 100%; +} +.mx-header div.mx-header-left .mx-placeholder { + order: 1; +} +.mx-header div.mx-header-left .mx-placeholder .mx-placeholder { + justify-content: flex-start; +} +.mx-header div.mx-header-center { + overflow: hidden; + flex: 1; + order: 2; + text-align: center; +} +.mx-header div.mx-header-center .mx-title { + overflow: hidden; + width: 100%; + margin: 0; + text-overflow: ellipsis; + color: #555; + font-size: 17px; + line-height: 45px; +} +.mx-header div.mx-header-right { + order: 3; +} +.mx-header div.mx-header-right .mx-placeholder { + justify-content: flex-end; +} +.mx-header .mx-link { + display: flex; + align-items: center; + height: 100%; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + transition: all 0.2s; +} +.mx-header .mx-link a { + text-decoration: none; +} +.mx-header .mx-link .glyphicon { + top: 0; + font-size: 23px; +} +.mx-header .mx-link:active { + -webkit-transform: translateY(1px); + transform: translateY(1px); + color: #036290; +} +.mx-header .mx-link, +.mx-header .btn, +.mx-header img { + padding: 0 8px; +} +.mx-header .mx-sidebartoggle { + font-size: 24px; + line-height: 45px; +} +.mx-header .mx-sidebartoggle img { + height: 20px; +} + +body[dir="rtl"] .mx-header-left { + order: 3; +} +body[dir="rtl"] .mx-header-right { + order: 1; +} + +/* +* Mendix Documentation +* Special styles for presenting components +*/ +/* +* Dijit Widgets +* +* Default Dojo Dijit Widgets +*/ +/* + * Dijit Calendar Widget + * + * Used in dataviews + */ +.dijitCalendarContainer { + /* (must be higher than popup z-index) */ + z-index: 10010 !important; + padding: 10px; + border: 1px solid #D1D6E4; + border-radius: 4px; + background: #FFFFFF; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06); + font-size: 12px; +} +.dijitCalendarContainer tr th { + text-align: center; + color: #0595DB; +} +.dijitCalendarContainer tr th, +.dijitCalendarContainer tr td { + padding: 10px; + text-align: center; +} +.dijitCalendarContainer tr td .dijitCalendarDateLabel { + color: #2D3E4E; +} +.dijitCalendarContainer tr tfoot h3 { + margin: 0; + padding: 0; + font-size: inherit; +} +.dijitCalendarContainer tr .dijitCalendarNextMonth span, +.dijitCalendarContainer tr .dijitCalendarPreviousMonth span { + color: #abbecf; +} +.dijitCalendarContainer .dijitCalendarMonthLabel { + color: #0595DB; +} +.dijitCalendarContainer .dijitButtonNode { + border: 0; +} +.dijitCalendarContainer .dijitCalendarArrow { + cursor: pointer; +} +.dijitCalendarContainer .dijitCalendarSelectedDate, +.dijitCalendarContainer .dijitCalendarSelectedDate:hover { + border-radius: 50%; + background: #0595DB; +} +.dijitCalendarContainer .dijitCalendarSelectedDate .dijitCalendarDateLabel, +.dijitCalendarContainer .dijitCalendarSelectedDate:hover .dijitCalendarDateLabel { + color: #FFFFFF; +} +.dijitCalendarContainer .dijitCalendarHoveredDate { + border-radius: 50%; + background-color: #DDDDDD; +} +.dijitCalendarContainer .dijitCalendarHoveredDate .dijitCalendarDateLabel { + color: #0595DB; +} +.dijitCalendarContainer .dijitCalendarYearContainer { + text-align: center; +} +.dijitCalendarContainer .dijitCalendarYearContainer span { + color: #7dd2fc; +} +.dijitCalendarContainer .dijitCalendarYearContainer span.dijitCalendarSelectedYear { + color: #0595DB; +} +.dijitCalendarContainer .dijitCalendarYearContainer span:hover { + text-decoration: underline; + background-color: transparent; +} +.dijitCalendarContainer .dijitCalendarMonthContainer th:first-child { + border-top-left-radius: 3px; +} +.dijitCalendarContainer .dijitCalendarMonthContainer th:last-child { + border-top-right-radius: 3px; +} + +.dijitCalendarMonthMenuPopup { + /* (must be higher than popup z-index) */ + z-index: 10020 !important; + padding: 3px 4px; + border-radius: 3px; + background-color: #26323D; +} +.dijitCalendarMonthMenuPopup .dijitCalendarMonthMenu { + padding: 5px; + border-style: none; + background: none; + font-size: 12px; +} +.dijitCalendarMonthMenuPopup .dijitCalendarMonthMenu .dijitCalendarMonthLabel { + padding: 2px 0; + color: #FFFFFF; +} +.dijitCalendarMonthMenuPopup .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover, .dijitCalendarMonthMenuPopup .dijitCalendarMonthMenu .dijitCalendarMonthLabel:focus { + color: #4280CB; +} + +.dj_rtl .dijitCalendarContainer .dijitCalendarMonthContainer th:first-child { + border-top-left-radius: 0; + border-top-right-radius: 3px; +} +.dj_rtl .dijitCalendarContainer .dijitCalendarMonthContainer th:last-child { + border-top-left-radius: 3px; + border-top-right-radius: 0; +} + +/* + * Dijit Tooltip Widget + * + * Default tooltip used for Mendix widgets + */ +.mx-tooltip .dijitTooltipContainer { + border-width: 1px; + border-color: #888888; + border-radius: 4px; + background: #FFFFFF; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); +} +.mx-tooltip .dijitTooltipContainer .mx-tooltip-content { + padding: 10px; +} +.mx-tooltip .dijitTooltipContainer .form-group { + margin-bottom: 5px; +} +.mx-tooltip .dijitTooltipConnector { + width: 0; + height: 0; + margin-left: -10px; + border-width: 10px 10px 10px 0; + border-style: solid; + border-color: transparent; + border-right-color: #888888; +} + +/* + * Dijit Border Container + * + * Used in Mendix as split pane containers + */ +.dijitBorderContainer { + padding: 5px; + background-color: #FCFCFC; +} +.dijitBorderContainer .dijitSplitterV, +.dijitBorderContainer .dijitGutterV { + width: 5px; + border: 0; + background: #FCFCFC; +} +.dijitBorderContainer .dijitSplitterH, +.dijitBorderContainer .dijitGutterH { + height: 5px; + border: 0; + background: #FCFCFC; +} +.dijitBorderContainer .dijitSplitterH .dijitSplitterThumb { + top: 2px; + width: 19px; + height: 1px; + background: #B0B0B0; +} +.dijitBorderContainer .dijitSplitterV .dijitSplitterThumb { + left: 2px; + width: 1px; + height: 19px; + background: #B0B0B0; +} +.dijitBorderContainer .dijitSplitContainer-child, +.dijitBorderContainer .dijitBorderContainer-child { + border: 1px solid #CCCCCC; +} +.dijitBorderContainer .dijitBorderContainer-dijitTabContainerTop, +.dijitBorderContainer .dijitBorderContainer-dijitTabContainerBottom, +.dijitBorderContainer .dijitBorderContainer-dijitTabContainerLeft, +.dijitBorderContainer .dijitBorderContainer-dijitTabContainerRight { + border: none; +} +.dijitBorderContainer .dijitBorderContainer-dijitBorderContainer { + padding: 0; + border: none; +} +.dijitBorderContainer .dijitSplitterActive { + /* For IE8 and earlier */ + margin: 0; + opacity: 0.6; + background-color: #AAAAAA; + background-image: none; + font-size: 1px; + filter: alpha(opacity=60); +} +.dijitBorderContainer .dijitSplitContainer-dijitContentPane, +.dijitBorderContainer .dijitBorderContainer-dijitContentPane { + padding: 5px; + background-color: #FFFFFF; +} + +/* + * Dijit Menu Popup + * + * Used in datepickers and calendar widgets + */ +.dijitMenuPopup { + margin-top: 10px; +} +.dijitMenuPopup .dijitMenu { + display: block; + width: 200px !important; + margin-top: 0; + padding: 12px 10px; + border-radius: 3px; + background: #252C36; +} +.dijitMenuPopup .dijitMenu:after { + position: absolute; + bottom: 100%; + left: 20px; + width: 0; + height: 0; + margin-left: -10px; + content: " "; + pointer-events: none; + border: medium solid transparent; + border-width: 10px; + border-bottom-color: #252C36; +} +.dijitMenuPopup .dijitMenu .dijitMenuItem { + background: transparent; +} +.dijitMenuPopup .dijitMenu .dijitMenuItem .dijitMenuItemLabel { + display: block; + overflow: hidden; + width: 180px !important; + padding: 10px; + text-overflow: ellipsis; + color: #FFFFFF; + border-radius: 3px; +} +.dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover { + background: none; +} +.dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover .dijitMenuItemLabel { + background: #0595DB; +} +.dijitMenuPopup .dijitMenu .tg_newlabelmenuitem .dijitMenuItemLabel { + font-weight: bold; +} +.dijitMenuPopup .dijitMenu .dijitMenuSeparator td { + padding: 0; + border-bottom-width: 3px; +} +.dijitMenuPopup .dijitMenu .dijitMenuSeparator .dijitMenuSeparatorIconCell > div { + margin: 0; +} + +/* ========================================================================== + Glyphicons + + Glyphicons alternaed to use with Mendix +========================================================================== */ +.mx-glyphicon:before { + display: inline-block; + margin-top: -0.2em; + margin-right: 0.4555555em; + vertical-align: middle; + font-family: "Glyphicons Halflings"; + font-weight: normal; + font-style: normal; + line-height: inherit; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ========================================================================== + Groupbox + + Default Mendix Groupboxes +========================================================================== */ +.mx-groupbox { + margin: 0; +} +.mx-groupbox > .mx-groupbox-header { + margin: 0; + color: #555555; + border-width: 1px 1px 0 1px; + border-style: solid; + border-color: #DDDDDD; + background: #DDDDDD; + font-size: 14px; +} +.mx-groupbox > .mx-groupbox-header .mx-groupbox-collapse-icon { + margin-top: 0.1em; +} +.mx-groupbox > .mx-groupbox-body { + padding: 10px 15px; + border-width: 1px; + border-style: solid; + border-color: #DDDDDD; + background-color: #FFFFFF; +} +.mx-groupbox .mx-groupbox-header + .mx-groupbox-body { + border-top: none; +} + +.groupbox-default > .mx-groupbox-header { + color: #555555; + border-color: #DDDDDD; + background: #DDDDDD; +} +.groupbox-default > .mx-groupbox-body { + border-color: #DDDDDD; +} + +.groupbox-primary > .mx-groupbox-header { + color: #FFF; + border-color: #0595DB; + background: #0595DB; +} +.groupbox-primary > .mx-groupbox-body { + border-color: #0595DB; +} + +.groupbox-inverse > .mx-groupbox-header { + color: #FFF; + border-color: #252C36; + background: #252C36; +} +.groupbox-inverse > .mx-groupbox-body { + border-color: #252C36; +} + +.groupbox-success > .mx-groupbox-header { + color: #FFF; + border-color: #76CA02; + background: #76CA02; +} +.groupbox-success > .mx-groupbox-body { + border-color: #76CA02; +} + +.groupbox-info > .mx-groupbox-header { + color: #FFF; + border-color: #48B0F7; + background: #48B0F7; +} +.groupbox-info > .mx-groupbox-body { + border-color: #48B0F7; +} + +.groupbox-warning > .mx-groupbox-header { + color: #FFF; + border-color: #F99B1D; + background: #F99B1D; +} +.groupbox-warning > .mx-groupbox-body { + border-color: #F99B1D; +} + +.groupbox-danger > .mx-groupbox-header { + color: #FFF; + border-color: #ED1C24; + background: #ED1C24; +} +.groupbox-danger > .mx-groupbox-body { + border-color: #ED1C24; +} + +.groupbox-white > .mx-groupbox-header { + color: #555555; + border-color: #FFF; + background: #FFF; +} +.groupbox-white > .mx-groupbox-body { + border-color: #FFF; +} + +.groupbox-transparent { + border-bottom: 1px solid #D7D7D7; +} +.groupbox-transparent > .mx-groupbox-header { + padding: 15px 0; + color: #222222; + border-style: none; + background: transparent; + font-size: 16px; + font-weight: 600; +} +.groupbox-transparent .mx-groupbox-body { + padding: 15px 0; + border-style: none; + background-color: transparent; +} +.groupbox-transparent .mx-groupbox-collapse-icon { + color: #0595DB; +} + +.groupbox-h1 > .mx-groupbox-header { + font-size: 31px; +} + +.groupbox-h2 > .mx-groupbox-header { + font-size: 26px; +} + +.groupbox-h3 > .mx-groupbox-header { + font-size: 24px; +} + +.groupbox-h4 > .mx-groupbox-header { + font-size: 18px; +} + +.groupbox-h5 > .mx-groupbox-header { + font-size: 14px; +} + +.groupbox-h6 > .mx-groupbox-header { + font-size: 12px; +} + +.groupbox-callout > .mx-groupbox-header, +.groupbox-callout > .mx-groupbox-body { + border: 0; + background-color: #daeffd; +} +.groupbox-callout .mx-groupbox-header + .mx-groupbox-body { + padding-top: 0; +} + +.groupbox-info.groupbox-callout > .mx-groupbox-header, +.groupbox-info.groupbox-callout > .mx-groupbox-body { + background-color: #daeffd; +} +.groupbox-info.groupbox-callout > .mx-groupbox-header { + color: #48B0F7; +} + +.groupbox-success.groupbox-callout > .mx-groupbox-header, +.groupbox-success.groupbox-callout > .mx-groupbox-body { + background-color: #e4f4cc; +} +.groupbox-success.groupbox-callout > .mx-groupbox-header { + color: #76CA02; +} + +.groupbox-warning.groupbox-callout > .mx-groupbox-header, +.groupbox-warning.groupbox-callout > .mx-groupbox-body { + background-color: #feebd2; +} +.groupbox-warning.groupbox-callout > .mx-groupbox-header { + color: #F99B1D; +} + +.groupbox-danger.groupbox-callout > .mx-groupbox-header, +.groupbox-danger.groupbox-callout > .mx-groupbox-body { + background-color: #fbd2d3; +} +.groupbox-danger.groupbox-callout > .mx-groupbox-header { + color: #ED1C24; +} + +/* ========================================================================== + Helpers + + Default Mendix Helpers +========================================================================== */ +.show { + display: block !important; +} + +.hidden { + display: none !important; + visibility: hidden !important; +} + +.invisible { + visibility: hidden !important; +} + +.display-ie8-only:not([attr*=""]) { + display: none !important; + padding: 0 !important; +} + +.list-nostyle ul { + margin: 0 !important; + padding: 0 !important; +} +.list-nostyle ul li { + list-style-type: none !important; +} + +.nowrap, +.nowrap * { + overflow: hidden; + white-space: nowrap !important; + text-overflow: ellipsis; +} + +.table { + display: table !important; +} + +.table-row { + display: table-row !important; +} + +.table-cell { + display: table-cell !important; +} + +.pull-left { + float: left !important; +} + +.pull-right { + float: right !important; +} + +.align-top { + vertical-align: top !important; +} + +.align-middle { + vertical-align: middle !important; +} + +.align-bottom { + vertical-align: bottom !important; +} + +.row-left { + display: flex !important; + align-items: center !important; + flex-flow: row !important; + justify-content: flex-start !important; +} + +.row-center { + display: flex !important; + align-items: center !important; + flex-flow: row !important; + justify-content: center !important; +} + +.row-right { + display: flex !important; + align-items: center !important; + flex-flow: row !important; + justify-content: flex-end !important; +} + +.col-left { + display: flex !important; + align-items: flex-start !important; + flex-direction: column !important; + justify-content: center !important; +} + +.col-center { + display: flex !important; + align-items: center !important; + flex-direction: column !important; + justify-content: center !important; +} + +.col-right { + display: flex !important; + align-items: flex-end !important; + flex-direction: column !important; + justify-content: center !important; +} + +.spacing-inner-none { + padding: 0 !important; +} + +.spacing-inner-top-none { + padding-top: 0 !important; +} + +.spacing-inner-right-none { + padding-right: 0 !important; +} + +.spacing-inner-bottom-none { + padding-bottom: 0 !important; +} + +.spacing-inner-left-none { + padding-left: 0 !important; +} + +.spacing-outer-none { + margin: 0 !important; +} + +.spacing-outer-top-none { + margin-top: 0 !important; +} + +.spacing-outer-right-none { + margin-right: 0 !important; +} + +.spacing-outer-bottom-none { + margin-bottom: 0 !important; +} + +.spacing-outer-left-none { + margin-left: 0 !important; +} + +.spacing-inner { + padding: 5px !important; +} + +.spacing-inner-top { + padding-top: 5px !important; +} + +.spacing-inner-right { + padding-right: 5px !important; +} + +.spacing-inner-bottom { + padding-bottom: 5px !important; +} + +.spacing-inner-left { + padding-left: 5px !important; +} + +.spacing-outer { + margin: 5px !important; +} + +.spacing-outer-top { + margin-top: 5px !important; +} + +.spacing-outer-right { + margin-right: 5px !important; +} + +.spacing-outer-bottom { + margin-bottom: 5px !important; +} + +.spacing-outer-left { + margin-left: 5px !important; +} + +@media (max-width: 767px) { + .spacing-inner-medium { + padding: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-medium { + padding: 15px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-medium { + padding: 15px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-top-medium { + padding-top: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-top-medium { + padding-top: 15px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-top-medium { + padding-top: 15px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-right-medium { + padding-right: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-right-medium { + padding-right: 15px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-right-medium { + padding-right: 15px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-bottom-medium { + padding-bottom: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-bottom-medium { + padding-bottom: 15px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-bottom-medium { + padding-bottom: 15px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-left-medium { + padding-left: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-left-medium { + padding-left: 15px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-left-medium { + padding-left: 15px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-medium { + margin: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-medium { + margin: 15px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-medium { + margin: 15px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-top-medium { + margin-top: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-top-medium { + margin-top: 15px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-top-medium { + margin-top: 15px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-right-medium { + margin-right: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-right-medium { + margin-right: 15px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-right-medium { + margin-right: 15px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-bottom-medium { + margin-bottom: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-bottom-medium { + margin-bottom: 15px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-bottom-medium { + margin-bottom: 15px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-left-medium { + margin-left: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-left-medium { + margin-left: 15px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-left-medium { + margin-left: 15px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-large { + padding: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-large { + padding: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-large { + padding: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-top-large { + padding-top: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-top-large { + padding-top: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-top-large { + padding-top: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-right-large { + padding-right: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-right-large { + padding-right: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-right-large { + padding-right: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-bottom-large { + padding-bottom: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-bottom-large { + padding-bottom: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-bottom-large { + padding-bottom: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-left-large { + padding-left: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-left-large { + padding-left: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-left-large { + padding-left: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-large { + margin: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-large { + margin: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-large { + margin: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-top-large { + margin-top: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-top-large { + margin-top: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-top-large { + margin-top: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-right-large { + margin-right: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-right-large { + margin-right: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-right-large { + margin-right: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-bottom-large { + margin-bottom: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-bottom-large { + margin-bottom: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-bottom-large { + margin-bottom: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-left-large { + margin-left: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-left-large { + margin-left: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-left-large { + margin-left: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-layout { + padding: 15px 15px 15px 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-layout { + padding: 30px 30px 30px 30px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-layout { + padding: 30px 30px 30px 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-top-layout { + padding-top: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-top-layout { + padding-top: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-top-layout { + padding-top: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-right-layout { + padding-right: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-right-layout { + padding-right: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-right-layout { + padding-right: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-bottom-layout { + padding-bottom: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-bottom-layout { + padding-bottom: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-bottom-layout { + padding-bottom: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-inner-left-layout { + padding-left: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-inner-left-layout { + padding-left: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-inner-left-layout { + padding-left: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-layout { + margin: 15px 15px 15px 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-layout { + margin: 30px 30px 30px 30px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-layout { + margin: 30px 30px 30px 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-top-layout { + margin-top: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-top-layout { + margin-top: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-top-layout { + margin-top: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-right-layout { + margin-right: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-right-layout { + margin-right: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-right-layout { + margin-right: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-bottom-layout { + margin-bottom: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-bottom-layout { + margin-bottom: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-bottom-layout { + margin-bottom: 30px !important; + } +} + +@media (max-width: 767px) { + .spacing-outer-left-layout { + margin-left: 15px !important; + } +} +@media (min-width: 768px) { + .spacing-outer-left-layout { + margin-left: 30px !important; + } +} +@media (min-width: 992px) { + .spacing-outer-left-layout { + margin-left: 30px !important; + } +} + +.d-inline { + display: inline !important; +} + +.d-inline-block { + display: inline-block !important; +} + +.d-block { + display: block !important; +} + +/* ========================================================================== + Images + + Default Mendix Image Widgets +========================================================================== */ +img.img-rounded, +.img-rounded img { + border-radius: 6px; +} + +img.img-thumbnail, +.img-thumbnail img { + display: inline-block; + max-width: 100%; + height: auto; + padding: 4px; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + border: 1px solid #DDDDDD; + border-radius: 4px; + background-color: #FFFFFF; + line-height: 1.42857; +} + +img.img-circle, +.img-circle img { + border-radius: 50%; +} + +img.img-auto, +.img-auto img { + width: auto !important; + max-width: 100% !important; + height: auto !important; + max-height: 100% !important; +} + +img.img-center, +.img-center img { + margin-right: auto !important; + margin-left: auto !important; +} + +/* ========================================================================== + Labels + + Default labels combined with Bootstrap labels +========================================================================== */ +.label { + display: inline; + display: inline-block; + padding: 0.2em 0.6em 0.3em; + text-align: center; + vertical-align: baseline; + white-space: nowrap; + color: #FFFFFF; + border-radius: 0.25em; + font-size: 100%; + font-weight: bold; + line-height: 1; +} + +.label-default { + color: #555555; + background-color: #DDDDDD; +} + +.label-primary { + color: #FFF; + background-color: #0595DB; +} + +.label-success { + color: #FFF; + background-color: #76CA02; +} + +.label-info { + color: #FFF; + background-color: #48B0F7; +} + +.label-warning { + color: #FFF; + background-color: #F99B1D; +} + +.label-danger { + color: #FFF; + background-color: #ED1C24; +} + +/* ========================================================================== + Listview + + Default Mendix Listview Widget. The list view shows a list of objects arranged vertically. Each object is shown using a template +========================================================================== */ +.mx-listview { + padding: 0; + /* Clear search button (overrides load more button stying) */ + /* Load more button */ +} +.mx-listview .mx-button.mx-listview-clear-button { + width: auto; +} +.mx-listview .mx-listview-searchbar { + margin-bottom: 15px; +} +.mx-listview > .mx-button { + width: 100%; + margin: 10px auto; +} +.mx-listview .mx-listview-list { + margin: 0; +} +.mx-listview .mx-listview-list .mx-listview-empty { + border-style: none; + background-color: transparent; +} +.mx-listview .mx-listview-item { + transition-delay: 0.1s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.2s; + transition-property: all; + transform-style: initial; + padding: 15px 15px 15px 15px; + border-width: 1px 0 0 0; + border-style: solid; + border-color: #D7D7D7; + background-color: #FFF; +} +.mx-listview .mx-listview-item:first-child { + border-radius: 0; +} +.mx-listview .mx-listview-item:last-child { + border-bottom: 1px solid #D7D7D7; + border-radius: 0; +} +.mx-listview .mx-listview-item:nth-child(2n + 1) { + background-color: #FFF; +} +.mx-listview .mx-listview-item:hover { + background-color: #FFF; +} +.mx-listview .mx-listview-item:focus, .mx-listview .mx-listview-item:active { + background-color: #f7f7f7; +} +.mx-listview .mx-listview-item.selected { + background-color: #f3f3f3 !important; +} +.mx-listview .mx-layoutgrid { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.listview-bordered.mx-listview .mx-listview-item { + border: 1px solid #D7D7D7; + border-top: 0; +} +.listview-bordered.mx-listview .mx-listview-item:first-child { + border-top: 1px solid #D7D7D7; + border-radius: 0; +} +.listview-bordered.mx-listview .mx-listview-item:last-child { + border-radius: 0; +} + +.listview-striped.mx-listview .mx-listview-item:nth-child(2n + 1) { + background-color: #fbfbfb; +} + +.listview-seperated.mx-listview .mx-listview-item { + margin-bottom: 15px; + border-width: 1px; + border-style: solid; + border-radius: 4px; +} + +.listview-hover.mx-listview .mx-listview-item:hover, .listview-hover.mx-listview .mx-listview-item:focus, .listview-hover.mx-listview .mx-listview-item:active { + background-color: #f7f7f7 !important; +} +.listview-hover.mx-listview .mx-listview-item.selected:hover, .listview-hover.mx-listview .mx-listview-item.selected:focus, .listview-hover.mx-listview .mx-listview-item.selected:active { + background-color: #ebebeb !important; +} + +.listview-stylingless.mx-listview .mx-listview-item { + padding: 0; + cursor: default; + border: 0; + background-color: transparent; +} +.listview-stylingless.mx-listview .mx-listview-item:hover, .listview-stylingless.mx-listview .mx-listview-item:focus, .listview-stylingless.mx-listview .mx-listview-item:active { + background-color: transparent; +} +.listview-stylingless.mx-listview .mx-listview-item.selected { + background-color: transparent !important; +} +.listview-stylingless.mx-listview .mx-listview-item.selected:hover, .listview-stylingless.mx-listview .mx-listview-item.selected:focus, .listview-stylingless.mx-listview .mx-listview-item.selected:active { + background-color: transparent !important; +} + +.listview-lg.mx-listview .mx-listview-item { + padding: 30px 30px 30px 30px; +} + +.listview-sm.mx-listview .mx-listview-item { + padding: 7.5px 7.5px 7.5px 7.5px; +} + +.mx-listview[class*="lv-col"] { + overflow: hidden; +} +.mx-listview[class*="lv-col"] .mx-listview-content-wrapper { + display: block; +} +.mx-listview[class*="lv-col"] > .mx-listview-list { + display: block; + margin-right: -15px; + margin-left: -15px; +} +.mx-listview[class*="lv-col"] > .mx-listview-list::before, .mx-listview[class*="lv-col"] > .mx-listview-list::after { + display: table; + clear: both; + content: " "; +} +.mx-listview[class*="lv-col"] > .mx-listview-list > .mx-listview-item { + position: relative; + display: block; + float: left; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + border: 0; +} +@media (max-width: 991px) { + .mx-listview[class*="lv-col"] > .mx-listview-list > .mx-listview-item { + width: 100% !important; + } +} +.mx-listview[class*="lv-col"] > .mx-listview-list > .mx-listview-item > .mx-dataview { + overflow: hidden; +} +.mx-listview[class*="lv-col"].lv-col-xs-12 > .mx-listview-list > .mx-listview-item { + width: 100% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-11 > .mx-listview-list > .mx-listview-item { + width: 91.66666667% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-10 > .mx-listview-list > .mx-listview-item { + width: 83.33333333% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-9 > .mx-listview-list > .mx-listview-item { + width: 75% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-8 > .mx-listview-list > .mx-listview-item { + width: 66.66666667% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-7 > .mx-listview-list > .mx-listview-item { + width: 58.33333333% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-6 > .mx-listview-list > .mx-listview-item { + width: 50% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-5 > .mx-listview-list > .mx-listview-item { + width: 41.66666667% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-4 > .mx-listview-list > .mx-listview-item { + width: 33.33333333% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-3 > .mx-listview-list > .mx-listview-item { + width: 25% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-2 > .mx-listview-list > .mx-listview-item { + width: 16.66666667% !important; +} +.mx-listview[class*="lv-col"].lv-col-xs-1 > .mx-listview-list > .mx-listview-item { + width: 8.33333333% !important; +} +@media (min-width: 768px) { + .mx-listview[class*="lv-col"].lv-col-sm-12 > .mx-listview-list > .mx-listview-item { + width: 100% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-11 > .mx-listview-list > .mx-listview-item { + width: 91.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-10 > .mx-listview-list > .mx-listview-item { + width: 83.33333333% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-9 > .mx-listview-list > .mx-listview-item { + width: 75% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-8 > .mx-listview-list > .mx-listview-item { + width: 66.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-7 > .mx-listview-list > .mx-listview-item { + width: 58.33333333% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-6 > .mx-listview-list > .mx-listview-item { + width: 50% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-5 > .mx-listview-list > .mx-listview-item { + width: 41.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-4 > .mx-listview-list > .mx-listview-item { + width: 33.33333333% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-3 > .mx-listview-list > .mx-listview-item { + width: 25% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-2 > .mx-listview-list > .mx-listview-item { + width: 16.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-sm-1 > .mx-listview-list > .mx-listview-item { + width: 8.33333333% !important; + } +} +@media (min-width: 992px) { + .mx-listview[class*="lv-col"].lv-col-md-12 > .mx-listview-list > .mx-listview-item { + width: 100% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-11 > .mx-listview-list > .mx-listview-item { + width: 91.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-10 > .mx-listview-list > .mx-listview-item { + width: 83.33333333% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-9 > .mx-listview-list > .mx-listview-item { + width: 75% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-8 > .mx-listview-list > .mx-listview-item { + width: 66.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-7 > .mx-listview-list > .mx-listview-item { + width: 58.33333333% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-6 > .mx-listview-list > .mx-listview-item { + width: 50% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-5 > .mx-listview-list > .mx-listview-item { + width: 41.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-4 > .mx-listview-list > .mx-listview-item { + width: 33.33333333% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-3 > .mx-listview-list > .mx-listview-item { + width: 25% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-2 > .mx-listview-list > .mx-listview-item { + width: 16.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-md-1 > .mx-listview-list > .mx-listview-item { + width: 16.66666667% !important; + } +} +@media (min-width: 1200px) { + .mx-listview[class*="lv-col"].lv-col-lg-12 > .mx-listview-list > .mx-listview-item { + width: 100% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-11 > .mx-listview-list > .mx-listview-item { + width: 91.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-10 > .mx-listview-list > .mx-listview-item { + width: 83.33333333% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-9 > .mx-listview-list > .mx-listview-item { + width: 75% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-8 > .mx-listview-list > .mx-listview-item { + width: 66.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-7 > .mx-listview-list > .mx-listview-item { + width: 58.33333333% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-6 > .mx-listview-list > .mx-listview-item { + width: 50% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-5 > .mx-listview-list > .mx-listview-item { + width: 41.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-4 > .mx-listview-list > .mx-listview-item { + width: 33.33333333% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-3 > .mx-listview-list > .mx-listview-item { + width: 25% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-2 > .mx-listview-list > .mx-listview-item { + width: 16.66666667% !important; + } + .mx-listview[class*="lv-col"].lv-col-lg-1 > .mx-listview-list > .mx-listview-item { + width: 8.33333333% !important; + } +} + +.profile-phone .mx-listview .mx-listview-searchbar { + margin-bottom: 3px; + background: #FFFFFF; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); +} +.profile-phone .mx-listview .mx-listview-searchbar input { + padding: 14px 15px; + color: #555555; + border-style: none; + border-radius: 0; + box-shadow: none; +} +.profile-phone .mx-listview .mx-listview-clear-button { + padding: 14px 15px; + color: inherit; + border-style: none; +} +.profile-phone .mx-listview .mx-listview-item:first-child { + border-top: none; +} + +/* ========================================================================== + Modals + + Default Mendix Modals. Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults +========================================================================== */ +.modal-dialog .modal-content { + border: 1px solid #D7D7D7; + border-radius: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} +.modal-dialog .modal-content .modal-header { + padding: 15px 20px; + border-bottom-color: #D7D7D7; + border-radius: 0; + background-color: transparent; +} +.modal-dialog .modal-content .modal-header h4 { + margin: 0; + color: #555555; + font-size: 16px; + font-weight: bold; +} +.modal-dialog .modal-content .modal-header .close { + margin-top: -3px; + opacity: 1; + /* For IE8 and earlier */ + color: #555555; + text-shadow: none; + filter: alpha(opacity=100); +} +.modal-dialog .modal-content .modal-body { + padding: 20px; +} +.modal-dialog .modal-content .modal-footer { + display: flex; + justify-content: flex-end; + margin-top: 0; + padding: 20px; + border-style: none; +} + +.mx-window.mx-window-view .mx-window-body { + padding: 0; +} +.mx-window.mx-window-view .mx-window-body > .mx-dataview > .mx-dataview-content, +.mx-window.mx-window-view .mx-window-body > .mx-placeholder > .mx-dataview > .mx-dataview-content { + padding: 20px; +} +.mx-window.mx-window-view .mx-window-body > .mx-dataview > .mx-dataview-controls, +.mx-window.mx-window-view .mx-window-body > .mx-placeholder > .mx-dataview > .mx-dataview-controls { + display: flex; + justify-content: flex-end; + margin: 0; + padding: 20px; + text-align: left; + border-top: 1px solid #D7D7D7; +} +.mx-window .mx-dataview-controls { + padding-bottom: 0; +} +.mx-window .mx-layoutgrid { + padding-right: 0; + padding-left: 0; +} + +.mx-login .modal-body { + padding: 0 15px; +} +.mx-login .modal-content input { + height: 56px; + padding: 12px 12px; + border: 1px solid #EEEEEE; + background: #EEEEEE; + box-shadow: none; + font-size: 16px; +} +.mx-login .modal-content input:focus { + border-color: #66AFE9; +} +.mx-login .modal-header, +.mx-login .modal-footer { + border: 0; +} +.mx-login button { + font-size: 16px; +} +.mx-login h4 { + color: #AAAAAA; + font-size: 20px; + font-weight: bold; +} + +/* ========================================================================== + Navigation + + Default Mendix Navigation Bar +========================================================================== */ +.mx-navbar { + margin: 0; + border-style: none; + border-radius: 0; + background-color: #252C36; + /* remove focus */ +} +.mx-navbar ul.nav { + margin: 0; + /* Navigation item */ + /* When hovering or the dropdown is open */ +} +.mx-navbar ul.nav > li.mx-navbar-item > a { + display: flex; + align-items: center; + min-height: 60px; + padding: 5px 15px; + vertical-align: middle; + color: #FFF; + border-radius: 0; + font-size: 14px; + font-weight: normal; + /* Dropdown arrow */ + /* Dropdown */ +} +.mx-navbar ul.nav > li.mx-navbar-item > a .caret { + border-top-color: #FFF; + border-bottom-color: #FFF; +} +.mx-navbar ul.nav > li.mx-navbar-item > a:hover, .mx-navbar ul.nav > li.mx-navbar-item > a:focus, .mx-navbar ul.nav > li.mx-navbar-item > a.active { + text-decoration: none; + color: #FFF; + background-color: #2d3642; +} +.mx-navbar ul.nav > li.mx-navbar-item > a:hover .caret, .mx-navbar ul.nav > li.mx-navbar-item > a:focus .caret, .mx-navbar ul.nav > li.mx-navbar-item > a.active .caret { + border-top-color: #FFF; + border-bottom-color: #FFF; +} +.mx-navbar ul.nav > li.mx-navbar-item > a.active { + color: #FFF; + background-color: #36404e; +} +.mx-navbar ul.nav > li.mx-navbar-item > a .mx-navbar-submenu::before { + position: absolute; + top: -9px; + left: 15px; + width: 0; + height: 0; + content: ""; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + border-width: 0 9px 9px 9px; + border-style: solid; + border-color: transparent transparent #2d3642 transparent; +} +.mx-navbar ul.nav > li.mx-navbar-item > a img { + width: 20px; + height: auto; + margin-right: 0.5em; +} +.mx-navbar ul.nav > li.mx-navbar-item > a .glyphicon { + top: 0; + margin-right: 0.5em; + vertical-align: middle; + font-size: 20px; +} +.mx-navbar ul.nav > .mx-navbar-item > a:hover, .mx-navbar ul.nav > .mx-navbar-item > a:focus, .mx-navbar ul.nav > .mx-navbar-item.active a, .mx-navbar ul.nav > .mx-navbar-item.open > a, .mx-navbar ul.nav > .mx-navbar-item.open > a:hover, .mx-navbar ul.nav > .mx-navbar-item.open > a:focus { + text-decoration: none; + color: #FFF; + background-color: #2d3642; +} +.mx-navbar ul.nav > .mx-navbar-item > a:hover .caret, .mx-navbar ul.nav > .mx-navbar-item > a:focus .caret, .mx-navbar ul.nav > .mx-navbar-item.active a .caret, .mx-navbar ul.nav > .mx-navbar-item.open > a .caret, .mx-navbar ul.nav > .mx-navbar-item.open > a:hover .caret, .mx-navbar ul.nav > .mx-navbar-item.open > a:focus .caret { + border-top-color: #FFF; + border-bottom-color: #FFF; +} +.mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a { + color: #0595DB; + background-color: #1d222a; +} +.mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a .caret { + border-top-color: #0595DB; + border-bottom-color: #0595DB; +} +@media (max-width: 768px) { + .mx-navbar ul.nav > li.mx-navbar-item > a { + padding: 10px 20px; + } + .mx-navbar .mx-navbar-item.open .dropdown-menu { + padding: 0; + border-radius: 0; + background-color: #1d222a; + } + .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a { + padding: 10px 20px; + color: #AAA; + border-radius: 0; + font-size: 12px; + font-weight: normal; + } + .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:hover, .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:focus { + color: #0595DB; + background-color: #1d222a; + } + .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a.active { + color: #0595DB; + background-color: #1d222a; + } +} +.mx-navbar:focus { + outline: 0; +} + +.region-topbar .mx-navbar { + background-color: #FFFFFF; +} +.region-topbar .mx-navbar ul.nav { + /* Navigation item */ + /* When hovering or the dropdown is open */ +} +.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a { + color: #555555; + font-size: 14px; + /* Dropdown arrow */ + /* Dropdown */ +} +.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} +.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a:hover, .region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a:focus, .region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a.active { + color: #555555; + background-color: whitesmoke; +} +.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a:hover .caret, .region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a:focus .caret, .region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a.active .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} +.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a.active { + color: #555555; + background-color: #ebebeb; +} +.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a .mx-navbar-submenu::before { + border-color: transparent transparent #D7D7D7 transparent; +} +.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a .glyphicon { + font-size: 1.2em; +} +.region-topbar .mx-navbar ul.nav > .mx-navbar-item > a:hover, .region-topbar .mx-navbar ul.nav > .mx-navbar-item > a:focus, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.active a, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a:hover, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a:focus { + color: #555555; + background-color: whitesmoke; +} +.region-topbar .mx-navbar ul.nav > .mx-navbar-item > a:hover .caret, .region-topbar .mx-navbar ul.nav > .mx-navbar-item > a:focus .caret, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.active a .caret, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a .caret, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a:hover .caret, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a:focus .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} +.region-topbar .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a { + color: #FFF; + background-color: white; +} +.region-topbar .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a .caret { + border-top-color: #FFF; + border-bottom-color: #FFF; +} +@media (max-width: 768px) { + .region-topbar .mx-navbar .mx-navbar-item.open .dropdown-menu { + background-color: white; + } + .region-topbar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a { + color: #AAA; + font-size: 12px; + } + .region-topbar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:hover, .region-topbar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:focus { + color: #0595DB; + background-color: white; + } + .region-topbar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a.active { + color: #FFF; + background-color: white; + } +} + +.region-sidebar .mx-navbar { + background-color: #252C36; +} +.region-sidebar .mx-navbar ul.nav { + /* Navigation item */ + /* When hovering or the dropdown is open */ +} +.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a { + color: #FFFFFF; + font-size: 14px; + /* Dropdown arrow */ + /* Dropdown */ +} +.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a .caret { + border-top-color: #FFFFFF; + border-bottom-color: #FFFFFF; +} +.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a:hover, .region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a:focus, .region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a.active { + color: #FFFFFF; + background-color: #2d3642; +} +.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a:hover .caret, .region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a:focus .caret, .region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a.active .caret { + border-top-color: #FFF; + border-bottom-color: #FFF; +} +.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a.active { + color: #FFF; + background-color: #36404e; +} +.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a .mx-navbar-submenu::before { + border-color: transparent transparent #2d3642 transparent; +} +.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a .glyphicon { + font-size: 20px; +} +.region-sidebar .mx-navbar ul.nav > .mx-navbar-item > a:hover, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item > a:focus, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.active a, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a:hover, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a:focus { + color: #FFFFFF; + background-color: #2d3642; +} +.region-sidebar .mx-navbar ul.nav > .mx-navbar-item > a:hover .caret, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item > a:focus .caret, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.active a .caret, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a .caret, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a:hover .caret, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a:focus .caret { + border-top-color: #FFFFFF; + border-bottom-color: #FFFFFF; +} +.region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a { + color: #0595DB; + background-color: #1d222a; +} +.region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a .caret { + border-top-color: #0595DB; + border-bottom-color: #0595DB; +} +@media (max-width: 768px) { + .region-sidebar .mx-navbar .mx-navbar-item.open .dropdown-menu { + background-color: white; + } + .region-sidebar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a { + color: #AAA; + font-size: 12px; + } + .region-sidebar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:hover, .region-sidebar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:focus { + color: #0595DB; + background-color: #1d222a; + } + .region-sidebar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a.active { + color: #0595DB; + background-color: #1d222a; + } +} + +/* ========================================================================== + Navigation List + Default Mendix Navigation List Widget. A navigation list can be used to attach an action to an entire row. Such a row is called a navigation list item +========================================================================== */ +.mx-navigationlist { + margin: 0; + padding: 0; +} +.mx-navigationlist li.mx-navigationlist-item { + transition-delay: 0.1s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.2s; + transition-property: all; + transform-style: initial; + padding: 15px 15px 15px 15px; + border-width: 1px; + border-style: none none solid none; + border-color: #D7D7D7; + border-radius: 0; + background-color: #FFF; +} +.mx-navigationlist li.mx-navigationlist-item:hover, .mx-navigationlist li.mx-navigationlist-item:focus { + color: inherit; + background-color: #f7f7f7; +} +.mx-navigationlist li.mx-navigationlist-item.active { + color: inherit; + background-color: #f3f3f3; +} + +/* ========================================================================== + Navigation + + Default Mendix Navigation Tree +========================================================================== */ +.mx-navigationtree { + background-color: #252C36; + /* Every navigation item */ + /* Sub navigation item specific */ + /* remove focus */ +} +.mx-navigationtree .navbar-inner > ul { + margin: 0; + padding-left: 0; +} +.mx-navigationtree .navbar-inner > ul > li { + padding: 0; + border-style: none; +} +.mx-navigationtree .navbar-inner > ul > li > a { + display: flex; + align-items: center; + height: 60px; + padding: 5px 15px; + color: #FFF; + border-bottom: 1px solid #2d3642; + border-radius: 0; + background-color: #252C36; + text-shadow: none; + font-size: 14px; + font-weight: normal; +} +.mx-navigationtree .navbar-inner > ul > li > a .caret { + border-top-color: #FFF; + border-bottom-color: #FFF; +} +.mx-navigationtree .navbar-inner > ul > li > a img { + width: 20px; + height: auto; + margin-right: 0.5em; +} +.mx-navigationtree .navbar-inner > ul > li > a .glyphicon { + top: 0; + margin-right: 0.5em; + vertical-align: middle; + font-size: 20px; +} +.mx-navigationtree .navbar-inner > ul > li a:hover, +.mx-navigationtree .navbar-inner > ul > li a:focus, +.mx-navigationtree .navbar-inner > ul > li a.active { + text-decoration: none; + color: #FFF; + background-color: #2d3642; +} +.mx-navigationtree .navbar-inner > ul > li a:hover .caret, +.mx-navigationtree .navbar-inner > ul > li a:focus .caret, +.mx-navigationtree .navbar-inner > ul > li a.active .caret { + border-top-color: #FFF; + border-bottom-color: #FFF; +} +.mx-navigationtree .navbar-inner > ul > li a.active { + color: #FFF; + border-left-color: #FFF; + background-color: #36404e; +} +.mx-navigationtree li.mx-navigationtree-has-items > ul { + margin: 0; + padding-left: 0; + background-color: #1d222a; +} +.mx-navigationtree li.mx-navigationtree-has-items > ul li { + margin: 0; + padding: 0; + border: 0; +} +.mx-navigationtree li.mx-navigationtree-has-items > ul li a { + padding: 12px 20px 12px 25px; + text-decoration: none; + color: #AAA; + border: 0; + background-color: #1d222a; + text-shadow: none; + font-size: 12px; + font-weight: normal; +} +.mx-navigationtree li.mx-navigationtree-has-items > ul li a:hover, .mx-navigationtree li.mx-navigationtree-has-items > ul li a:focus, .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active { + color: #0595DB; + background-color: #1d222a; +} +.mx-navigationtree li.mx-navigationtree-has-items > ul li a.active { + color: #0595DB; + border: 0; + background-color: #1d222a; +} +.mx-navigationtree:focus { + outline: 0; +} + +.region-topbar .mx-navigationtree { + background-color: #FFFFFF; + /* Sub navigation item specific */ +} +.region-topbar .mx-navigationtree .navbar-inner > ul > li > a { + color: #555555; + border-color: #D7D7D7; + background-color: #FFFFFF; + font-size: 14px; +} +.region-topbar .mx-navigationtree .navbar-inner > ul > li > a .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} +.region-topbar .mx-navigationtree .navbar-inner > ul > li > a .glyphicon { + font-size: 1.2em; +} +.region-topbar .mx-navigationtree .navbar-inner > ul > li a:hover, +.region-topbar .mx-navigationtree .navbar-inner > ul > li a:focus, +.region-topbar .mx-navigationtree .navbar-inner > ul > li a.active { + color: #555555; + background-color: whitesmoke; +} +.region-topbar .mx-navigationtree .navbar-inner > ul > li a:hover .caret, +.region-topbar .mx-navigationtree .navbar-inner > ul > li a:focus .caret, +.region-topbar .mx-navigationtree .navbar-inner > ul > li a.active .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} +.region-topbar .mx-navigationtree .navbar-inner > ul > li a.active { + color: #555555; + border-left-color: #555555; + background-color: #ebebeb; +} +.region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul { + background-color: white; +} +.region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul li a { + color: #AAA; + background-color: white; + font-size: 12px; +} +.region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul li a:hover, .region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul li a:focus, .region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active { + color: #0595DB; + background-color: white; +} +.region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active { + color: #FFF; + background-color: white; +} + +.region-sidebar .mx-navigationtree { + background-color: #252C36; + /* Sub navigation item specific */ +} +.region-sidebar .mx-navigationtree .navbar-inner > ul > li > a { + color: #FFFFFF; + border-color: #2d3642; + background-color: #252C36; + font-size: 14px; +} +.region-sidebar .mx-navigationtree .navbar-inner > ul > li > a .caret { + border-top-color: #FFFFFF; + border-bottom-color: #FFFFFF; +} +.region-sidebar .mx-navigationtree .navbar-inner > ul > li > a .glyphicon { + font-size: 20px; +} +.region-sidebar .mx-navigationtree .navbar-inner > ul > li a:hover, +.region-sidebar .mx-navigationtree .navbar-inner > ul > li a:focus, +.region-sidebar .mx-navigationtree .navbar-inner > ul > li a.active { + color: #FFFFFF; + background-color: #2d3642; +} +.region-sidebar .mx-navigationtree .navbar-inner > ul > li a:hover .caret, +.region-sidebar .mx-navigationtree .navbar-inner > ul > li a:focus .caret, +.region-sidebar .mx-navigationtree .navbar-inner > ul > li a.active .caret { + border-top-color: #FFF; + border-bottom-color: #FFF; +} +.region-sidebar .mx-navigationtree .navbar-inner > ul > li a.active { + color: #FFF; + border-left-color: #FFF; + background-color: #36404e; +} +.region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul { + background-color: #1d222a; +} +.region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a { + color: #AAA; + background-color: #1d222a; + font-size: 12px; +} +.region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a:hover, .region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a:focus, .region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active { + color: #0595DB; + background-color: #1d222a; +} +.region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active { + color: #0595DB; + background-color: #1d222a; +} + +.nav-content-center-text-icons.mx-navigationtree .navbar-inner ul a { + flex-direction: column; + justify-content: center; +} +.nav-content-center-text-icons.mx-navigationtree .navbar-inner ul a .glyphicon { + margin: 0 0 5px 0; +} + +.nav-content-center.mx-navigationtree .navbar-inner ul a { + justify-content: center; +} + +/* ========================================================================== + Navigation + + Default Mendix Simple Menu Bar +========================================================================== */ +.mx-menubar { + padding: 0; + background-color: #252C36; + /* remove focus */ +} +.mx-menubar ul.mx-menubar-list { + display: flex; + width: 100%; + min-height: 50px; +} +.mx-menubar ul.mx-menubar-list li.mx-menubar-item { + margin: 0; +} +.mx-menubar ul.mx-menubar-list li.mx-menubar-item > a { + display: flex; + overflow: hidden; + align-items: center; + justify-content: center; + height: 100%; + padding: 5px 15px; + white-space: nowrap; + color: #FFF; + border-radius: 0; + font-size: 14px; + font-weight: normal; +} +.mx-menubar ul.mx-menubar-list li.mx-menubar-item > a img { + margin-right: 0.5em; +} +.mx-menubar ul.mx-menubar-list li.mx-menubar-item > a .glyphicon { + top: -1px; + margin-right: 0.5em; + vertical-align: middle; + font-size: 20px; +} +.mx-menubar ul.mx-menubar-list li.mx-menubar-item a:hover, +.mx-menubar ul.mx-menubar-list li.mx-menubar-item a:focus, .mx-menubar ul.mx-menubar-list li.mx-menubar-item:hover a, .mx-menubar ul.mx-menubar-list li.mx-menubar-item:focus a, .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a { + text-decoration: none; + color: #FFF; + background-color: #2d3642; +} +.mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a { + color: #FFF; + background-color: #36404e; +} +.mx-menubar:focus { + outline: 0; +} + +.mx-menubar-vertical { + background-color: #252C36; +} +.mx-menubar-vertical ul.mx-menubar-list { + display: flex; +} +.mx-menubar-vertical ul.mx-menubar-list li.mx-menubar-item { + display: block; +} +.mx-menubar-vertical ul.mx-menubar-list li.mx-menubar-item a { + border-bottom: 1px solid #2d3642; +} + +.mx-menubar-horizontal { + box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.14); + /* Two menu items */ + /* Three menu items */ + /* Four menu items */ + /* Five menu items */ +} +.mx-menubar-horizontal ul.mx-menubar-list li.mx-menubar-item { + width: auto; +} +.mx-menubar-horizontal ul.mx-menubar-list li.mx-menubar-item a { + width: 100%; +} +.mx-menubar-horizontal.menubar-col-6 ul.mx-menubar-list li.mx-menubar-item { + width: 50%; +} +.mx-menubar-horizontal.menubar-col-4 ul.mx-menubar-list li.mx-menubar-item { + width: 33.33333333%; +} +.mx-menubar-horizontal.menubar-col-3 ul.mx-menubar-list li.mx-menubar-item { + width: 25%; +} +.mx-menubar-horizontal.menubar-col-2 ul.mx-menubar-list li.mx-menubar-item { + width: 20%; +} + +.region-topbar .mx-menubar { + background-color: #FFFFFF; +} +.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a { + color: #555555; + font-size: 14px; +} +.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a .glyphicon { + font-size: 1.2em; +} +.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a:hover, +.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a:focus, .region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item:hover a, .region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item:focus a, .region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a { + color: #555555; + background-color: whitesmoke; +} +.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a { + color: #555555; + background-color: #ebebeb; +} +.region-topbar .mx-menubar-vertical { + background-color: #FFFFFF; +} +.region-topbar .mx-menubar-vertical ul.mx-menubar-list li.mx-menubar-item a { + height: 60px; + border-color: #D7D7D7; +} + +.region-sidebar .mx-menubar { + background-color: #252C36; +} +.region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a { + color: #FFFFFF; + font-size: 14px; +} +.region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a .glyphicon { + font-size: 20px; +} +.region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a:hover, +.region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a:focus, .region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item:hover a, .region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item:focus a, .region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a { + color: #FFFFFF; + background-color: #2d3642; +} +.region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a { + color: #FFF; + background-color: #36404e; +} +.region-sidebar .mx-menubar-vertical { + background-color: #252C36; +} +.region-sidebar .mx-menubar-vertical ul.mx-menubar-list li.mx-menubar-item a { + border-color: #2d3642; +} + +.bottom-nav-text-icons.mx-menubar ul.mx-menubar-list li.mx-menubar-item a { + flex-direction: column; + padding: 8px 8px 6px 8px; + line-height: normal; + font-size: 11px; +} +.bottom-nav-text-icons.mx-menubar ul.mx-menubar-list li.mx-menubar-item a .glyphicon { + display: block; + margin: 0 0 5px 0; + font-size: 18px; +} +.bottom-nav-text-icons.mx-menubar ul.mx-menubar-list li.mx-menubar-item a img { + display: block; + height: 18px; + margin: 0 0 5px 0; +} + +/* ========================================================================== + Tab Container + + Default Mendix Tab Container Widget. Tab containers are used to show information categorized into multiple tab pages. + This can be very useful if the amount of information that has to be displayed is larger than the amount of space on the screen +========================================================================== */ +.mx-tabcontainer .mx-tabcontainer-tabs { + margin-bottom: 20px; + border-color: #D7D7D7; +} +.mx-tabcontainer .mx-tabcontainer-tabs > li > a { + margin-right: 0; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + color: #888888; + font-weight: normal; +} +.mx-tabcontainer .mx-tabcontainer-tabs > li > a:hover, .mx-tabcontainer .mx-tabcontainer-tabs > li > a:focus { + background-color: #e4e4e4; +} +.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a, +.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:hover, +.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:focus { + color: #555555; + border: 1px solid #D7D7D7; + border-bottom-color: transparent; + background-color: #FFF; +} + +.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs { + border: 0; +} +.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li > a { + margin-right: 2px; + color: #888888; + border: 1px solid #D7D7D7; + border-radius: 4px; +} +.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li > a:hover, .tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li > a:focus { + background-color: #e4e4e4; +} +.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a, +.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:hover, +.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:focus { + color: #FFFFFF; + border-color: #0595DB; + background-color: #0595DB; +} + +.tab-lined.mx-tabcontainer .mx-tabcontainer-tabs { + border-width: 3px; +} +.tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li { + margin-right: 30px; + margin-bottom: -3px; +} +.tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li > a { + padding: 10px 0; + color: #888888; + border: 0; + border-style: solid; + border-color: transparent; + border-bottom-width: 3px; + border-radius: 0; +} +.tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li > a:hover, .tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li > a:focus { + color: #888888; + border: 0; + border-color: transparent; + background: transparent; +} +.tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li.active > a, .tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li.active > a:hover, .tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li.active > a:focus { + color: #0595DB; + border: 0; + border-bottom: 3px solid #0595DB; + background-color: transparent; +} + +.tab-justified.mx-tabcontainer .mx-tabcontainer-tabs { + width: 100%; + border-bottom: 0; +} +.tab-justified.mx-tabcontainer .mx-tabcontainer-tabs > li { + display: table-cell; + float: none; + width: 1%; + margin: 0; +} +@media (max-width: 767px) { + .tab-justified.mx-tabcontainer .mx-tabcontainer-tabs > li { + display: block; + width: 100%; + } +} +.tab-justified.mx-tabcontainer .mx-tabcontainer-tabs > li > a { + text-align: center; + border-bottom: 1px solid #D7D7D7; +} +.tab-justified.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a { + border-bottom-color: transparent; + border-radius: 4px; +} +@media (max-width: 767px) { + .tab-justified.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a { + border-bottom-color: #D7D7D7; + } +} + +.tab-bordered.mx-tabcontainer .mx-tabcontainer-tabs { + margin: 0; +} +.tab-bordered.mx-tabcontainer .mx-tabcontainer-content { + padding: 10px; + border-width: 0 1px 1px 1px; + border-style: solid; + border-color: #D7D7D7; + background-color: #FFFFFF; +} + +.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs { + border-style: none; + position: relative; + display: flex; + justify-content: space-between; +} +.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs::before { + content: ""; + height: 1px; + position: absolute; + width: 100%; + display: block; + top: 16px; + background-color: #D7D7D7; +} +.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs > li { + position: relative; + width: 100%; + text-align: center; + float: none; +} +.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs > li > a { + text-align: center; + margin: auto; + height: 33px; + width: 33px; + padding: 0; + line-height: 33px; + font-size: 18px; + font-weight: bold; + color: #DDDDDD; + border: 1px solid #D7D7D7; + background-color: #FFFFFF; + border-radius: 100%; +} +.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a, +.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:hover, +.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:focus { + color: #FFFFFF; + border-color: #0595DB; + background-color: #0595DB; +} + +.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs { + margin: 0; + text-align: center; + border-style: none; + background-color: #0595DB; +} +.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li { + display: table-cell; + float: none; + width: 1%; + margin: 0; + text-align: center; + border-style: none; + border-radius: 0; +} +.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li a { + padding: 15px; + text-transform: uppercase; + color: #FFFFFF; + border-width: 0 1px 0 0; + border-style: solid; + border-color: rgba(255, 255, 255, 0.3); + border-radius: 0; + font-size: 12px; + font-weight: normal; +} +.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li a:hover, .tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li a:focus { + background-color: inherit; +} +.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li:last-child a { + border-right: none; +} +.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li.active > a, .tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li.active > a:hover, .tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li.active > a:focus { + color: #FFFFFF; + border-style: none; + border-radius: 0; + background-color: #0477af; +} + +/* ========================================================================== + Tables + + Default Mendix Table Widget. Tables can be used to lend structure to a page. They contain a number of rows (tr) and columns, the intersection of which is called a cell (td). Each cell can contain widgets +========================================================================== */ +th { + font-weight: bold; +} + +html body .mx-page table.mx-table th.nopadding, +html body .mx-page table.mx-table td.nopadding { + padding: 0; +} + +table.mx-table > tbody { + /* Table row */ +} +table.mx-table > tbody > tr { + /* Table header */ + /* Table cells */ +} +table.mx-table > tbody > tr > th { + padding: 8px 8px 8px 8px; +} +table.mx-table > tbody > tr > th s +* { + color: #666; + font-weight: bold; + font-weight: 600; +} +table.mx-table > tbody > tr > th > label { + padding-top: 7px; + padding-bottom: 6px; +} +table.mx-table > tbody > tr > td { + padding: 8px 8px 8px 8px; +} +table.mx-table > tbody > tr > td > div > label, +table.mx-table > tbody > tr > td .mx-referenceselector-input-wrapper label { + padding-top: 7px; + padding-bottom: 6px; +} + +.mx-templategrid table.mx-table > tbody > tr > th, +.mx-templategrid table.mx-table > tbody > tr > td { + padding: 8px 8px 8px 8px; +} + +.mx-list table.mx-table > tbody > tr > th, +.mx-list table.mx-table > tbody > tr > td { + padding: 8px 8px 8px 8px; +} + +table.table-lined.mx-table > tbody > tr > td { + border-width: 1px 0; + border-style: solid; + border-color: #D7D7D7; +} + +table.table-bordered.mx-table > tbody > tr > th, +table.table-bordered.mx-table > tbody > tr > td { + border-width: 1px; + border-style: solid; + border-color: #D7D7D7; +} + +table.table-compact.mx-table > tbody > tr > th, +table.table-compact.mx-table > tbody > tr > td { + padding-top: 2px; + padding-bottom: 2px; +} + +table.table-sideless.mx-table > tbody > tr > td, +table.table-sideless.mx-table > tbody > tr > th { + padding-right: 0; +} +table.table-sideless.mx-table > tbody > tr > th:first-child, +table.table-sideless.mx-table > tbody > tr > td:first-child { + padding-left: 0; +} + +table.table-spaceless.mx-table > tbody > tr > th, +table.table-spaceless.mx-table > tbody > tr > td { + padding: 0; +} + +table.table-vertical.mx-table > tbody > tr > th { + padding-bottom: 0; +} +table.table-vertical.mx-table > tbody > tr > th > label { + padding: 0; +} +table.table-vertical.mx-table > tbody > tr > th > div > label { + padding: 0; +} + +table.table-align-vertical-middle.mx-table > tbody > tr > th, +table.table-align-vertical-middle.mx-table > tbody > tr > td { + vertical-align: middle; +} + +table.table-label-compact.mx-table > tbody > tr > th > label, +table.table-label-compact.mx-table > tbody > tr > td > label { + margin: 0; + padding: 0; +} +table.table-label-compact.mx-table > tbody > tr > th > div > label, +table.table-label-compact.mx-table > tbody > tr > th .mx-referenceselector-input-wrapper label, +table.table-label-compact.mx-table > tbody > tr > td > div > label, +table.table-label-compact.mx-table > tbody > tr > td .mx-referenceselector-input-wrapper label { + margin: 0; + padding: 0; +} + +table.table-row-s.mx-table > tbody > tr > th, +table.table-row-s.mx-table > tbody > tr > td { + height: 55px; +} + +table.table-row-m.mx-table > tbody > tr > th, +table.table-row-m.mx-table > tbody > tr > td { + height: 70px; +} + +table.table-row-l.mx-table > tbody > tr > th, +table.table-row-l.mx-table > tbody > tr > td { + height: 120px; +} + +table.table-fixed { + table-layout: fixed; +} + +/* ========================================================================== + Templategrid + + Default Mendix Templategrid Widget. The template grid shows a list of objects in a tile view. For example, a template grid can show a list of products. The template grid has a lot in common with the data grid. The main difference is that the objects are shown in templates (a sort of small data view) instead of rows +========================================================================== */ +.mx-templategrid .mx-templategrid-content-wrapper { + table-layout: fixed; +} +.mx-templategrid .mx-templategrid-item { + padding: 15px 15px 15px 15px; + cursor: default; + background-color: #FFF; +} +.mx-templategrid .mx-templategrid-item:hover { + background-color: transparent; +} +.mx-templategrid .mx-templategrid-item.selected { + background-color: #f3f3f3 !important; +} +.mx-templategrid .mx-layoutgrid { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.templategrid-hover.mx-templategrid .mx-templategrid-item:hover { + background-color: #f7f7f7 !important; +} +.templategrid-hover.mx-templategrid .mx-templategrid-item.selected { + background-color: #f3f3f3 !important; +} +.templategrid-hover.mx-templategrid .mx-templategrid-item.selected:hover { + background-color: #ebebeb !important; +} + +.templategrid-selectable.mx-templategrid .mx-templategrid-item { + cursor: pointer; +} + +.templategrid-lined.mx-templategrid .mx-grid-content { + border-top-width: 2px; + border-top-style: solid; + border-top-color: #D7D7D7; +} +.templategrid-lined.mx-templategrid .mx-templategrid-item { + border-top: 1px solid #D7D7D7; + border-right: none; + border-bottom: 1px solid #D7D7D7; + border-left: none; +} + +.templategrid-striped.mx-templategrid .mx-templategrid-row:nth-child(odd) .mx-templategrid-item { + background-color: #F9F9F9; +} + +.templategrid-stylingless.mx-templategrid .mx-templategrid-item { + padding: 0; + cursor: default; + border: 0; + background-color: transparent; +} +.templategrid-stylingless.mx-templategrid .mx-templategrid-item:hover { + background-color: transparent; +} +.templategrid-stylingless.mx-templategrid .mx-templategrid-item.selected { + background-color: transparent !important; +} +.templategrid-stylingless.mx-templategrid .mx-templategrid-item.selected:hover { + background-color: transparent !important; +} + +.templategrid-transparent.mx-templategrid .mx-templategrid-item { + border: 0; + background-color: transparent; +} + +.templategrid-lg.mx-templategrid .mx-templategrid-item { + padding: 30px 30px 30px 30px; +} + +.templategrid-sm.mx-templategrid .mx-templategrid-item { + padding: 7.5px 7.5px 7.5px 7.5px; +} + +.mx-templategrid[class*="tg-col"] { + overflow: hidden; +} +.mx-templategrid[class*="tg-col"] .mx-templategrid-content-wrapper { + display: block; +} +.mx-templategrid[class*="tg-col"] .mx-templategrid-row { + display: block; + margin-right: -15px; + margin-left: -15px; +} +.mx-templategrid[class*="tg-col"] .mx-templategrid-row::before, .mx-templategrid[class*="tg-col"] .mx-templategrid-row::after { + display: table; + clear: both; + content: " "; +} +.mx-templategrid[class*="tg-col"] .mx-templategrid-item { + position: relative; + display: block; + float: left; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + border: 0; +} +@media (max-width: 992px) { + .mx-templategrid[class*="tg-col"] .mx-templategrid-item { + width: 100% !important; + } +} +.mx-templategrid[class*="tg-col"] .mx-templategrid-item .mx-dataview { + overflow: hidden; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-12 .mx-templategrid-item { + width: 100% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-11 .mx-templategrid-item { + width: 91.66666667% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-10 .mx-templategrid-item { + width: 83.33333333% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-9 .mx-templategrid-item { + width: 75% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-8 .mx-templategrid-item { + width: 66.66666667% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-7 .mx-templategrid-item { + width: 58.33333333% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-6 .mx-templategrid-item { + width: 50% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-5 .mx-templategrid-item { + width: 41.66666667% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-4 .mx-templategrid-item { + width: 33.33333333% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-3 .mx-templategrid-item { + width: 25% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-2 .mx-templategrid-item { + width: 16.66666667% !important; +} +.mx-templategrid[class*="tg-col"].tg-col-xs-1 .mx-templategrid-item { + width: 8.33333333% !important; +} +@media (min-width: 768px) { + .mx-templategrid[class*="tg-col"].tg-col-sm-12 .mx-templategrid-item { + width: 100% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-11 .mx-templategrid-item { + width: 91.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-10 .mx-templategrid-item { + width: 83.33333333% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-9 .mx-templategrid-item { + width: 75% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-8 .mx-templategrid-item { + width: 66.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-7 .mx-templategrid-item { + width: 58.33333333% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-6 .mx-templategrid-item { + width: 50% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-5 .mx-templategrid-item { + width: 41.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-4 .mx-templategrid-item { + width: 33.33333333% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-3 .mx-templategrid-item { + width: 25% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-2 .mx-templategrid-item { + width: 16.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-sm-1 .mx-templategrid-item { + width: 8.33333333% !important; + } +} +@media (min-width: 992px) { + .mx-templategrid[class*="tg-col"].tg-col-md-12 .mx-templategrid-item { + width: 100% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-11 .mx-templategrid-item { + width: 91.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-10 .mx-templategrid-item { + width: 83.33333333% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-9 .mx-templategrid-item { + width: 75% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-8 .mx-templategrid-item { + width: 66.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-7 .mx-templategrid-item { + width: 58.33333333% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-6 .mx-templategrid-item { + width: 50% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-5 .mx-templategrid-item { + width: 41.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-4 .mx-templategrid-item { + width: 33.33333333% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-3 .mx-templategrid-item { + width: 25% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-2 .mx-templategrid-item { + width: 16.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-md-1 .mx-templategrid-item { + width: 8.33333333% !important; + } +} +@media (min-width: 1200px) { + .mx-templategrid[class*="tg-col"].tg-col-lg-12 .mx-templategrid-item { + width: 100% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-11 .mx-templategrid-item { + width: 91.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-10 .mx-templategrid-item { + width: 83.33333333% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-9 .mx-templategrid-item { + width: 75% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-8 .mx-templategrid-item { + width: 66.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-7 .mx-templategrid-item { + width: 58.33333333% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-6 .mx-templategrid-item { + width: 50% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-5 .mx-templategrid-item { + width: 41.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-4 .mx-templategrid-item { + width: 33.33333333% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-3 .mx-templategrid-item { + width: 25% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-2 .mx-templategrid-item { + width: 16.66666667% !important; + } + .mx-templategrid[class*="tg-col"].tg-col-lg-1 .mx-templategrid-item { + width: 8.33333333% !important; + } +} + +/* ========================================================================== + Typography +========================================================================== */ +p { + line-height: 1.78571; +} + +label { + padding-top: 0; +} + +.mx-title { + margin: 15px 0 20px 0; + color: #17347B; + font-size: 31px; + font-weight: normal; +} + +h1, +.h1, +.h1 > * { + font-size: 31px; +} + +h2, +.h2, +.h2 > * { + font-size: 26px; +} + +h3, +.h3, +.h3 > * { + font-size: 24px; +} + +h4, +.h4, +.h4 > * { + font-size: 18px; +} + +h5, +.h5, +.h5 > * { + font-size: 14px; +} + +h6, +.h6, +.h6 > * { + font-size: 12px; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + margin: 15px 0 20px 0; + color: #17347B; + font-weight: normal; + line-height: 1.3; +} + +.text-small { + font-size: 12px !important; +} + +.text-large { + font-size: 16px !important; +} + +.text-light, +.text-light > *, +.text-light label { + font-weight: 100 !important; +} + +.text-normal, +.text-normal > *, +.text-normal label { + font-weight: normal !important; +} + +.text-semibold, +.text-semibold > *, +.text-semibold label { + font-weight: 600 !important; +} + +.text-bold, +.text-bold > *, +.text-bold label { + font-weight: bold !important; +} + +.text-default, +.text-default:hover { + color: #555555 !important; +} + +.text-primary, +.text-primary:hover { + color: #0595DB !important; +} + +.text-info, +.text-info:hover { + color: #48B0F7 !important; +} + +.text-success, +.text-success:hover { + color: #76CA02 !important; +} + +.text-warning, +.text-warning:hover { + color: #F99B1D !important; +} + +.text-danger, +.text-danger:hover { + color: #ED1C24 !important; +} + +.text-header { + color: #17347B !important; +} + +.text-detail { + color: #888888 !important; +} + +.text-white { + color: #FFFFFF; +} + +.text-left { + display: block; + text-align: left !important; +} + +.text-center { + display: block; + text-align: center !important; +} + +.text-right { + display: block; + text-align: right !important; +} + +.text-justify { + text-align: justify !important; +} + +.text-lowercase { + text-transform: lowercase !important; +} + +.text-uppercase { + text-transform: uppercase !important; +} + +.text-capitalize { + text-transform: capitalize !important; +} + +.text-break { + word-break: break-all !important; + word-break: break-word !important; + -ms-word-break: break-all !important; + -webkit-hyphens: auto !important; + -moz-hyphens: auto !important; + hyphens: auto !important; +} + +.text-nowrap { + white-space: nowrap !important; +} + +/* ========================================================================== + Layout Grid + + Default Bootstrap containers +========================================================================== */ +@media (max-width: 767px) { + .row { + margin-right: -7.5px; + margin-left: -7.5px; + } +} + +.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { + padding-right: 15px; + padding-left: 15px; +} +@media (max-width: 767px) { + .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { + padding-right: 7.5px; + padding-left: 7.5px; + } +} + +.v-center { + display: table; + width: 100%; +} +.v-center::before, .v-center::after { + display: none; +} +.v-center .row { + display: table-row; +} +.v-center .row > [class*="col-"] { + display: table-cell; + float: none; + vertical-align: middle; +} +.v-center .row > [class*="col-"]:first-child { + padding-left: 0; +} +.v-center .row > [class*="col-"]:last-child { + padding-right: 0; +} + +.no-gutter > [class*="col-"] { + padding-right: 0; + padding-left: 0; +} + +.mx-progress { + color: #555555; + background: #F5F8FD; +} +.mx-progress .mx-progress-message { + color: #555555; +} +.mx-progress .mx-progress-indicator { + position: relative; + overflow: hidden; + width: 100%; + max-width: 100%; + height: 2px; + margin: auto; + padding: 0; + border-radius: 0; + background: #EEEEEE; +} +.mx-progress .mx-progress-indicator:before, .mx-progress .mx-progress-indicator:after { + position: absolute; + top: 0; + left: 0; + display: block; + width: 50%; + height: 2px; + content: ""; + transform: translate3d(-100%, 0, 0); + background: #0595DB; +} +.mx-progress .mx-progress-indicator::before { + animation: loader 2s infinite; +} +.mx-progress .mx-progress-indicator::after { + animation: loader 2s -2s infinite; +} + +@keyframes loader { + 0% { + transform: translate3d(-100%, 0, 0); + } + 100% { + transform: translate3d(200%, 0, 0); + } +} +.profile-phone .mx-progress-empty { + position: relative; + top: 45px; + left: 0; + overflow: hidden; + width: 100%; + max-width: 100%; + height: 1px; + margin: auto; + padding: 0; + border-radius: 0; + background: #EEEEEE; +} +.profile-phone .mx-progress-empty:before, .profile-phone .mx-progress-empty:after { + position: absolute; + top: 0; + left: 0; + display: block; + width: 50%; + height: 1px; + content: ""; + transform: translate3d(-100%, 0, 0); + background: #0595DB; +} +.profile-phone .mx-progress-empty::before { + animation: loader 2s infinite; +} +.profile-phone .mx-progress-empty::after { + animation: loader 2s -2s infinite; +} +.profile-phone .mx-progress-empty .mx-progress-indicator { + display: none; +} + +/* ========================================================================== + Alignment Blocks + +========================================================================== */ +.flexcontainer { + display: flex; + overflow: hidden; + flex: 1; + flex-direction: row; +} +.flexcontainer .flexitem { + margin-right: 15px; +} +.flexcontainer .flexitem:last-child { + margin-right: 0; +} +.flexcontainer .flexitem-main { + overflow: hidden; + flex: 1; +} + +.flex-center { + align-items: center; +} + +/* ========================================================================== + Breadcrumbs + +========================================================================== */ +.breadcrumb { + margin: 0; + padding: 0; + border-radius: 0; + background-color: transparent; + font-size: 14px; +} + +.breadcrumb-item { + display: inline-block; + margin: 0; +} +.breadcrumb-item:last-child { + color: #555555; +} +.breadcrumb-item:last-child a { + text-decoration: none; +} + +.breadcrumb-item + .breadcrumb-item::before { + display: inline-block; + padding-right: 10px; + padding-left: 10px; + content: "/"; + color: #888888; +} + +.breadcrumb-large { + font-size: 24px; +} + +.breadcrumb-underline { + padding-bottom: 15px; + border-bottom: 1px solid #D7D7D7; +} + +/* ========================================================================== + Cards + +========================================================================== */ +.card { + padding: 30px; + border: 1px solid #D7D7D7; + border-radius: 4px; + background-color: #FFFFFF; +} + +.card-title { + margin-top: 0; +} + +.cardaction .card-image .glyphicon { + font-size: 58px; +} + +.cardmetrics .card-title { + margin-bottom: 0; +} +.cardmetrics .card-image { + width: 100px; + height: auto; +} +.cardmetrics .card-image.btn { + width: 100px; + height: 100px; + padding: 0; + cursor: default; + pointer-events: none; + font-size: 40px; +} +.cardmetrics .card-counter { + margin: 0; + font-size: 64px; +} + +.cardinfo .card-text { + margin-bottom: 30px; +} + +.textwithicon { + overflow: hidden; + max-width: 100%; + margin-bottom: 15px; + text-overflow: ellipsis; +} +.textwithicon .textwithicon-icon, +.textwithicon .textwithicon-text { + display: inline-block; + vertical-align: middle; +} +.textwithicon .textwithicon-icon { + margin-right: 15px; + padding: 0; + color: #0595DB; + border: 0; + background: transparent; + font-size: 23px; +} + +.socialprofiles .socialprofiles-title { + display: block; + margin-bottom: 10px; + font-weight: bold; +} +.socialprofiles .socialprofiles-button { + width: 24px; + height: 24px; + margin-right: 15px; + padding: 0; + border-radius: 24px; +} +.socialprofiles .socialprofiles-button .glyphicon { + margin: 0; +} + +.cardtabs { + padding: 0; +} +.cardtabs .cardtabs-tabs { + margin: 0; +} +.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs { + display: flex; + margin: 0; + background-color: #f7f7f7; +} +.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li { + flex: 1 1 auto; + text-align: center; +} +.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li a, +.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li a:hover, +.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li a:focus { + border-top-width: 0; + border-right-width: 1px; + border-left-width: 0; +} +.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li:first-child a { + border-radius: 4px 0 0 0; +} +.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li:last-child a { + border-radius: 0 4px 0 0; +} +@media (max-width: 767px) { + .cardtabs .cardtabs-tabs .mx-tabcontainer-pane { + padding: 15px; + } +} +@media (min-width: 768px) { + .cardtabs .cardtabs-tabs .mx-tabcontainer-pane { + padding: 30px; + } +} +@media (min-width: 992px) { + .cardtabs .cardtabs-tabs .mx-tabcontainer-pane { + padding: 30px; + } +} + +.cardproduct, .cardproduct2, .cardproduct3 { + padding: 0; +} +.cardproduct .cardproduct-header, .cardproduct2 .cardproduct-header, .cardproduct3 .cardproduct-header { + position: relative; + overflow: hidden; + height: 200px; +} +.cardproduct .cardproduct-header .card-image, .cardproduct2 .cardproduct-header .card-image, .cardproduct3 .cardproduct-header .card-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: auto; +} +.cardproduct .cardproduct-header .cardproduct-overlay, .cardproduct2 .cardproduct-header .cardproduct-overlay, .cardproduct3 .cardproduct-header .cardproduct-overlay { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 20px 30px; + background: rgba(0, 0, 0, 0.6); +} +.cardproduct .cardproduct-header .cardproduct-overlay .cardproduct-overlay-category, .cardproduct2 .cardproduct-header .cardproduct-overlay .cardproduct-overlay-category, .cardproduct3 .cardproduct-header .cardproduct-overlay .cardproduct-overlay-category, +.cardproduct .cardproduct-header .cardproduct-overlay .cardproduct-overlay-title, +.cardproduct2 .cardproduct-header .cardproduct-overlay .cardproduct-overlay-title, +.cardproduct3 .cardproduct-header .cardproduct-overlay .cardproduct-overlay-title { + margin: 0; + color: #FFFFFF; +} +.cardproduct .cardproduct-footer, .cardproduct2 .cardproduct-footer, .cardproduct3 .cardproduct-footer { + position: relative; + padding: 20px 30px; +} +.cardproduct .cardproduct-footer .cardproduct-name, .cardproduct2 .cardproduct-footer .cardproduct-name, .cardproduct3 .cardproduct-footer .cardproduct-name { + margin: 0; +} +.cardproduct .cardproduct-footer .widget-star-rating-font, .cardproduct2 .cardproduct-footer .widget-star-rating-font, .cardproduct3 .cardproduct-footer .widget-star-rating-font { + font-size: 20px; +} +.cardproduct .cardproduct-footer .cardproduct-btn, .cardproduct2 .cardproduct-footer .cardproduct-btn, .cardproduct3 .cardproduct-footer .cardproduct-btn { + position: absolute; + top: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + height: 100%; + padding: 30px; + border-left: 1px solid #D7D7D7; +} + +.cardproduct2 .cardproduct-header::after { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + padding: 20px 30px; + content: ""; + background: rgba(0, 0, 0, 0.6); + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 2%, rgba(0, 0, 0, 0.99) 99%, black 100%); + background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 2%, rgba(0, 0, 0, 0.99) 99%, black 100%); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 2%, rgba(0, 0, 0, 0.99) 99%, black 100%); +} + +.cardproduct3 .cardproduct-header { + height: 320px; +} +.cardproduct3 .cardproduct-header img { + width: 100%; + height: 100%; + object-fit: cover; +} +.cardproduct3 .cardproduct-header .cardproduct-overlay { + min-height: 100px; + padding: 30px; + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 8%, rgba(0, 0, 0, 0.99) 121%, black 100%); + background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 8%, rgba(0, 0, 0, 0.99) 121%, black 100%); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 8%, rgba(0, 0, 0, 0.99) 121%, black 100%); + font-size: 14px; +} + +.cardstatus { + padding: 20px; +} +.cardstatus .card-linkicon { + font-size: 30px; +} +.cardstatus .cardstatus-status { + margin-bottom: 5px; +} + +/* ========================================================================== + Control Group + + A group of buttons next to eachother +========================================================================== */ +.controlgroup .btn, +.controlgroup .btn-group { + margin-right: 5px; + margin-bottom: 5px; +} +.controlgroup .btn:last-child, +.controlgroup .btn-group:last-child { + margin-right: 0; +} +.controlgroup .btn .btn, +.controlgroup .btn-group .btn { + margin-right: 0; + margin-bottom: 0; +} +.controlgroup .btn-group .btn + .btn { + margin-left: -1px; +} + +/* ========================================================================== + Full page blocks + + Blocks that take up the full width and height +========================================================================== */ +.fullpageblock { + position: relative; + height: 100%; + min-height: 100%; +} +.fullpageblock .fullheight { + height: 100% !important; +} +.fullpageblock .fullheight > .mx-dataview-content { + height: inherit !important; +} +.fullpageblock .fullpage-overlay { + position: absolute; + z-index: 10; + bottom: 0; + left: 0; + width: 100%; +} + +/* ========================================================================== + Pageheader +========================================================================== */ +.pageheader { + border-bottom: 1px solid #D7D7D7; + background: #F5F8FD; +} + +.mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader { + background: transparent; +} +@media (max-width: 767px) { + .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader { + margin-bottom: 15px; + } +} +@media (min-width: 768px) { + .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader { + margin-bottom: 30px; + } +} +@media (min-width: 992px) { + .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader { + margin-bottom: 30px; + } +} +@media (max-width: 767px) { + .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader { + padding-bottom: 15px; + } +} +@media (min-width: 768px) { + .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader { + padding-bottom: 30px; + } +} +@media (min-width: 992px) { + .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader { + padding-bottom: 30px; + } +} + +.pageheader-type { + margin: 0; +} + +.pageheader-title { + margin: 0; +} + +.pageheader-subtitle { + margin: 0; +} + +.pageheaderwithsearch .pageheader-title { + margin-bottom: 1em; +} + +/* ========================================================================== + Pageheader + +========================================================================== */ +.heroheader { + border-bottom: 1px solid #D7D7D7; + background: #F5F8FD; +} + +.heroheader-title { + margin: 0 0 10px 0; +} + +.heroheader-subtitle { + margin: 0; + padding: 0 15px; +} +.heroheader-subtitle::before { + display: block; + max-width: 330px; + height: 1px; + margin: auto auto 10px auto; + content: ""; + background-color: #e1e1e1; +} + +.heroheader1 { + background-image: linear-gradient(152deg, #0CC7F0 0%, #087ECC 51%, #077AC9 55%, #0659B9 78%); +} +.heroheader1 .heroheader-title { + margin-bottom: 10px; + color: #FFFFFF; +} +.heroheader1 .heroheader-subtitle { + padding: 0; + color: #FFFFFF; +} +.heroheader1 .heroheader-subtitle::before { + display: none; +} + +.heroheadermap .heroheadermap-map { + height: 350px; +} +.heroheadermap .heroheadermap-controls { + background: #F5F8FD; +} + +.heroheaderproduct { + position: relative; + overflow: hidden; + height: 300px; + background-color: #000000; +} +.heroheaderproduct .heroheaderproduct-backgroundimage { + position: absolute; + z-index: 0; + top: 0; + width: 100%; + opacity: 0.7; + filter: blur(5px); +} +.heroheaderproduct .heroheaderproduct-overlay { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.heroheaderexpense .heroheaderexpense-title { + font-size: 72px; +} +.heroheaderexpense .heroheaderexpense-type { + align-items: center; +} +.heroheaderexpense .heroheaderexpense-type::before { + flex-grow: 1; + height: 1px; + margin-right: 10px; + content: ""; + background-color: #D2D2D2; +} + +/* ========================================================================== + Form Block + + Used in default forms +========================================================================== */ +.formblock-title { + margin-bottom: 15px; + padding-bottom: 15px; + border-bottom: 1px solid #D7D7D7; +} + +/* ========================================================================== + Lists + + Pre-styled listviews with content +========================================================================== */ +/* ========================================================================== + Master Detail + + A list with a listening dataview +========================================================================== */ +.masterdetail { + position: relative; +} +@media (min-width: 992px) { + .masterdetail .mx-layoutgrid { + padding: 0 15px !important; + } +} +.masterdetail .masterdetail-master .controlgroup { + margin-bottom: 15px; +} +@media (min-width: 992px) { + .masterdetail .masterdetail-master { + position: absolute; + top: 0; + bottom: 0; + left: 0; + padding: 0; + border-right: 1px solid #D7D7D7; + } + .masterdetail .masterdetail-master .mx-listview-searchbar { + margin: 15px; + } + .masterdetail .masterdetail-master .controlgroup { + margin: 0; + padding: 15px; + border-bottom: 1px solid #D7D7D7; + } +} +@media (min-width: 992px) and (max-width: 767px) { + .masterdetail .masterdetail-detail { + padding: 15px 15px 15px 15px; + } +} +@media (min-width: 992px) and (min-width: 768px) { + .masterdetail .masterdetail-detail { + padding: 30px 30px 30px 30px; + } +} +@media (min-width: 992px) and (min-width: 992px) { + .masterdetail .masterdetail-detail { + padding: 30px 30px 30px 30px; + } +} + +@media (max-width: 767px) { + .masterdetailvertical .masterdetail-master { + margin-bottom: 15px; + } +} +@media (min-width: 768px) { + .masterdetailvertical .masterdetail-master { + margin-bottom: 30px; + } +} +@media (min-width: 992px) { + .masterdetailvertical .masterdetail-master { + margin-bottom: 30px; + } +} +@media (max-width: 767px) { + .masterdetailvertical .masterdetail-detail { + padding-top: 15px; + } +} +@media (min-width: 768px) { + .masterdetailvertical .masterdetail-detail { + padding-top: 30px; + } +} +@media (min-width: 992px) { + .masterdetailvertical .masterdetail-detail { + padding-top: 30px; + } +} + +/* ========================================================================== + User profile blocks + - +========================================================================== */ +.wizard { + display: flex; + justify-content: space-between; +} +.wizard .wizard-step { + position: relative; + width: 100%; + text-align: center; +} +.wizard .wizard-step::before { + position: absolute; + z-index: -1; + top: 30px; + display: block; + width: 100%; + height: 2px; + content: ""; + background-color: #D7D7D7; +} +.wizard .wizard-step .wizard-step-number { + width: 60px; + height: 60px; + border-color: #D7D7D7; + border-radius: 50%; + background-color: #FFFFFF; + font-size: 20px; +} +.wizard .wizard-step .wizard-step-text { + display: block; + margin-top: 15px; +} +.wizard .wizard-step-active .wizard-step-number { + color: #FFFFFF; + border-color: #0595DB; + background-color: #0595DB; +} +.wizard .wizard-step-active .wizard-step-text { + color: #0595DB; +} +.wizard .wizard-step-visited .wizard-step-number { + color: #FFFFFF; + border-color: #76CA02; + background-color: #76CA02; +} + +.wizardprogress { + display: flex; + justify-content: space-between; +} +.wizardprogress .wizard-step-text { + width: 100%; +} +.wizardprogress .wizard-step { + position: relative; + width: 100%; + height: 50px; + margin-left: -25px; + padding-left: 25px; + border: 1px solid #D7D7D7; + background: #FFFFFF; +} +.wizardprogress .wizard-step a { + display: block; + overflow: hidden; + width: 100%; + height: 100%; + padding: 14px; + white-space: nowrap; + text-decoration: none; + text-overflow: ellipsis; + color: #555555; +} +.wizardprogress .wizard-step::before, .wizardprogress .wizard-step::after { + position: absolute; + z-index: 1; + left: 100%; + margin-left: -25px; + content: " "; + border-style: solid; + border-color: transparent; +} +.wizardprogress .wizard-step::after { + top: 1px; + border-width: 24px; + border-left-color: #FFFFFF; +} +.wizardprogress .wizard-step::before { + top: 0; + border-width: 25px; + border-left-color: #D7D7D7; +} +.wizardprogress .wizard-step:first-child { + margin-left: 0; + padding-left: 0; + border-radius: 5px 0 0 5px; +} +.wizardprogress .wizard-step:last-child { + border-radius: 0 5px 5px 0; +} +.wizardprogress .wizard-step:last-child::before, .wizardprogress .wizard-step:last-child::after { + display: none; +} +.wizardprogress .wizard-step-active { + background: #0595DB; +} +.wizardprogress .wizard-step-active a { + text-decoration: none; + color: #FFFFFF; +} +.wizardprogress .wizard-step-active::after { + border-left-color: #0595DB; +} +.wizardprogress .wizard-step-visited a { + color: #0595DB; +} + +.timeline .timeline-header { + display: inline-block; + width: 110px; + padding: 8px; + text-align: center; + border: 1px solid #D7D7D7; + border-radius: 30px; +} + +.timeline-itemwrapper.mx-listview { + margin-bottom: 0; + margin-left: 55px; + padding: 30px 0; + border-left: 1px solid #D7D7D7; +} +.timeline-itemwrapper.mx-listview > ul > .mx-listview-item { + position: relative; + padding-left: 30px; +} +.timeline-itemwrapper.mx-listview > ul > .mx-listview-item::before { + position: absolute; + top: 5px; + left: -5px; + display: block; + width: 10px; + height: 10px; + content: ""; + border-radius: 50%; + background-color: #0595DB; +} +.timeline-itemwrapper.mx-listview .mx-listview-item + .mx-listview-item { + margin-top: 30px; +} + +.timeline2 .timeline-itemwrapper.mx-listview > ul > .mx-listview-item { + padding-left: 15px; +} + +/* ========================================================================== + Atlas layout + + The core stucture of all atlas layouts +========================================================================== */ +.layout-atlas .toggle-btn > .glyphicon { + margin: 0; +} +.layout-atlas .region-sidebar { + background-color: #252C36; +} +.layout-atlas .region-sidebar .mx-navigationtree .navbar-inner > ul > li > a { + padding: 0 15px; +} +.layout-atlas .region-sidebar .mx-navigationtree .navbar-inner > ul > li > a .glyphicon { + margin-right: 10px; +} +.layout-atlas .region-sidebar .toggle-btn { + border-color: transparent; + border-radius: 0; + background: transparent; +} +.layout-atlas .region-topbar { + position: relative; + z-index: 1; + min-height: 60px; + border-bottom: 1px solid #D7D7D7; + background-color: #FFFFFF; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); +} +.layout-atlas .region-topbar::before { + z-index: 1; + display: block; + width: 100%; + height: 4px; + content: ""; + background-color: #0595DB; +} +.layout-atlas .region-topbar .topbar-content { + display: flex; + align-items: center; + min-height: 60px; +} +.layout-atlas .region-topbar .toggle-btn { + margin-right: 15px; + padding: 5px; +} +.layout-atlas .region-topbar .navbar-brand { + display: inline-block; + float: none; + height: auto; + padding: 0; + line-height: inherit; +} +.layout-atlas .region-topbar .navbar-brand img { + display: inline-block; + width: auto; + height: 30px; +} +.layout-atlas .region-topbar .navbar-brand a { + margin-left: 5px; + color: #D7D7D7; + font-size: 20px; +} +.layout-atlas .region-topbar .navbar-brand a:hover, .layout-atlas .region-topbar .navbar-brand a:focus { + text-decoration: none; +} +.layout-atlas .region-topbar .mx-navbar { + display: inline-block; + margin-left: 15px; + vertical-align: middle; + background: transparent; +} +.layout-atlas .region-topbar .mx-navbar > .mx-navbar-item > a { + margin-top: 5px; + padding: 0 20px; +} + +/* ========================================================================== + Atlas layout + + Extra styling for phone layouts +========================================================================== */ +.layout-atlas-phone .region-topbar { + min-height: 45px; + border-style: none; + background-color: #FFFFFF; +} +.layout-atlas-phone .region-topbar::before { + display: none; +} + +/* ========================================================================== + Atlas layout + + Extra styling for responsive layouts +========================================================================== */ +@media (min-width: 768px) { + .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar { + width: 60px !important; + } + .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree ul li.mx-navigationtree-has-items:hover a { + background-color: #1d222a; + } + .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree ul li.mx-navigationtree-has-items:hover ul { + position: absolute; + z-index: 100; + top: 0; + bottom: 0; + left: 60px; + display: block; + overflow-y: scroll; + min-width: 200px; + padding-top: 10px; + } + .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree ul li.mx-navigationtree-collapsed ul, .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree ul li.mx-navigationtree-has-items ul { + display: none; + } +} +@media (max-width: 767px) { + .layout-atlas-responsive-default .mx-scrollcontainer-open { + width: 1100px; + } +} +.layout-atlas-responsive-default .region-sidebar .toggle-btn { + width: 60px; + height: 60px; + border-color: transparent; + border-radius: 0; + background: transparent; +} +.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree .navbar-inner > ul > li > a { + height: 60px; +} +.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree .navbar-inner > ul > li > a .glyphicon { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + margin-left: -5px; + padding: 10px; + border-radius: 3px; +} +.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree .navbar-inner > ul > li > a.active .glyphicon { + background: #0595DB; +} + +.layout-atlas-responsive-default .region-topbar .toggle-btn, +.layout-atlas-responsive-topbar .region-topbar .toggle-btn { + display: none; +} +@media (max-width: 767px) { + .layout-atlas-responsive-default .region-topbar .toggle-btn, + .layout-atlas-responsive-topbar .region-topbar .toggle-btn { + display: inline-block; + } +} + +/* ========================================================================== + Atlas layout + + Extra styling for tablet layouts +========================================================================== */ +/* Based on https://github.com/mendixlabs/star-rating/blob/v1.1.1/src/ui/StarRating.scss */ +div.widget-progress-bar .progress-bar-default { + background-color: #DDDDDD; +} + +div.widget-progress-bar .progress-bar-primary { + background-color: #0595DB; +} + +div.widget-progress-bar .progress-bar-success { + background-color: #76CA02; +} + +div.widget-progress-bar .progress-bar-info { + background-color: #48B0F7; +} + +div.widget-progress-bar .progress-bar-warning { + background-color: #F99B1D; +} + +div.widget-progress-bar .progress-bar-danger { + background-color: #ED1C24; +} + +div.widget-progress-bar .progress-bar-inverse { + background-color: #252C36; +} + +div.widget-progress-bar-alert.widget-progress-bar-text-contrast .progress-bar { + color: #8e1116; +} + +div.widget-progress-bar-text-contrast .progress-bar { + color: #555555; +} + +/* Based on https://github.com/mendixlabs/progress-circle/tree/master/src/ui/_progress-circle-theme.scss */ +path.widget-progress-circle-path { + stroke: #0595DB; +} + +.widget-progress-circle-primary path.widget-progress-circle-path { + stroke: #0595DB; +} + +.widget-progress-circle-info path.widget-progress-circle-path { + stroke: #48B0F7; +} + +.widget-progress-circle-success path.widget-progress-circle-path { + stroke: #76CA02; +} + +.widget-progress-circle-warning path.widget-progress-circle-path { + stroke: #F99B1D; +} + +.widget-progress-circle-danger path.widget-progress-circle-path { + stroke: #ED1C24; +} + +.widget-progress-circle-inverse path.widget-progress-circle-path { + stroke: #252C36; +} + +div.widget-range-slider .rc-slider-handle, +div.widget-range-slider .rc-slider-dot-active { + border-color: #DDDDDD; +} +div.widget-range-slider .rc-slider-handle:active, +div.widget-range-slider .rc-slider-dot-active:active { + border-color: #DDDDDD; + box-shadow: none; +} +div.widget-range-slider .rc-slider-handle:hover, +div.widget-range-slider .rc-slider-dot-active:hover { + border-color: #DDDDDD; +} +div.widget-range-slider.has-error .rc-slider-track, +div.widget-range-slider.has-error .rc-slider-rail { + background-color: #ED1C24; +} + +div.widget-range-slider-primary .rc-slider-track { + background-color: #0595DB; +} + +div.widget-range-slider-info .rc-slider-track { + background-color: #48B0F7; +} + +div.widget-range-slider-success .rc-slider-track { + background-color: #76CA02; +} + +div.widget-range-slider-warning .rc-slider-track { + background-color: #F99B1D; +} + +div.widget-range-slider-danger .rc-slider-track { + background-color: #ED1C24; +} + +div.widget-range-slider-inverse .rc-slider-track { + background-color: #252C36; +} + +div.widget-slider .rc-slider-handle, +div.widget-slider .rc-slider-dot-active { + border-color: #DDDDDD; +} +div.widget-slider .rc-slider-handle:active, +div.widget-slider .rc-slider-dot-active:active { + border-color: #DDDDDD; +} +div.widget-slider .rc-slider-handle:hover, +div.widget-slider .rc-slider-dot-active:hover { + border-color: #DDDDDD; +} +div.widget-slider.has-error .rc-slider-track, +div.widget-slider.has-error .rc-slider-rail { + background-color: #ED1C24; +} + +div.widget-slider-primary .rc-slider-track { + background-color: #0595DB; +} + +div.widget-slider-info .rc-slider-track { + background-color: #48B0F7; +} + +div.widget-slider-success .rc-slider-track { + background-color: #76CA02; +} + +div.widget-slider-warning .rc-slider-track { + background-color: #F99B1D; +} + +div.widget-slider-danger .rc-slider-track { + background-color: #ED1C24; +} + +div.widget-slider-inverse .rc-slider-track { + background-color: #252C36; +} + +/* Based on https://github.com/mendixlabs/star-rating/blob/v1.1.1/src/ui/StarRating.scss */ +span.widget-star-rating-full-default { + color: #DDDDDD; +} + +span.widget-star-rating-full-primary { + color: #0595DB; +} + +span.widget-star-rating-full-success { + color: #76CA02; +} + +span.widget-star-rating-full-info { + color: #48B0F7; +} + +span.widget-star-rating-full-warning { + color: #F99B1D; +} + +span.widget-star-rating-full-danger { + color: #ED1C24; +} + +span.widget-star-rating-full-inverse { + color: #252C36; +} + +div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default { + border-color: #64bd63; + background-color: #64bd63; + box-shadow: #64bd63 0 0 0 16px inset; +} +div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success { + border-color: #76CA02; + background-color: #76CA02; + box-shadow: #76CA02 0 0 0 16px inset; +} +div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info { + border-color: #48B0F7; + background-color: #48B0F7; + box-shadow: #48B0F7 0 0 0 16px inset; +} +div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary { + border-color: #0595DB; + background-color: #0595DB; + box-shadow: #0595DB 0 0 0 16px inset; +} +div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning { + border-color: #F99B1D; + background-color: #F99B1D; + box-shadow: #F99B1D 0 0 0 16px inset; +} +div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger { + border-color: #ED1C24; + background-color: #ED1C24; + box-shadow: #ED1C24 0 0 0 16px inset; +} +div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse { + border-color: #252C36; + background-color: #252C36; + box-shadow: #252C36 0 0 0 16px inset; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default { + background-color: #92cec7; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default .widget-switch-btn { + background: #6FBEB5; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success { + background-color: #94fd03; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success .widget-switch-btn { + background: #76CA02; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info { + background-color: #79c5f9; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info .widget-switch-btn { + background: #48B0F7; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary { + background-color: #19b0fa; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary .widget-switch-btn { + background: #0595DB; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning { + background-color: #fab14f; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning .widget-switch-btn { + background: #F99B1D; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger { + background-color: #f14b52; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger .widget-switch-btn { + background: #ED1C24; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse { + background-color: #3a4554; +} +div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse .widget-switch-btn { + background: #252C36; +} +div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default { + border-color: #64bd63; + background-color: #64bd63; + box-shadow: #64bd63 0 0 0 16px inset; +} +div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success { + border-color: #76CA02; + background-color: #76CA02; + box-shadow: #76CA02 0 0 0 16px inset; +} +div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info { + border-color: #48B0F7; + background-color: #48B0F7; + box-shadow: #48B0F7 0 0 0 16px inset; +} +div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary { + border-color: #0595DB; + background-color: #0595DB; + box-shadow: #0595DB 0 0 0 16px inset; +} +div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning { + border-color: #F99B1D; + background-color: #F99B1D; + box-shadow: #F99B1D 0 0 0 16px inset; +} +div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger { + border-color: #ED1C24; + background-color: #ED1C24; + box-shadow: #ED1C24 0 0 0 16px inset; +} +div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse { + border-color: #252C36; + background-color: #252C36; + box-shadow: #252C36 0 0 0 16px inset; +} + +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default { + background-color: #92cec7; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default .widget-switch-btn { + background: #6FBEB5; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success { + background-color: #94fd03; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success .widget-switch-btn { + background: #76CA02; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info { + background-color: #79c5f9; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info .widget-switch-btn { + background: #48B0F7; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary { + background-color: #19b0fa; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary .widget-switch-btn { + background: #0595DB; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning { + background-color: #fab14f; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning .widget-switch-btn { + background: #F99B1D; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger { + background-color: #f14b52; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger .widget-switch-btn { + background: #ED1C24; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse { + background-color: #3a4554; +} +html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse .widget-switch-btn { + background: #252C36; +} +html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default { + border-color: #64bd63; + background-color: #64bd63; + box-shadow: #64bd63 0 0 0 16px inset; +} +html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success { + border-color: #76CA02; + background-color: #76CA02; + box-shadow: #76CA02 0 0 0 16px inset; +} +html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info { + border-color: #48B0F7; + background-color: #48B0F7; + box-shadow: #48B0F7 0 0 0 16px inset; +} +html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary { + border-color: #0595DB; + background-color: #0595DB; + box-shadow: #0595DB 0 0 0 16px inset; +} +html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning { + border-color: #F99B1D; + background-color: #F99B1D; + box-shadow: #F99B1D 0 0 0 16px inset; +} +html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger { + border-color: #ED1C24; + background-color: #ED1C24; + box-shadow: #ED1C24 0 0 0 16px inset; +} +html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse { + border-color: #252C36; + background-color: #252C36; + box-shadow: #252C36 0 0 0 16px inset; +} diff --git a/theme/styles/login.css b/theme/styles/login.css new file mode 100644 index 0000000..2fd8445 --- /dev/null +++ b/theme/styles/login.css @@ -0,0 +1,56 @@ +html, body { + height: 100%; +} +.login-container { + display: table; + width: 90%; + max-width: 300px; + min-width: 180px; + height: 80%; + margin: auto; + text-align: center; +} +.login-form { + display: table-cell; + padding: 30px 10px 10px; + vertical-align: middle; + text-align: center; +} +.login-logo { + height: 40px; + margin-bottom: 50px; + background: url(../css/images/mendix-logo.png) no-repeat center; +} +.login-message { + display: none; +} +label { + font-weight: bold; +} +.login-form input { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + width: 100%; + height: 30px; +} +.login-sso-button { + display: block; + margin: auto; +} +.login-or-label { + display: block; + width: 80%; + margin: 20px auto; + text-align: center; + font-weight: normal; +} +.login-form-inputs .login-local-label { + font-weight: bold; +} +.login-form-inputs { + text-align: left; +} +.login-form-inputs label { + font-weight: normal; +} \ No newline at end of file diff --git a/theme/styles/sass/.DS_Store b/theme/styles/sass/.DS_Store new file mode 100644 index 0000000..f9f60d0 Binary files /dev/null and b/theme/styles/sass/.DS_Store differ diff --git a/theme/styles/sass/custom/_custom-variables.scss b/theme/styles/sass/custom/_custom-variables.scss new file mode 100644 index 0000000..125d40f --- /dev/null +++ b/theme/styles/sass/custom/_custom-variables.scss @@ -0,0 +1,60 @@ +//== Gray Shades +//## Different gray shades to be used for our variables and components +$gray-darker: #222222; +$gray-dark: #333333; +$gray: #555555; +$gray-light: #888888; +$gray-primary: #D7D7D7; +$gray-lighter: #EEEEEE; + +//== Step 1: Brand Colors +$brand-default: #DDDDDD; +$brand-primary: #0595DB; +$brand-inverse: #252C36; +$brand-info: #48B0F7; +$brand-success: #76CA02; +$brand-warning: #F99B1D; +$brand-danger: #ED1C24; + +// Used for other variables +$default-border-color: $gray-primary; + +//== Step 3: Typography +$font-family-import: "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"; +$font-family-base: "Open Sans", sans-serif; +$font-base-size: 14px; +$font-base-color: #555555; +$link-color: $brand-primary; +$font-size-h1: 31px; +$font-size-h2: 26px; +$font-size-h3: 24px; +$font-size-h4: 18px; +$font-color-headers: #17347B; + +//== Step 2: UI Customization + +// Topbar +$topbar-bg: #FFFFFF; +$navtopbar-border-color: $default-border-color; +$topbar-border-color: $navtopbar-border-color; +$topbar-minimalheight: 60px; +$navtopbar-color: $font-base-color; +$navbar-brand-name: $default-border-color; +$brand-logo: false; +$brand-logo-height: 30px; +$brand-logo-width: 30px; + +// Sidebar +$sidebar-bg: $brand-inverse; +$navsidebar-color: #FFFFFF; +$navsidebar-color-hover: $navsidebar-color; + +// Backgrounds +$bg-color: #FFFFFF; +$bg-color-secondary: #F5F8FD; + +// == Old variables used in theme customizer to the new lib variables +$font-size-default: $font-base-size; +$font-color-default: $font-base-color; +$border-color-default: $default-border-color; +$font-color-header: $font-color-headers; diff --git a/theme/styles/sass/custom/custom.scss b/theme/styles/sass/custom/custom.scss new file mode 100644 index 0000000..fffc412 --- /dev/null +++ b/theme/styles/sass/custom/custom.scss @@ -0,0 +1 @@ +@import "custom-variables"; diff --git a/theme/styles/sass/lib/_variables.scss b/theme/styles/sass/lib/_variables.scss new file mode 100644 index 0000000..57b70eb --- /dev/null +++ b/theme/styles/sass/lib/_variables.scss @@ -0,0 +1,626 @@ +// +// ██████╗ █████╗ ███████╗██╗ ██████╗ +// ██╔══██╗██╔══██╗██╔════╝██║██╔════╝ +// ██████╔╝███████║███████╗██║██║ +// ██╔══██╗██╔══██║╚════██║██║██║ +// ██████╔╝██║ ██║███████║██║╚██████╗ +// ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═════╝ +// + + +//== Gray Shades +//## Different gray shades to be used for our variables and components +$gray-darker: #222 !default; +$gray-dark: #333 !default; +$gray: #555 !default; +$gray-light: #888 !default; +$gray-primary: #d7d7d7 !default; +$gray-lighter: #eee !default; + + +//== Step 1: Brand Colors +$brand-default: #DDDDDD !default; +$brand-primary: #0595DB !default; +$brand-inverse: #252C36 !default; +$brand-info: #48B0F7 !default; +$brand-success: #76CA02 !default; +$brand-warning: #f99b1d !default; +$brand-danger: #ed1c24 !default; + +$brand-logo: false !default; +$brand-logo-height: 26px !default; +$brand-logo-width: 26px !default; // Only used for CSS brand logo + + + + + +//== Step 2: UI Customization + +// Default Font Size & Color +$font-size-default: 14px !default; +$font-color-default: #555 !default; + +// Global Border Color +$border-color-default: $gray-primary !default; +$border-radius-default: 4px !default; + +// Topbar +$topbar-bg: #FFF !default; +$topbar-minimalheight: 60px !default; +$topbar-border-color: $border-color-default !default; + +// Topbar mobile +$m-header-height: 45px !default; +$m-header-bg: $topbar-bg !default; +$m-header-color: #555 !default; +$m-header-title-size: 17px !default; + + +// Sidebar +$sidebar-bg: $brand-inverse !default; + +// Navbar Brand Name / For your company, product, or project name (used in layouts/base/) +$navbar-brand-name: $font-color-default !default; + +// Background Colors +$bg-color: #FFF !default; +$bg-color-secondary: #F5F8FD !default; // Background color that is used for specific page templates background + +// Default Link Color +$link-color: $brand-primary !default; +$link-hover-color: darken($link-color, 15%) !default; + + + + + +// +// █████╗ ██████╗ ██╗ ██╗ █████╗ ███╗ ██╗ ██████╗███████╗██████╗ +// ██╔══██╗██╔══██╗██║ ██║██╔══██╗████╗ ██║██╔════╝██╔════╝██╔══██╗ +// ███████║██║ ██║██║ ██║███████║██╔██╗ ██║██║ █████╗ ██║ ██║ +// ██╔══██║██║ ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║ ██╔══╝ ██║ ██║ +// ██║ ██║██████╔╝ ╚████╔╝ ██║ ██║██║ ╚████║╚██████╗███████╗██████╔╝ +// ╚═╝ ╚═╝╚═════╝ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝╚══════╝╚═════╝ +// + + +//== Typography +//## Change your font family, weight, line-height, headings and more (used in components/typography) + +// Font Family Import (Used for google font plugin in theme creater https://ux.mendix.com/theme-creator.html) +$font-family-import: "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" !default; +@if $font-family-import != false { // Only import, if the import is set + @import url($font-family-import); +} + +// Font Family / False = fallback from Bootstrap (Helvetica Neue) +$font-family-base: 'Open Sans', sans-serif !default; + +// Font Sizes +$font-size-large: 16px !default; +$font-size-small: 12px !default; + +// Font Weights +$font-weight-light: 100 !default; +$font-weight-normal: normal !default; +$font-weight-semibold: 600 !default; +$font-weight-bold: bold !default; + +// Font Size Headers +$font-size-h1: 31px !default; +$font-size-h2: 26px !default; +$font-size-h3: 24px !default; +$font-size-h4: 18px !default; +$font-size-h5: $font-size-default !default; +$font-size-h6: 12px !default; + +// Font Weight Headers +$font-weight-header: $font-weight-normal !default; + +// Line Height +$line-height-base: 1.428571429 !default; + +// Spacing +$font-header-margin: 15px 0 20px 0 !default; + +// Text Colors +$font-color-header: #17347B !default; +$font-color-detail: $gray-light !default; + + + + + +//== Navigation +//## Used in components/navigation + +// Default Navigation styling +$navigation-item-height: 60px; +$navigation-item-padding: 5px 15px; + +$navigation-font-size: $font-size-default !default; +$navigation-sub-font-size: $font-size-small !default; +$navigation-glyph-size: 20px !default; // For glyphicons that you can select in the Mendix Modeler + +$navigation-bg: $brand-inverse !default; +$navigation-bg-hover: lighten($navigation-bg, 4) !default; +$navigation-bg-active: lighten($navigation-bg, 8) !default; +$navigation-color: #FFF !default; +$navigation-color-hover: #FFF !default; +$navigation-color-active: #FFF !default; + +$navigation-sub-bg: darken($navigation-bg, 4) !default; +$navigation-sub-bg-hover: $navigation-sub-bg !default; +$navigation-sub-bg-active: $navigation-sub-bg !default; +$navigation-sub-color: #AAA !default; +$navigation-sub-color-hover: $brand-primary !default; +$navigation-sub-color-active: $brand-primary !default; + +$navigation-border-color: $navigation-bg-hover !default; + +// Navigation Sidebar +$navsidebar-font-size: $font-size-default !default; +$navsidebar-sub-font-size: $font-size-small !default; +$navsidebar-glyph-size: 20px !default; // For glyphicons that you can select in the Mendix Modeler + +$navsidebar-bg: $sidebar-bg !default; +$navsidebar-bg-hover: lighten($navsidebar-bg, 4) !default; +$navsidebar-bg-active: lighten($navsidebar-bg, 8) !default; +$navsidebar-color: #FFF !default; +$navsidebar-color-hover: #FFF !default; +$navsidebar-color-active: #FFF !default; + +$navsidebar-sub-bg: darken($navsidebar-bg, 4) !default; +$navsidebar-sub-bg-hover: $navsidebar-sub-bg !default; +$navsidebar-sub-bg-active: $navsidebar-sub-bg !default; +$navsidebar-sub-color: #AAA !default; +$navsidebar-sub-color-hover: $brand-primary !default; +$navsidebar-sub-color-active: $brand-primary !default; + +$navsidebar-border-color: $navsidebar-bg-hover !default; + +// Navigation topbar +$navtopbar-font-size: $font-size-default !default; +$navtopbar-sub-font-size: $font-size-small !default; +$navtopbar-glyph-size: 1.2em !default; // For glyphicons that you can select in the Mendix Modeler + +$navtopbar-bg: $topbar-bg !default; +$navtopbar-bg-hover: darken($navtopbar-bg, 4) !default; +$navtopbar-bg-active: darken($navtopbar-bg, 8) !default; +$navtopbar-color: $font-base-color !default; +$navtopbar-color-hover: $navtopbar-color !default; +$navtopbar-color-active: $navtopbar-color !default; + +$navtopbar-sub-bg: lighten($navtopbar-bg, 4) !default; +$navtopbar-sub-bg-hover: $navtopbar-sub-bg !default; +$navtopbar-sub-bg-active: $navtopbar-sub-bg !default; +$navtopbar-sub-color: #AAA !default; +$navtopbar-sub-color-hover: $brand-primary !default; +$navtopbar-sub-color-active: #FFF !default; + +//## Used in layouts/base +$navtopbar-border-color: $topbar-border-color !default; + + + + +//== Form +//## Used in components/inputs + +// Values that can be used default | lined +$form-input-style: default !default; + +// Form Label +$form-label-color: #666 !default; +$form-label-size: $font-size-default !default; +$form-label-weight: $font-weight-semibold !default; + +// Form Input dimensions +$form-input-height: auto !default; +$form-input-padding-y: 8px !default; +$form-input-padding-x: 10px !default; +$form-input-font-size: $form-label-size !default; +$form-input-line-height: $line-height-base !default; +$form-input-border-radius: $border-radius-default !default; + +// Form Input styling +$form-input-bg: #FFF !default; +$form-input-bg-focus: #FFF !default; +$form-input-bg-disabled: $gray-lighter !default; +$form-input-color: $font-color-default !default; +$form-input-focus-color: $form-input-color !default; +$form-input-disabled-color: $form-input-color !default; +$form-input-placeholder-color: $gray-light !default; +$form-input-border-color: $border-color-default !default; +$form-input-border-focus-color: $brand-primary !default; + +// Form Input Static styling +$form-input-static-border-color: #F0F0EE !default; + +// Form Group +$form-group-margin-bottom: 15px !default; +$form-group-gutter: 15px !default; + + + + +//== Buttons +//## Define background-color, border-color and text. Used in components/buttons + +// Default button style +$btn-font-size: 14px !default; +$btn-bordered: false !default; // Default value false, set to true if you want this effect +$btn-border-radius: $border-radius-default !default; + +// Button Background Color +$btn-default-bg: #FFF !default; +$btn-inverse-bg: $brand-inverse !default; +$btn-primary-bg: $brand-primary !default; +$btn-info-bg: $brand-info !default; +$btn-success-bg: $brand-success !default; +$btn-warning-bg: $brand-warning !default; +$btn-danger-bg: $brand-danger !default; + +// Button Border Color +$btn-default-border-color: $brand-default !default; +$btn-inverse-border-color: $btn-inverse-bg !default; +$btn-primary-border-color: $btn-primary-bg !default; +$btn-info-border-color: $btn-info-bg !default; +$btn-success-border-color: $btn-success-bg !default; +$btn-warning-border-color: $btn-warning-bg !default; +$btn-danger-border-color: $btn-danger-bg !default; + +// Button Text Color +$btn-default-color: $brand-primary !default; +$btn-inverse-color: #FFF !default; +$btn-primary-color: #FFF !default; +$btn-info-color: #FFF !default; +$btn-success-color: #FFF !default; +$btn-warning-color: #FFF !default; +$btn-danger-color: #FFF !default; + +// Button Background Color +$btn-default-bg-hover: $btn-default-border-color !default; +$btn-inverse-bg-hover: mix($btn-inverse-bg, white, 80%) !default; +$btn-primary-bg-hover: mix($btn-primary-bg, black, 80%) !default; +$btn-info-bg-hover: mix($btn-info-bg, black, 80%) !default; +$btn-success-bg-hover: mix($btn-success-bg, black, 80%) !default; +$btn-warning-bg-hover: mix($btn-warning-bg, black, 80%) !default; +$btn-danger-bg-hover: mix($btn-danger-bg, black, 80%) !default; +$btn-link-bg-hover: $gray-lighter !default; + + + + +//== Header blocks +//## Define look and feel over multible building blocks that serve as header +$header-bg-color: $bg-color-secondary !default; +$header-text-color: #FFF !default; +$header-text-color-detail: rgba(0,0,0, 0.2) !default; + + + + + +// +// ███████╗██╗ ██╗██████╗ ███████╗██████╗ ████████╗ +// ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝ +// █████╗ ╚███╔╝ ██████╔╝█████╗ ██████╔╝ ██║ +// ██╔══╝ ██╔██╗ ██╔═══╝ ██╔══╝ ██╔══██╗ ██║ +// ███████╗██╔╝ ██╗██║ ███████╗██║ ██║ ██║ +// ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ +// + +//== Color variations +//## These variations are used to support several other variables and components + +// Color variations +$color-default-darker: mix($brand-default, black, 60%) !default; +$color-default-dark: mix($brand-default, black, 70%) !default; +$color-default-light: mix($brand-default, white, 60%) !default; +$color-default-lighter: mix($brand-default, white, 20%) !default; + +$color-inverse-darker: mix($brand-inverse, black, 60%) !default; +$color-inverse-dark: mix($brand-inverse, black, 70%) !default; +$color-inverse-light: mix($brand-inverse, white, 60%) !default; +$color-inverse-lighter: mix($brand-inverse, white, 20%) !default; + +$color-primary-darker: mix($brand-primary, black, 60%) !default; +$color-primary-dark: mix($brand-primary, black, 70%) !default; +$color-primary-light: mix($brand-primary, white, 60%) !default; +$color-primary-lighter: mix($brand-primary, white, 20%) !default; + +$color-info-darker: mix($brand-info, black, 60%) !default; +$color-info-dark: mix($brand-info, black, 70%) !default; +$color-info-light: mix($brand-info, white, 60%) !default; +$color-info-lighter: mix($brand-info, white, 20%) !default; + +$color-success-darker: mix($brand-success, black, 60%) !default; +$color-success-dark: mix($brand-success, black, 70%) !default; +$color-success-light: mix($brand-success, white, 60%) !default; +$color-success-lighter: mix($brand-success, white, 20%) !default; + +$color-warning-darker: mix($brand-warning, black, 60%) !default; +$color-warning-dark: mix($brand-warning, black, 70%) !default; +$color-warning-light: mix($brand-warning, white, 60%) !default; +$color-warning-lighter: mix($brand-warning, white, 20%) !default; + +$color-danger-darker: mix($brand-danger, black, 60%) !default; +$color-danger-dark: mix($brand-danger, black, 70%) !default; +$color-danger-light: mix($brand-danger, white, 60%) !default; +$color-danger-lighter: mix($brand-danger, white, 20%) !default; + +$brand-gradient: linear-gradient(152deg, #0CC7F0 0%, #087ECC 51%, #077AC9 55%, #0659B9 78%); + + +//== Grids +//## Used for Datagrid, Templategrid, Listview & Tables (see components folder) + +// Default Border Colors +$grid-border-color: $border-color-default !default; + +// Spacing +// Default +$grid-padding-top: 15px !default; +$grid-padding-right: 15px !default; +$grid-padding-bottom: 15px !default; +$grid-padding-left: 15px !default; + +// Listview +$listview-padding-top: 15px !default; +$listview-padding-right: 15px !default; +$listview-padding-bottom: 15px !default; +$listview-padding-left: 15px !default; + +// Background Colors +$grid-bg: #FFF !default; +$grid-bg-header: transparent !default; // Grid Headers +$grid-bg-hover: mix($grid-border-color, #FFF, 20%) !default; +$grid-bg-selected: mix($grid-border-color, #FFF, 30%) !default; +$grid-bg-selected-hover: mix($grid-border-color, #FFF, 50%) !default; + +// Striped Background Color +$grid-bg-striped: mix($grid-border-color, #FFF, 10%) !default; + +// Background Footer Color +$grid-footer-bg: $gray-primary !default; + +// Text Color +$grid-selected-color: $font-color-default !default; + +// Paging Colors +$grid-paging-bg: transparent !default; +$grid-paging-bg-hover: transparent !default; +$grid-paging-border-color: transparent !default; +$grid-paging-border-color-hover: transparent !default; +$grid-paging-color: $gray-light !default; +$grid-paging-color-hover: $brand-primary !default; + + + + +//== Tabs +//## Default variables for Tab Container Widget (used in components/tabcontainer) + +// Text Color +$tabs-color: $font-color-detail !default; +$tabs-color-active: $font-color-default !default; +$tabs-lined-color-active: $brand-primary !default; + +// Border Color +$tabs-border-color: $border-color-default !default; +$tabs-lined-border-color: $brand-primary !default; + +// Background Color +$tabs-bg: #FFF !default; +$tabs-bg-hover: lighten($tabs-border-color,5) !default; +$tabs-bg-active: $brand-primary !default; + + + + +//== Modals +//## Default Mendix Modal, Blocking Modal and Login Modal (used in components/modals) + +// Background Color +$modal-header-bg: transparent !default; + +// Border Color +$modal-header-border-color: $border-color-default !default; + +// Text Color +$modal-header-color: $font-color-default !default; + + + + +//== Dataview +//## Default variables for Dataview Widget (used in components/dataview) + +// Controls +$dataview-controls-bg: transparent !default; +$dataview-controls-border-color: $border-color-default !default; + +// Empty Message +$dataview-emptymessage-bg: $bg-color !default; +$dataview-emptymessage-color: $font-color-default !default; + + + + +//== Alerts +//## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) + +// Background Color +$alert-info-bg: $color-info-lighter !default; +$alert-success-bg: $color-success-lighter !default; +$alert-warning-bg: $color-warning-lighter !default; +$alert-danger-bg: $color-danger-lighter !default; + +// Text Color +$alert-info-color: $color-info-darker !default; +$alert-success-color: $color-success-darker !default; +$alert-warning-color: $color-warning-darker !default; +$alert-danger-color: $color-danger-darker !default; + +// Border Color +$alert-info-border-color: $color-info-dark !default; +$alert-success-border-color: $color-success-dark !default; +$alert-warning-border-color: $color-warning-dark !default; +$alert-danger-border-color: $color-danger-dark !default; + + + + +//== Labels +//## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels) + +// Background Color +$label-default-bg: $brand-default !default; +$label-primary-bg: $brand-primary !default; +$label-info-bg: $brand-info !default; +$label-success-bg: $brand-success !default; +$label-warning-bg: $brand-warning !default; +$label-danger-bg: $brand-danger !default; + +// Border Color +$label-default-border-color: $brand-default !default; +$label-primary-border-color: $brand-primary !default; +$label-info-border-color: $brand-info !default; +$label-success-border-color: $brand-success !default; +$label-warning-border-color: $brand-warning !default; +$label-danger-border-color: $brand-danger !default; + +// Text Color +$label-default-color: $font-color-default !default; +$label-primary-color: #FFF !default; +$label-info-color: #FFF !default; +$label-success-color: #FFF !default; +$label-warning-color: #FFF !default; +$label-danger-color: #FFF !default; + + + + +//== Groupbox +//## Default variables for Groupbox Widget (used in components/groupbox) + +// Background Color +$groupbox-default-bg: $brand-default !default; +$groupbox-inverse-bg: $brand-inverse !default; +$groupbox-primary-bg: $brand-primary !default; +$groupbox-info-bg: $brand-info !default; +$groupbox-success-bg: $brand-success !default; +$groupbox-warning-bg: $brand-warning !default; +$groupbox-danger-bg: $brand-danger !default; +$groupbox-white-bg: #FFF !default; + +// Text Color +$groupbox-default-color: $font-color-default !default; +$groupbox-inverse-color: #FFF !default; +$groupbox-primary-color: #FFF !default; +$groupbox-info-color: #FFF !default; +$groupbox-success-color: #FFF !default; +$groupbox-warning-color: #FFF !default; +$groupbox-danger-color: #FFF !default; +$groupbox-white-color: $font-color-default !default; + + + + +//== Callout (groupbox) Colors +//## Extended variables for Groupbox Widget (used in components/groupbox) + +// Text and Border Color +$callout-default-color: $font-color-default !default; +$callout-info-color: $brand-info !default; +$callout-success-color: $brand-success !default; +$callout-warning-color: $brand-warning !default; +$callout-danger-color: $brand-danger !default; + +// Background Color +$callout-default-bg: $color-default-lighter!default; +$callout-info-bg: $color-info-lighter !default; +$callout-success-bg: $color-success-lighter !default; +$callout-warning-bg: $color-warning-lighter !default; +$callout-danger-bg: $color-danger-lighter !default; + + + + + +//== Spacing +//## Advanced layout options (used in base/mixins/default-spacing) + +// Small spacing +$spacing-small: 5px !default; + +// Medium spacing +$spacing-medium: 15px !default; +$t-spacing-medium: 15px !default; +$m-spacing-medium: 15px !default; + +// Large spacing +$spacing-large: 30px !default; +$t-spacing-large: 30px !default; +$m-spacing-large: 15px !default; + +// Layout spacing +$layout-spacing-top: 30px !default; +$layout-spacing-right: 30px !default; +$layout-spacing-bottom: 30px !default; +$layout-spacing-left: 30px !default; + +$t-layout-spacing-top: 30px !default; +$t-layout-spacing-right: 30px !default; +$t-layout-spacing-bottom: 30px !default; +$t-layout-spacing-left: 30px !default; + +$m-layout-spacing-top: 15px !default; +$m-layout-spacing-right: 15px !default; +$m-layout-spacing-bottom: 15px !default; +$m-layout-spacing-left: 15px !default; + +// Combined layout spacing +$layout-spacing: $layout-spacing-top $layout-spacing-right $layout-spacing-bottom $layout-spacing-left !default; +$m-layout-spacing: $m-layout-spacing-top $m-layout-spacing-right $m-layout-spacing-bottom $m-layout-spacing-left !default; +$t-layout-spacing: $t-layout-spacing-top $t-layout-spacing-right $t-layout-spacing-bottom $t-layout-spacing-left !default; + +// Gutter size +$gutter-size: 15px !default; + + + + + +//== Tables +//## Table spacing options (used in components/tables) + +$padding-table-cell-top: 8px !default; +$padding-table-cell-bottom: 8px !default; +$padding-table-cell-left: 8px !default; +$padding-table-cell-right: 8px !default; + + + + +//== Media queries breakpoints +//## Define the breakpoints at which your layout will change, adapting to different screen sizes. + +// Extra small screen / phone Deprecated `$screen-xs` as of v3.0.1 +$screen-xs: 480px !default; + +// Small screen / tablet Deprecated `$screen-sm` as of v3.0.1 +$screen-sm: 768px !default; + +// Medium screen / desktop Deprecated `$screen-md` as of v3.0.1 +$screen-md: 992px !default; + +// Large screen / wide desktop Deprecated `$screen-lg` as of v3.0.1 +$screen-lg: 1200px !default; + +// So media queries don't overlap when required, provide a maximum (used for max-width) +$screen-xs-max: ($screen-sm - 1) !default; +$screen-sm-max: ($screen-md - 1) !default; +$screen-md-max: ($screen-lg - 1) !default; diff --git a/theme/styles/sass/lib/base/_animation.scss b/theme/styles/sass/lib/base/_animation.scss new file mode 100644 index 0000000..30248a7 --- /dev/null +++ b/theme/styles/sass/lib/base/_animation.scss @@ -0,0 +1,48 @@ +@keyframes slideInUp { + from { + visibility: visible; + transform: translate3d(0, 100%, 0); + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.animated { + animation-duration: 0.4s; + animation-fill-mode: both; +} + +.slideInUp { + animation-name: slideInUp; +} + +@keyframes slideInDown { + from { + visibility: visible; + transform: translate3d(0, -100%, 0); + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInDown { + animation-name: slideInDown; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.fadeIn { + animation-name: fadeIn; +} diff --git a/theme/styles/sass/lib/base/_base.scss b/theme/styles/sass/lib/base/_base.scss new file mode 100644 index 0000000..7705ed3 --- /dev/null +++ b/theme/styles/sass/lib/base/_base.scss @@ -0,0 +1,66 @@ +/* ========================================================================== + Base + + Default settings +========================================================================== */ + +html { + height: 100%; +} + +body { + min-height: 100%; + color: $font-color-default; + background-color: $bg-color; + font-family: $font-family-base; + font-size: $font-size-default; + font-weight: $font-weight-normal; + line-height: $line-height-base; +} + +a { + -webkit-transition: 0.25s; + -moz-transition: 0.25s; + -o-transition: 0.25s; + transition: 0.25s; + color: $link-color; + -webkit-backface-visibility: hidden; +} + +a:hover { + text-decoration: underline; + color: $link-hover-color; +} + +// Address `outline` inconsistency between Chrome and other browsers. +a:focus { + outline: thin dotted; +} + +// Improve readability when focused and also mouse hovered in all browsers +a:active, +a:hover { + outline: 0; +} + +// Removes large blue border in chrome on focus and active states +input:focus, +button:focus, +.mx-link:focus { + outline: 0; +} + +// Removes large blue border for tabindexes from widgets +div[tabindex] { + outline: 0; +} + +// Disabled State +.disabled, +[disabled] { + cursor: not-allowed; + opacity: 0.65; + -webkit-box-shadow: none; + box-shadow: none; + filter: alpha(opacity=65); +} diff --git a/theme/styles/sass/lib/base/_mixins.scss b/theme/styles/sass/lib/base/_mixins.scss new file mode 100644 index 0000000..eb03165 --- /dev/null +++ b/theme/styles/sass/lib/base/_mixins.scss @@ -0,0 +1,5 @@ +@import "mixins/animations"; +@import "mixins/spacing"; +@import "mixins/layout-spacing"; +@import "mixins/buttons"; +@import "mixins/groupbox"; diff --git a/theme/styles/sass/lib/base/_reset.scss b/theme/styles/sass/lib/base/_reset.scss new file mode 100644 index 0000000..c0b98a6 --- /dev/null +++ b/theme/styles/sass/lib/base/_reset.scss @@ -0,0 +1,31 @@ +// Basic styling Scroll container +.mx-scrollcontainer { + .mx-scrollcontainer-wrapper { + padding: 0; + // Convert width to max-width when in scroll container to make sure you dont get scrollbars + .mx-layoutgrid-fixed { + width: 100%; + margin: auto; + @media (min-width: $screen-sm) { + max-width: 750px; + } + @media (min-width: $screen-md) { + max-width: 970px; + } + @media (min-width: $screen-lg) { + max-width: 1170px; + } + } + } +} + +.mx-scrollcontainer .mx-placeholder { + width: 100%; + height: 100%; + .mx-layoutgrid { + @include layout-spacing($type: padding, $direction: all, $device: responsive); + .mx-layoutgrid { + padding: 0; + } + } +} diff --git a/theme/styles/sass/lib/base/mixins/_animations.scss b/theme/styles/sass/lib/base/mixins/_animations.scss new file mode 100644 index 0000000..6c07ccc --- /dev/null +++ b/theme/styles/sass/lib/base/mixins/_animations.scss @@ -0,0 +1,7 @@ +@mixin transition($style: initial, $delay: 0.1s, $duration: 0.2s, $property: all, $timing-fucntion: cubic-bezier(0.4, 0, 0.2, 1)) { + transition-delay: $delay; + transition-timing-function: $timing-fucntion; + transition-duration: $duration; + transition-property: $property; + transform-style: $style; +} diff --git a/theme/styles/sass/lib/base/mixins/_buttons.scss b/theme/styles/sass/lib/base/mixins/_buttons.scss new file mode 100644 index 0000000..6b492c9 --- /dev/null +++ b/theme/styles/sass/lib/base/mixins/_buttons.scss @@ -0,0 +1,61 @@ +@mixin button-variant($color, $background, $border, $hover) { + color: $color; + border-color: $border; + background-color: $background; + + &:hover, + &:focus, + &:active, + &.active, + .open > &.dropdown-toggle { + color: $color; + border-color: $hover; + background-color: $hover; + } + &:active, + &.active, + .open > &.dropdown-toggle { + background-image: none; + } + &.disabled, + &[disabled], + fieldset[disabled] { + &, + &:hover, + &:focus, + &:active, + &.active { + border-color: $border; + background-color: $background; + } + } + // Button bordered + &.btn-bordered { + background-color: transparent; + @if $color != $btn-default-color { + color: $border; + } + &:hover, + &:focus, + &:active, + &.active, + .open > &.dropdown-toggle { + color: $color; + border-color: $border; + background-color: $border; + } + } + // Button as link + &.btn-link { + text-decoration: none; + border-color: transparent; + background-color: transparent; + @if $color != $btn-default-color { + color: $background; + } + &:hover { + border-color: $btn-link-bg-hover; + background-color: $btn-link-bg-hover; + } + } +} diff --git a/theme/styles/sass/lib/base/mixins/_groupbox.scss b/theme/styles/sass/lib/base/mixins/_groupbox.scss new file mode 100644 index 0000000..0cb83bc --- /dev/null +++ b/theme/styles/sass/lib/base/mixins/_groupbox.scss @@ -0,0 +1,10 @@ +@mixin groupbox-variant($color, $background) { + > .mx-groupbox-header { + color: $color; + border-color: $background; + background: $background; + } + > .mx-groupbox-body { + border-color: $background; + } +} diff --git a/theme/styles/sass/lib/base/mixins/_layout-spacing.scss b/theme/styles/sass/lib/base/mixins/_layout-spacing.scss new file mode 100644 index 0000000..04116ef --- /dev/null +++ b/theme/styles/sass/lib/base/mixins/_layout-spacing.scss @@ -0,0 +1,83 @@ +@mixin layout-spacing ($type: padding, $direction: all, $device: responsive, $is_important: false) { + $suffix: ""; + @if $is_important != false { + $suffix: " !important"; + } + @if $device==responsive { + @if $direction==all { + @media (max-width: $screen-xs-max) { + #{$type}: #{$m-layout-spacing}#{$suffix}; + } + @media (min-width: $screen-sm) { + #{$type}: #{$t-layout-spacing}#{$suffix}; + } + @media (min-width: $screen-md) { + #{$type}: #{$layout-spacing}#{$suffix}; + } + } @else if $direction==top { + @media (max-width: $screen-xs-max) { + #{$type}-top: #{$m-layout-spacing-top}#{$suffix}; + } + @media (min-width: $screen-sm) { + #{$type}-top: #{$t-layout-spacing-top}#{$suffix}; + } + @media (min-width: $screen-md) { + #{$type}-top: #{$layout-spacing-top}#{$suffix}; + } + } @else if $direction==right { + @media (max-width: $screen-xs-max) { + #{$type}-right: #{$m-layout-spacing-right}#{$suffix}; + } + @media (min-width: $screen-sm) { + #{$type}-right: #{$t-layout-spacing-right}#{$suffix}; + } + @media (min-width: $screen-md) { + #{$type}-right: #{$layout-spacing-right}#{$suffix}; + } + } @else if $direction==bottom { + @media (max-width: $screen-xs-max) { + #{$type}-bottom: #{$m-layout-spacing-bottom}#{$suffix}; + } + @media (min-width: $screen-sm) { + #{$type}-bottom: #{$t-layout-spacing-bottom}#{$suffix}; + } + @media (min-width: $screen-md) { + #{$type}-bottom: #{$layout-spacing-bottom}#{$suffix}; + } + } @else if $direction==left { + @media (max-width: $screen-xs-max) { + #{$type}-left: #{$m-layout-spacing-left}#{$suffix}; + } + @media (min-width: $screen-sm) { + #{$type}-left: #{$t-layout-spacing-left}#{$suffix}; + } + @media (min-width: $screen-md) { + #{$type}-left: #{$layout-spacing-left}#{$suffix}; + } + } + } @else if $device==tablet { + @if $direction==all { + #{$type}: #{$t-layout-spacing}#{$suffix}; + } @else if $direction==top { + #{$type}-top: #{$t-layout-spacing-top}#{$suffix}; + } @else if $direction==right { + #{$type}-right: #{$t-layout-spacing-right}#{$suffix}; + } @else if $direction==bottom { + #{$type}-bottom: #{$t-layout-spacing-bottom}#{$suffix}; + } @else if $direction==left { + #{$type}-left: #{$t-layout-spacing-left}#{$suffix}; + } + } @else if $device==mobile { + @if $direction==all { + #{$type}: #{$m-layout-spacing}#{$suffix}; + } @else if $direction==top { + #{$type}-top: #{$m-layout-spacing-top}#{$suffix}; + } @else if $direction==right { + #{$type}-right: #{$m-layout-spacing-right}#{$suffix}; + } @else if $direction==bottom { + #{$type}-bottom: #{$m-layout-spacing-bottom}#{$suffix}; + } @else if $direction==left { + #{$type}-left: #{$m-layout-spacing-left}#{$suffix}; + } + } +} diff --git a/theme/styles/sass/lib/base/mixins/_spacing.scss b/theme/styles/sass/lib/base/mixins/_spacing.scss new file mode 100644 index 0000000..51b0cae --- /dev/null +++ b/theme/styles/sass/lib/base/mixins/_spacing.scss @@ -0,0 +1,59 @@ +@mixin get-responsive-spacing-large ($type: padding, $direction: all, $is_important: false) { + $suffix: ""; + $dash: "-"; // Needed for the Gonzales PE version: 3.4.7 compiler (used by the Webmodeler) + + @if $is_important != false { + $suffix: " !important"; + } + @if $direction==all { + @media (max-width: $screen-xs-max) { + #{$type}: #{$m-spacing-large}#{$suffix}; + } + @media (min-width: $screen-sm) { + #{$type}: #{$t-spacing-large}#{$suffix}; + } + @media (min-width: $screen-md) { + #{$type}: #{$spacing-large}#{$suffix}; + } + } @else { + @media (max-width: $screen-xs-max) { + #{$type}#{$dash}#{$direction}: #{$m-spacing-large}#{$suffix}; + } + @media (min-width: $screen-sm) { + #{$type}#{$dash}#{$direction}: #{$t-spacing-large}#{$suffix}; + } + @media (min-width: $screen-md) { + #{$type}#{$dash}#{$direction}: #{$spacing-large}#{$suffix}; + } + } +} + +@mixin get-responsive-spacing-medium ($type: padding, $direction: all, $is_important: false) { + $suffix: ""; + $dash: "-"; // Needed for the Gonzales PE version: 3.4.7 compiler (used by the Webmodeler) + + @if $is_important != false { + $suffix: " !important"; + } + @if $direction==all { + @media (max-width: $screen-xs-max) { + #{$type}: #{$m-spacing-medium}#{$suffix}; + } + @media (min-width: $screen-sm) { + #{$type}: #{$t-spacing-medium}#{$suffix}; + } + @media (min-width: $screen-md) { + #{$type}: #{$spacing-medium}#{$suffix}; + } + } @else { + @media (max-width: $screen-xs-max) { + #{$type}#{$dash}#{$direction}: #{$m-spacing-medium}#{$suffix}; + } + @media (min-width: $screen-sm) { + #{$type}#{$dash}#{$direction}: #{$t-spacing-medium}#{$suffix}; + } + @media (min-width: $screen-md) { + #{$type}#{$dash}#{$direction}: #{$spacing-medium}#{$suffix}; + } + } +} diff --git a/theme/styles/sass/lib/buildingblocks/_alignment-block.scss b/theme/styles/sass/lib/buildingblocks/_alignment-block.scss new file mode 100644 index 0000000..3cec3e1 --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_alignment-block.scss @@ -0,0 +1,24 @@ +/* ========================================================================== + Alignment Blocks + +========================================================================== */ +.flexcontainer { + display: flex; + overflow: hidden; + flex: 1; + flex-direction: row; + .flexitem { + margin-right: $gutter-size; + &:last-child { + margin-right: 0; + } + } + .flexitem-main { + overflow: hidden; + flex: 1; + } +} + +.flex-center { + align-items: center; +} diff --git a/theme/styles/sass/lib/buildingblocks/_breadcrumb.scss b/theme/styles/sass/lib/buildingblocks/_breadcrumb.scss new file mode 100644 index 0000000..785ae8e --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_breadcrumb.scss @@ -0,0 +1,44 @@ +/* ========================================================================== + Breadcrumbs + +========================================================================== */ +.breadcrumb { + //reset + margin: 0; + padding: 0; + border-radius: 0; + background-color: transparent; + font-size: $font-size-default; +} + +//== Elements +//-------------------------------------------------------------------------------------------------------------------// +.breadcrumb-item { + display: inline-block; + margin: 0; + &:last-child { + color: $font-base-color; + a { + text-decoration: none; + } + } +} +.breadcrumb-item + .breadcrumb-item { + &::before { + display: inline-block; + padding-right: 10px; + padding-left: 10px; + content: "/"; + color: $gray-light; + } +} + +//== Variations +//-------------------------------------------------------------------------------------------------------------------// +.breadcrumb-large { + font-size: $font-size-h3; +} +.breadcrumb-underline { + padding-bottom: $gutter-size; + border-bottom: 1px solid $border-color-default; +} diff --git a/theme/styles/sass/lib/buildingblocks/_card.scss b/theme/styles/sass/lib/buildingblocks/_card.scss new file mode 100644 index 0000000..0fc7ee1 --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_card.scss @@ -0,0 +1,264 @@ +/* ========================================================================== + Cards + +========================================================================== */ +.card { + padding: 30px; + border: 1px solid $border-color-default; + border-radius: $border-radius-default; + background-color: #FFFFFF;; +} + +//== Elements +//-------------------------------------------------------------------------------------------------------------------// +.card-title { + margin-top: 0; +} + +//== Variations +//-------------------------------------------------------------------------------------------------------------------// +.cardaction { + .card-image { + .glyphicon { + font-size: 58px; + } + } +} + +.cardmetrics { + .card-title { + margin-bottom: 0; + } + .figurecontent { + } + .card-image { + width: 100px; + height: auto; + // If btn + &.btn { + width: 100px; + height: 100px; + padding: 0; + cursor: default; + pointer-events: none; + font-size: 40px; + } + } + .card-counter { + margin: 0; + font-size: 64px; + } + .card-morebutton { + } +} + +.cardinfo { + .card-text { + margin-bottom: $spacing-large; + } +} +// Used in card info +.textwithicon { + overflow: hidden; + max-width: 100%; + margin-bottom: 15px; + text-overflow: ellipsis; + .textwithicon-icon, + .textwithicon-text { + display: inline-block; + vertical-align: middle; + } + .textwithicon-icon { + margin-right: 15px; + padding: 0; + color: $brand-primary; // class .text-primary + border: 0; + background: transparent; + font-size: 23px; + } + .textwithicon-text { + } +} + +// Used in card info +.socialprofiles { + .socialprofiles-title { + display: block; + margin-bottom: 10px; + font-weight: bold; // class text-bold + } + .socialprofiles-button { + width: 24px; + height: 24px; + margin-right: 15px; + padding: 0; + border-radius: 24px; + .glyphicon { + margin: 0; + } + } +} + + +.cardtabs { + padding: 0; + .cardtabs-tabs { + margin: 0; + ul.mx-tabcontainer-tabs { + display: flex; + margin: 0; + background-color: mix($tabs-border-color, #FFFFFF, 20%); + + li { + flex: 1 1 auto; + text-align: center; + a, + a:hover, + a:focus { + border-top-width: 0; + border-right-width: 1px; + border-left-width: 0; + } + &:first-child a { + border-radius: $border-radius-default 0 0 0; + } + &:last-child a { + border-radius: 0 $border-radius-default 0 0; + } + } + } + .mx-tabcontainer-pane { + @include get-responsive-spacing-large($type: padding, $direction: all); + } + } +} + +.carduser { + .card-controls { + } + .card-title { + } + .card-detail { + } +} + +.cardgraph { + .card-title { + } +} + +.cardchart { + .card-title { + } +} + +.cardproduct { + padding: 0; + .cardproduct-header { + position: relative; + overflow: hidden; + height: 200px; + .card-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: auto; + } + .cardproduct-overlay { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 20px 30px; + background: rgba(0, 0, 0, 0.60); + + .cardproduct-overlay-category, + .cardproduct-overlay-title { + margin: 0; + color: #FFFFFF; + } + } + } + .cardproduct-footer { + position: relative; + padding: 20px 30px; + .cardproduct-name { + margin: 0; + } + .widget-star-rating-font { + font-size: 20px; + } + .cardproduct-btn { + position: absolute; + top: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + height: 100%; + padding: 30px; + border-left: 1px solid $border-color-default; + } + } +} + +.cardproduct2 { + @extend .cardproduct; + .cardproduct-header { + &::after { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + padding: 20px 30px; + content: ""; + background: rgba(0, 0, 0, 0.60); + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 2%, rgba(0, 0, 0, 0.99) 99%, rgba(0, 0, 0, 1) 100%); + background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 2%, rgba(0, 0, 0, 0.99) 99%, rgba(0, 0, 0, 1) 100%); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 2%, rgba(0, 0, 0, 0.99) 99%, rgba(0, 0, 0, 1) 100%); + } + } +} + + +.cardproduct3 { + @extend .cardproduct; + + .cardproduct-header { + height: 320px; + img { + width: 100%; + height: 100%; + object-fit: cover; + } + .cardproduct-overlay { + min-height: 100px; + padding: 30px; + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 8%, rgba(0, 0, 0, 0.99) 121%, rgba(0, 0, 0, 1) 100%); + background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 8%, rgba(0, 0, 0, 0.99) 121%, rgba(0, 0, 0, 1) 100%); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 8%, rgba(0, 0, 0, 0.99) 121%, rgba(0, 0, 0, 1) 100%); + font-size: $font-base-size; + } + } +} + +.cardshopping { +} + +.carduserlist { +} + +.cardstatus { + padding: 20px; + .card-linkicon { + font-size: 30px; + } + .cardstatus-status { + margin-bottom: 5px; + } +} + +.cardpayment { +} diff --git a/theme/styles/sass/lib/buildingblocks/_controlgroup.scss b/theme/styles/sass/lib/buildingblocks/_controlgroup.scss new file mode 100644 index 0000000..9ce1f84 --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_controlgroup.scss @@ -0,0 +1,25 @@ +/* ========================================================================== + Control Group + + A group of buttons next to eachother +========================================================================== */ +.controlgroup { + .btn, + .btn-group { + margin-right: $spacing-small; + margin-bottom: $spacing-small; + + &:last-child { + margin-right: 0; + } + .btn { + margin-right: 0; + margin-bottom: 0; + } + } + .btn-group { + .btn + .btn { + margin-left: -1px; + } + } +} diff --git a/theme/styles/sass/lib/buildingblocks/_formblock.scss b/theme/styles/sass/lib/buildingblocks/_formblock.scss new file mode 100644 index 0000000..9ecfc2f --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_formblock.scss @@ -0,0 +1,15 @@ +/* ========================================================================== + Form Block + + Used in default forms +========================================================================== */ +.formblock { +} + +//== Elements +//-------------------------------------------------------------------------------------------------------------------// +.formblock-title { + margin-bottom: $gutter-size; + padding-bottom: $gutter-size; + border-bottom: 1px solid $border-color-default; +} diff --git a/theme/styles/sass/lib/buildingblocks/_heroheader.scss b/theme/styles/sass/lib/buildingblocks/_heroheader.scss new file mode 100644 index 0000000..a325355 --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_heroheader.scss @@ -0,0 +1,91 @@ +/* ========================================================================== + Pageheader + +========================================================================== */ +.heroheader { + border-bottom: 1px solid $border-color-default; + background: $header-bg-color; +} + +//== Elements +//-------------------------------------------------------------------------------------------------------------------// +.heroheader-title { + margin: 0 0 10px 0; +} +.heroheader-subtitle { + margin: 0; + padding: 0 15px; + &::before { + display: block; + max-width: 330px; + height: 1px; + margin: auto auto 10px auto; + content: ""; + background-color: lighten($border-color-default, 4); + } +} + +//== Variations +//-------------------------------------------------------------------------------------------------------------------// +.heroheader1 { + background-image: $brand-gradient; + + .heroheader-title { + margin-bottom: 10px; + color: #FFFFFF; + } + .heroheader-subtitle { + padding: 0; + color: #FFFFFF; + &::before { + display: none; + } + } +} + +.heroheadermap { + .heroheadermap-map { + height: 350px; + } + .heroheadermap-controls { + background: $header-bg-color; + } +} + +.heroheaderproduct { + position: relative; + overflow: hidden; + height: 300px; + background-color: #000000; + .heroheaderproduct-backgroundimage { + position: absolute; + z-index: 0; + top: 0; + width: 100%; + opacity: 0.7; + filter: blur(5px); + } + .heroheaderproduct-overlay { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } +} + +.heroheaderexpense { + .heroheaderexpense-title { + font-size: 72px; + } + .heroheaderexpense-type { + align-items: center; + &::before { + flex-grow: 1; + height: 1px; + margin-right: 10px; + content: ""; + background-color: #D2D2D2; + } + } +} diff --git a/theme/styles/sass/lib/buildingblocks/_list.scss b/theme/styles/sass/lib/buildingblocks/_list.scss new file mode 100644 index 0000000..359bf1f --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_list.scss @@ -0,0 +1,13 @@ +/* ========================================================================== + Lists + + Pre-styled listviews with content +========================================================================== */ +.list1 { +} +.list2 { +} +.list3 { +} +.list4 { +} diff --git a/theme/styles/sass/lib/buildingblocks/_master-detail.scss b/theme/styles/sass/lib/buildingblocks/_master-detail.scss new file mode 100644 index 0000000..411487c --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_master-detail.scss @@ -0,0 +1,51 @@ +/* ========================================================================== + Master Detail + + A list with a listening dataview +========================================================================== */ +.masterdetail { + position: relative; + @media (min-width: $screen-md) { + .mx-layoutgrid { + padding: 0 $gutter-size !important; + } + } + .masterdetail-master { + .controlgroup { + margin-bottom: $gutter-size; + } + @media (min-width: $screen-md) { + position: absolute; + top: 0; + bottom: 0; + left: 0; + padding: 0; + border-right: 1px solid $border-color-default; + + .mx-listview-searchbar { + margin: $gutter-size; + } + .controlgroup { + margin: 0; + padding: $gutter-size; + border-bottom: 1px solid $border-color-default; + } + } + } + .masterdetail-detail { + @media (min-width: $screen-md) { + @include layout-spacing($type: padding, $direction: all, $device: responsive); + } + } +} + +//== Variations +//-------------------------------------------------------------------------------------------------------------------// +.masterdetailvertical { + .masterdetail-master { + @include layout-spacing($type: margin, $direction: bottom, $device: responsive); + } + .masterdetail-detail { + @include layout-spacing($type: padding, $direction: top, $device: responsive); + } +} diff --git a/theme/styles/sass/lib/buildingblocks/_pageblocks.scss b/theme/styles/sass/lib/buildingblocks/_pageblocks.scss new file mode 100644 index 0000000..d8c33bc --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_pageblocks.scss @@ -0,0 +1,27 @@ +/* ========================================================================== + Full page blocks + + Blocks that take up the full width and height +========================================================================== */ + +.fullpageblock { + position: relative; + height: 100%; + min-height: 100%; + + // Helper to make it fullheight + .fullheight { + height: 100% !important; + & > .mx-dataview-content { + height: inherit !important; + } + } + + .fullpage-overlay { + position: absolute; + z-index: 10; + bottom: 0; + left: 0; + width: 100%; + } +} diff --git a/theme/styles/sass/lib/buildingblocks/_pageheader.scss b/theme/styles/sass/lib/buildingblocks/_pageheader.scss new file mode 100644 index 0000000..3425161 --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_pageheader.scss @@ -0,0 +1,59 @@ +/* ========================================================================== + Pageheader +========================================================================== */ + +//== Default +//-------------------------------------------------------------------------------------------------------------------// +.pageheader { + border-bottom: 1px solid $border-color-default; + background: $header-bg-color; +} + +// Check if it is part of a inner layoutgrid +.mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader { + @include get-responsive-spacing-large($type: margin, $direction: bottom); + @include get-responsive-spacing-large($type: padding, $direction: bottom); + background: transparent; +} + +//== Elements +//-------------------------------------------------------------------------------------------------------------------// +.pageheader-type { + margin: 0; +} + +.pageheader-title { + margin: 0; +} + +.pageheader-subtitle { + margin: 0; +} + +//== Variations +//-------------------------------------------------------------------------------------------------------------------// +.pageheaderwithcontrols { + .controlgroup { + } +} + +.pageheaderwithimage { + .pageheader-image { + } + .figurecontent { + } +} + +.pageheaderwithimageandcontrols { +} + +.pageheaderwithsearch { + .pageheader-title { + margin-bottom: 1em; + } +} + +.pageheaderwithbreadcrumb { + .breadcrumb { + } +} diff --git a/theme/styles/sass/lib/buildingblocks/_timeline.scss b/theme/styles/sass/lib/buildingblocks/_timeline.scss new file mode 100644 index 0000000..af18af4 --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_timeline.scss @@ -0,0 +1,46 @@ +// Timeline +.timeline { + .timeline-header { + display: inline-block; + width: 110px; + padding: 8px; + text-align: center; + border: 1px solid $border-color-default; + border-radius: 30px; + } +} +.timeline-itemwrapper.mx-listview { + margin-bottom: 0; + margin-left: 55px; + padding: $spacing-large 0; + border-left: 1px solid $border-color-default; + & > ul > .mx-listview-item { + position: relative; + padding-left: ($gutter-size * 2); + + &::before { + position: absolute; + top: 5px; + left: -5px; + display: block; + width: 10px; + height: 10px; + content: ""; + border-radius: 50%; + background-color: $brand-primary; + } + } + .mx-listview-item + .mx-listview-item { + margin-top: $spacing-large; + } +} + +//== Variations +//-------------------------------------------------------------------------------------------------------------------// +.timeline2 { + .timeline-itemwrapper.mx-listview { + & > ul > .mx-listview-item { + padding-left: $gutter-size; + } + } +} diff --git a/theme/styles/sass/lib/buildingblocks/_userprofile.scss b/theme/styles/sass/lib/buildingblocks/_userprofile.scss new file mode 100644 index 0000000..c4544a9 --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_userprofile.scss @@ -0,0 +1,12 @@ +/* ========================================================================== + User profile blocks + - +========================================================================== */ +.userprofile { + .userprofile-img { + } + .userprofile-title { + } + .userprofile-subtitle { + } +} \ No newline at end of file diff --git a/theme/styles/sass/lib/buildingblocks/_wizard.scss b/theme/styles/sass/lib/buildingblocks/_wizard.scss new file mode 100644 index 0000000..37df48d --- /dev/null +++ b/theme/styles/sass/lib/buildingblocks/_wizard.scss @@ -0,0 +1,137 @@ +$wizard-step-number-size: 60px; +$wizard-step-height: 50px; + +.wizard { + display: flex; + justify-content: space-between; + .wizard-step { + position: relative; + width: 100%; + text-align: center; + &::before { + position: absolute; + z-index: -1; + top: $wizard-step-number-size / 2; + display: block; + width: 100%; + height: 2px; + content: ""; + background-color: $border-color-default; + } + .wizard-step-number { + width: $wizard-step-number-size; + height: $wizard-step-number-size; + border-color: $border-color-default; + border-radius: 50%; + background-color: #FFFFFF; + font-size: 20px; + } + .wizard-step-text { + display: block; + margin-top: 15px; + } + } + + + // States + .wizard-step-active { + .wizard-step-number { + color: #FFFFFF; + border-color: $brand-primary; + background-color: $brand-primary; + } + .wizard-step-text { + color: $brand-primary; + } + } + .wizard-step-visited { + .wizard-step-number { + color: #FFFFFF; + border-color: $brand-success; + background-color: $brand-success; + } + .wizard-step-text { + } + } +} + +.wizardprogress { + display: flex; + justify-content: space-between; + + .wizard-step-text { + width: 100%; + } + + .wizard-step { + position: relative; + width: 100%; + height: $wizard-step-height; + margin-left: 0 - ($wizard-step-height / 2); + padding-left: ($wizard-step-height / 2); + border: 1px solid $border-color-default; + background: #FFFFFF; + + a { + display: block; + overflow: hidden; + width: 100%; + height: 100%; + padding: 14px; + white-space: nowrap; + text-decoration: none; + text-overflow: ellipsis; + color: $font-color-default; + } + &::before, + &::after { + position: absolute; + z-index: 1; + left: 100%; + margin-left: 0 - ($wizard-step-height / 2); + content: " "; + border-style: solid; + border-color: transparent; + } + &::after { + top: 1px; + border-width: (($wizard-step-height / 2) - 1); + border-left-color: #FFFFFF; + } + &::before { + top: 0; + border-width: $wizard-step-height / 2; + border-left-color: $border-color-default; + } + + &:first-child { + margin-left: 0; + padding-left: 0; + border-radius: 5px 0 0 5px; + } + + &:last-child { + border-radius: 0 5px 5px 0; + &::before, + &::after { + display: none; + } + } + } + // States + .wizard-step-active { + background: $brand-primary; + a { + text-decoration: none; + color: #FFFFFF; + } + &::after { + border-left-color: $brand-primary; + } + } + .wizard-step-visited { + a { + color: $link-color; + } + } +} diff --git a/theme/styles/sass/lib/components/_alerts.scss b/theme/styles/sass/lib/components/_alerts.scss new file mode 100644 index 0000000..094cb98 --- /dev/null +++ b/theme/styles/sass/lib/components/_alerts.scss @@ -0,0 +1,52 @@ +/* ========================================================================== + Alerts + + Default Bootstrap Alert boxes. Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages +========================================================================== */ + +.alert { + margin-top: 0; // want to align it with padding of a page + padding: 15px; + border: 0; + border-radius: 4px; +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// +.alert-bordered { + border: 1px solid; +} + +// Color variations +.alert-success { + color: $alert-success-color; + border-color: $alert-success-border-color; + background-color: $alert-success-bg; +} + +.alert-info { + color: $alert-info-color; + border-color: $alert-info-border-color; + background-color: $alert-info-bg; +} + +.alert-warning { + color: $alert-warning-color; + border-color: $alert-warning-border-color; + background-color: $alert-warning-bg; +} + +.alert-danger { + color: $alert-danger-color; + border-color: $alert-danger-border-color; + background-color: $alert-danger-bg; +} + +//== State +//## Styling when component is in certain state +//-------------------------------------------------------------------------------------------------------------------// +.has-error .alert { + margin-top: 8px; + margin-bottom: 0; +} diff --git a/theme/styles/sass/lib/components/_backgrounds.scss b/theme/styles/sass/lib/components/_backgrounds.scss new file mode 100644 index 0000000..289e82d --- /dev/null +++ b/theme/styles/sass/lib/components/_backgrounds.scss @@ -0,0 +1,157 @@ +/* ========================================================================== + Backgrounds + + Different background components, all managed by variables +========================================================================== */ + +.background-main { + background-color: $bg-color !important; +} + +.background-secondary { + background-color: $bg-color-secondary !important; +} + +.background-default { + background-color: $brand-default !important; +} + +.background-default-darker { + background-color: $color-default-darker !important; +} + +.background-default-dark { + background-color: $color-default-dark !important; +} + +.background-default-light { + background-color: $color-default-light !important; +} + +.background-default-lighter { + background-color: $color-default-lighter !important; +} + +.background-inverse { + background-color: $brand-inverse !important; +} + +.background-inverse-darker { + background-color: $color-inverse-darker !important; +} + +.background-inverse-dark { + background-color: $color-inverse-dark !important; +} + +.background-inverse-light { + background-color: $color-inverse-light !important; +} + +.background-inverse-lighter { + background-color: $color-inverse-lighter !important; +} + +.background-primary { + background-color: $brand-primary !important; +} + +.background-primary-darker { + background-color: $color-primary-darker !important; +} + +.background-primary-dark { + background-color: $color-primary-dark !important; +} + +.background-primary-light { + background-color: $color-primary-light !important; +} + +.background-primary-lighter { + background-color: $color-primary-lighter !important; +} + +.background-info { + background-color: $brand-info !important; +} + +.background-info-darker { + background-color: $color-info-darker !important; +} + +.background-info-dark { + background-color: $color-info-dark !important; +} + +.background-info-light { + background-color: $color-info-light !important; +} + +.background-info-lighter { + background-color: $color-info-lighter !important; +} + +.background-success { + background-color: $brand-success !important; +} + +.background-success-darker { + background-color: $color-success-darker !important; +} + +.background-success-dark { + background-color: $color-success-dark !important; +} + +.background-success-light { + background-color: $color-success-light !important; +} + +.background-success-lighter { + background-color: $color-success-lighter !important; +} + +.background-warning { + background-color: $brand-warning !important; +} + +.background-warning-darker { + background-color: $color-warning-darker !important; +} + +.background-warning-dark { + background-color: $color-warning-dark !important; +} + +.background-warning-light { + background-color: $color-warning-light !important; +} + +.background-warning-lighter { + background-color: $color-warning-lighter !important; +} + +.background-danger { + background-color: $brand-danger !important; +} + +.background-danger-darker { + background-color: $color-danger-darker !important; +} + +.background-danger-dark { + background-color: $color-danger-dark !important; +} + +.background-danger-light { + background-color: $color-danger-light !important; +} + +.background-danger-lighter { + background-color: $color-danger-lighter !important; +} + +.background-brand-gradient { + background-image: $brand-gradient; +} diff --git a/theme/styles/sass/lib/components/_buttons.scss b/theme/styles/sass/lib/components/_buttons.scss new file mode 100644 index 0000000..110cb2f --- /dev/null +++ b/theme/styles/sass/lib/components/_buttons.scss @@ -0,0 +1,176 @@ +/* ========================================================================== + Buttons + + Default Bootstrap and Mendix Buttons +========================================================================== */ + +.btn, +.mx-button { + display: inline-block; + margin-bottom: 0; + padding: 0.6em 1em; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + text-align: center; + vertical-align: middle; + white-space: nowrap; + color: $btn-default-color; + border: 1px solid transparent; + border-radius: $btn-border-radius; + background-color: $btn-default-bg; + background-image: none; + box-shadow: none; + text-shadow: none; + font-size: $btn-font-size; + line-height: $line-height-base; + + &:hover, + &:focus, + &:active { + outline: none; + box-shadow: none; + } + + + @if $btn-bordered != false { + @extend .btn-bordered; + } +} + +// Mendix button link +.mx-link { + padding: 0; + color: $link-color; + a { + color: inherit; + } +} + +// Images and icons in buttons +.btn, +.mx-button, +.mx-link { + img { + //height: auto; // MXUI override who set the height on 16px default + height: $font-size-default + 4px; + margin-top: -1px; + margin-right: 5px; + } +} + +// IE 8 only (mxui overwrites) +.dj_ie8 .mx-link { + margin-right: 0; + white-space: normal; +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// +// Color variations +.btn, +.btn-default { + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border-color, $btn-default-bg-hover); +} + +.btn-primary { + @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color, $btn-primary-bg-hover); +} + +.btn-inverse { + @include button-variant($btn-inverse-color, $btn-inverse-bg, $btn-inverse-border-color, $btn-inverse-bg-hover); +} + +.btn-success { + @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color, $btn-success-bg-hover); +} + +.btn-info { + @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color, $btn-info-bg-hover); +} + +.btn-warning { + @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color, $btn-warning-bg-hover); +} + +.btn-danger { + @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color, $btn-danger-bg-hover); +} + + +// Button Sizes +.btn-lg { + font-size: $font-size-large; + img { + height: calc($font-size-small + 4px); + } +} + +.btn-sm { + font-size: $font-size-small; + img { + height: calc($font-size-small + 4px); + } +} + +// Button Image +.btn-image { + padding: 0; + vertical-align: middle; + border-style: none; + background-color: transparent; + img { + display: block; // or else the button doesn't get a width + height: auto; // Image set height + } + &:hover, + &:focus { + background-color: transparent; + } +} + +// Icon buttons +.btn-icon { + & > img, + & > .glyphicon { + margin: 0; + } +} +.btn-icon-right { + & > img, + & > .glyphicon { + float: right; + margin-left: 5px; + } +} +.btn-icon-top { + padding-right: 0; + padding-left: 0; + & > img, + & > .glyphicon { + display: block; + margin: 0 0 5px 0; + } +} + +//== Phone specific +//-------------------------------------------------------------------------------------------------------------------// +.profile-phone { + .btn, + .mx-link { + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + transition: all 0.2s; + &:active { + -webkit-transform: translateY(1px); + transform: translateY(1px); + } + } +} diff --git a/theme/styles/sass/lib/components/_datagrids.scss b/theme/styles/sass/lib/components/_datagrids.scss new file mode 100644 index 0000000..5f3e241 --- /dev/null +++ b/theme/styles/sass/lib/components/_datagrids.scss @@ -0,0 +1,215 @@ +/* ========================================================================== + Datagrid Default + + Default Mendix Datagrid Widget. The datagrid shows a list of objects in a grid +========================================================================== */ + +.mx-datagrid { + .mx-datagrid-head-table { + border-width: 0; + background-color: transparent; + /* Table header */ + th { + border-style: solid; + border-color: $grid-border-color; + border-top-width: 0; + border-right: 0; + border-bottom-width: 1px; + border-left: 0; + background-color: $grid-bg-header; + } + .mx-datagrid-head-wrapper { + padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + vertical-align: middle; + .mx-datagrid-head-caption { + white-space: normal; + } + } + } + .mx-datagrid-body-table { + border-width: 0; + /* Table Body */ + .mx-datagrid-body tr { + td { + padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + vertical-align: middle; + border-width: 0; + border-color: $grid-border-color; + border-bottom-width: 1px; + border-bottom-style: solid; + background-color: $grid-bg; + &:focus { + outline: none; + } + /* Text without spaces */ + .mx-datagrid-data-wrapper { + text-overflow: ellipsis; + } + } + &.selected td, + &.selected:hover td { + color: $grid-selected-color; + background-color: $grid-bg-selected !important; + } + } + /* Table Footer */ + .mx-datagrid-foot { + > tr > th { + padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + border-width: 0; + background-color: $grid-footer-bg; + } + > tr > td { + padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + border-width: 0; + background-color: $grid-bg; + font-weight: $font-weight-bold; + } + } + & *:focus { + outline: 0; + } + } +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// +// Striped style +.datagrid-striped.mx-datagrid { + .mx-datagrid-head-table { + th { + border-width: 0; + } + } + .mx-datagrid-body-table { + .mx-datagrid-body tr { + td { + border-top-width: 0; + } + &:nth-child(odd) td { + background-color: $grid-bg-striped; + } + } + } +} + +// Bordered style +.datagrid-bordered.mx-datagrid { + .mx-datagrid-head-table { + th { + border: 1px solid $grid-border-color; + border-bottom-width: 1px; + } + } + .mx-datagrid-body-table { + border: 1px solid; + .mx-datagrid-body tr { + td { + border: 1px solid $grid-border-color; + } + } + } + .mx-datagrid-foot { + > tr > th { + border-width: 0; + background-color: $grid-footer-bg; + } + > tr > td { + border-width: 1px; + } + } +} + +// Transparent style so you can see the background +.datagrid-transparent.mx-datagrid { + .mx-datagrid-head-table { + background-color: transparent; + } + .mx-datagrid-body-table { + .mx-datagrid-body tr { + &:nth-of-type(odd) { + background-color: transparent; + } + td { + background-color: transparent; + } + } + } +} + +// Hover style activated +.datagrid-hover.mx-datagrid { + .mx-datagrid-body-table { + .mx-datagrid-body tr { + &:hover td { + background-color: $grid-bg-hover !important; + } + &.selected:hover td { + background-color: $grid-bg-selected-hover !important; + } + } + } +} + +// Datagrid Row Sizes +.datagrid-lg.mx-datagrid { + .mx-datagrid-head-table { + .mx-datagrid-head-wrapper { + padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2) ($grid-padding-left * 2); + } + } + .mx-datagrid-body-table { + .mx-datagrid-body tr { + td { + padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2) ($grid-padding-left * 2); + } + } + } +} + +.datagrid-sm.mx-datagrid { + .mx-datagrid-head-table { + .mx-datagrid-head-wrapper { + padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2) ($grid-padding-left / 2); + } + } + .mx-datagrid-body-table { + .mx-datagrid-body tr { + td { + padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2) (grid-padding-left/ 2); + } + } + } +} + +// Datagrid Full Search +// Default Mendix Datagrid Widget with adjusted search field. Only 1 search field is allowed +.datagrid-fullsearch.mx-grid { + .mx-grid-search-button { + @extend .btn-primary; + } + .mx-grid-reset-button { + display: none; + } + .mx-grid-search-item { + display: block; + } + .mx-grid-search-label { + display: none; + } + .mx-grid-searchbar { + .mx-grid-search-controls { + position: absolute; + right: 0; + } + .mx-grid-search-input { + width: 80%; + padding-left: 0; + .form-control { + height: 35px; + font-size: 12px; + } + } + } +} diff --git a/theme/styles/sass/lib/components/_dataview.scss b/theme/styles/sass/lib/components/_dataview.scss new file mode 100644 index 0000000..7de16a7 --- /dev/null +++ b/theme/styles/sass/lib/components/_dataview.scss @@ -0,0 +1,38 @@ +/* ========================================================================== + Dataview + + Default Mendix Dataview Widget. The data view is used for showing the contents of exactly one object +========================================================================== */ + +.mx-dataview { + /* Control bar */ + .mx-dataview-controls { + // Needed to clear the bootstrap columns (get float: left) + clear: both; + margin-top: 10px; + padding: 8px 0; + border-top: 1px solid $dataview-controls-border-color; + border-radius: 0; + background-color: $dataview-controls-bg; + /* Buttons */ + .mx-button { + margin-right: 0.3em; + margin-bottom: 0; + &:last-child { + margin-right: 0; + } + } + } + /* Dataview-content gives problems for nexted layout grid containers */ + > .mx-dataview-content > .mx-container-nested { + > .row { + margin-right: 0; + margin-left: 0; + } + } + /* Dataview empty message */ + .mx-dataview-message { + color: $dataview-emptymessage-color; + background: $dataview-emptymessage-bg; + } +} diff --git a/theme/styles/sass/lib/components/_dijit-widgets.scss b/theme/styles/sass/lib/components/_dijit-widgets.scss new file mode 100644 index 0000000..5ff4b88 --- /dev/null +++ b/theme/styles/sass/lib/components/_dijit-widgets.scss @@ -0,0 +1,306 @@ +/* +* Mendix Documentation +* Special styles for presenting components +*/ + + +/* +* Dijit Widgets +* +* Default Dojo Dijit Widgets +*/ + + +/* + * Dijit Calendar Widget + * + * Used in dataviews + */ + +.dijitCalendarContainer { + /* (must be higher than popup z-index) */ + z-index: 10010 !important; + padding: 10px; + border: 1px solid #D1D6E4; + border-radius: 4px; + background: #FFFFFF; + box-shadow: 0 2px 10px 0 rgba(0,0,0,0.06); + font-size: 12px; + tr { + th { + text-align: center; + color: $brand-primary; + } + th, + td { + padding: 10px; + text-align: center; + } + td .dijitCalendarDateLabel { + color: #2D3E4E; + } + tfoot h3 { + margin: 0; + padding: 0; + font-size: inherit; + } + .dijitCalendarNextMonth, + .dijitCalendarPreviousMonth { + span { + color: lighten(#2D3E4E, 50%); + } + } + } + .dijitCalendarMonthLabel { + color: $brand-primary; + } + .dijitButtonNode { + border: 0; + } + .dijitCalendarArrow { + cursor: pointer; + } + .dijitCalendarSelectedDate, + .dijitCalendarSelectedDate:hover { + border-radius: 50%; + background: $brand-primary; + .dijitCalendarDateLabel { + color: #FFFFFF; + } + } + .dijitCalendarHoveredDate { + border-radius: 50%; + background-color: $brand-default; + .dijitCalendarDateLabel { + color: $brand-primary; + } + } + .dijitCalendarYearContainer { + text-align: center; + span { + color: lighten($brand-primary, 30); + &.dijitCalendarSelectedYear { + color: $brand-primary; + } + &:hover { + text-decoration: underline; + background-color: transparent; + } + } + } + .dijitCalendarMonthContainer th:first-child { + border-top-left-radius: 3px; + } + .dijitCalendarMonthContainer th:last-child { + border-top-right-radius: 3px; + } +} + +.dijitCalendarMonthMenuPopup { + /* (must be higher than popup z-index) */ + z-index: 10020 !important; + padding: 3px 4px; + border-radius: 3px; + background-color: #26323D; + .dijitCalendarMonthMenu { + padding: 5px; + border-style: none; + background: none; + font-size: 12px; + .dijitCalendarMonthLabel { + padding: 2px 0; + color: #FFFFFF; + &:hover, + &:focus { + color: #4280CB; + } + } + } +} + +.dj_rtl { + .dijitCalendarContainer { + .dijitCalendarMonthContainer { + th { + &:first-child { + border-top-left-radius: 0; + border-top-right-radius: 3px; + } + &:last-child { + border-top-left-radius: 3px; + border-top-right-radius: 0; + } + } + } + } +} + + +/* + * Dijit Tooltip Widget + * + * Default tooltip used for Mendix widgets + */ + +.mx-tooltip { + .dijitTooltipContainer { + border-width: 1px; + border-color: $gray-light; + border-radius: 4px; + background: #FFFFFF; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + .mx-tooltip-content { + padding: 10px; + } + .form-group { + margin-bottom: 5px; + } + } + .dijitTooltipConnector { + width: 0; + height: 0; + margin-left: -10px; + border-width: 10px 10px 10px 0; + border-style: solid; + border-color: transparent; + border-right-color: $gray-light; + } +} + + +/* + * Dijit Border Container + * + * Used in Mendix as split pane containers + */ + +.dijitBorderContainer { + padding: 5px; + background-color: #FCFCFC; + .dijitSplitterV, + .dijitGutterV { + width: 5px; + border: 0; + background: #FCFCFC; + } + .dijitSplitterH, + .dijitGutterH { + height: 5px; + border: 0; + background: #FCFCFC; + } + .dijitSplitterH { + .dijitSplitterThumb { + top: 2px; + width: 19px; + height: 1px; + background: #B0B0B0; + } + } + .dijitSplitterV { + .dijitSplitterThumb { + left: 2px; + width: 1px; + height: 19px; + background: #B0B0B0; + } + } + .dijitSplitContainer-child, + .dijitBorderContainer-child { + border: 1px solid #CCCCCC; + } + .dijitBorderContainer-dijitTabContainerTop, + .dijitBorderContainer-dijitTabContainerBottom, + .dijitBorderContainer-dijitTabContainerLeft, + .dijitBorderContainer-dijitTabContainerRight { + border: none; + } + .dijitBorderContainer-dijitBorderContainer { + padding: 0; + border: none; + } + .dijitSplitterActive { + /* For IE8 and earlier */ + margin: 0; + opacity: 0.6; + background-color: #AAAAAA; + background-image: none; + font-size: 1px; + filter: alpha(opacity=60); + } + .dijitSplitContainer-dijitContentPane, + .dijitBorderContainer-dijitContentPane { + padding: 5px; + background-color: #FFFFFF; + } +} + + +/* + * Dijit Menu Popup + * + * Used in datepickers and calendar widgets + */ + +.dijitMenuPopup { + margin-top: 10px; + .dijitMenu { + display: block; + width: 200px !important; + margin-top: 0; // No top margin because there is no parent with margin bottom + padding: 12px 10px; + border-radius: 3px; + background: $brand-inverse; + &:after { + position: absolute; + bottom: 100%; + left: 20px; + width: 0; + height: 0; + margin-left: -10px; + content: " "; + pointer-events: none; + border: medium solid transparent; + border-width: 10px; + border-bottom-color: $brand-inverse; + } + // Menu item + .dijitMenuItem { + background: transparent; + .dijitMenuItemLabel { + display: block; + overflow: hidden; + width: 180px !important; + padding: 10px; + text-overflow: ellipsis; + color: #FFFFFF; + border-radius: 3px; + } + // Hover + &.dijitMenuItemHover { + background: none; + .dijitMenuItemLabel { + background: $brand-primary; + } + } + } + // New label + .tg_newlabelmenuitem { + .dijitMenuItemLabel { + font-weight: $font-weight-bold; + } + } + // Seperator + .dijitMenuSeparator { + td { + padding: 0; + border-bottom-width: 3px; + } + .dijitMenuSeparatorIconCell { + > div { + margin: 0; //override dijit styling + } + } + } + } +} diff --git a/theme/styles/sass/lib/components/_glyphicons.scss b/theme/styles/sass/lib/components/_glyphicons.scss new file mode 100644 index 0000000..5bf9c77 --- /dev/null +++ b/theme/styles/sass/lib/components/_glyphicons.scss @@ -0,0 +1,20 @@ +/* ========================================================================== + Glyphicons + + Glyphicons alternaed to use with Mendix +========================================================================== */ + +.mx-glyphicon { + &:before { + display: inline-block; + margin-top: -0.2em; + margin-right: 0.4555555em; + vertical-align: middle; + font-family: "Glyphicons Halflings"; + font-weight: $font-weight-normal; + font-style: normal; + line-height: inherit; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } +} diff --git a/theme/styles/sass/lib/components/_grid.scss b/theme/styles/sass/lib/components/_grid.scss new file mode 100644 index 0000000..94f3c61 --- /dev/null +++ b/theme/styles/sass/lib/components/_grid.scss @@ -0,0 +1,65 @@ +/* ========================================================================== + Grid + + Default Mendix Grid (used for Mendix Datagrid) +========================================================================== */ + +.mx-grid { + padding: 0px; + border: 0; + border-radius: 0; + .mx-grid-controlbar { + margin: 10px 0; + /* Paging */ + .mx-grid-pagingbar { + /* Buttons */ + .mx-button { + padding: 6px; + color: $grid-paging-color; + border-color: $grid-paging-border-color; + background-color: $grid-paging-bg; + &:hover { + color: $grid-paging-color-hover; + border-color: $grid-paging-border-color-hover; + background-color: $grid-paging-bg-hover; + } + } + /* Text Paging .. to .. to .. */ + .mx-grid-paging-status { + padding: 0 8px 8px; + } + } + } + .mx-grid-searchbar { + margin: 10px 0; + .mx-grid-search-item { + .mx-grid-search-label { + vertical-align: middle; + label { + padding-top: 5px; + } + } + .mx-grid-search-input { + .form-control { + height: 28px; + font-size: 11px; + } + select.form-control { + padding: 3px; + vertical-align: middle; + } + .mx-button { + height: 28px; + padding-top: 2px; + padding-bottom: 2px; + } + } + } + } +} + + +// Remove default border from grid inside a Mendix Dataview +.mx-dataview .mx-grid { + border: 0; +} diff --git a/theme/styles/sass/lib/components/_groupbox.scss b/theme/styles/sass/lib/components/_groupbox.scss new file mode 100644 index 0000000..4fb3ca6 --- /dev/null +++ b/theme/styles/sass/lib/components/_groupbox.scss @@ -0,0 +1,172 @@ +/* ========================================================================== + Groupbox + + Default Mendix Groupboxes +========================================================================== */ + +.mx-groupbox { + margin: 0; + > .mx-groupbox-header { + margin: 0; + color: $groupbox-default-color; + border-width: 1px 1px 0 1px; + border-style: solid; + border-color: $groupbox-default-bg; + background: $groupbox-default-bg; + font-size: $font-size-h5; + .mx-groupbox-collapse-icon { + margin-top: 0.1em; + } + } + > .mx-groupbox-body { + padding: 10px 15px; + border-width: 1px; + border-style: solid; + border-color: $groupbox-default-bg; + background-color: #FFFFFF; + } + .mx-groupbox-header + .mx-groupbox-body { + border-top: none; + } + &.collapsed > .mx-groupbox-header { + } +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// + +// Color variations +.groupbox-default { + @include groupbox-variant($groupbox-default-color, $groupbox-default-bg); +} + +.groupbox-primary { + @include groupbox-variant($groupbox-primary-color, $groupbox-primary-bg); +} + +.groupbox-inverse { + @include groupbox-variant($groupbox-inverse-color, $groupbox-inverse-bg); +} + +// Success appears as green +.groupbox-success { + @include groupbox-variant($groupbox-success-color, $groupbox-success-bg); +} + +// Info appears as blue-green +.groupbox-info { + @include groupbox-variant($groupbox-info-color, $groupbox-info-bg); +} + +// Warning appears as orange +.groupbox-warning { + @include groupbox-variant($groupbox-warning-color, $groupbox-warning-bg); +} + +// Danger and error appear as red +.groupbox-danger { + @include groupbox-variant($groupbox-danger-color, $groupbox-danger-bg); +} + +// white appears as full white +.groupbox-white { + @include groupbox-variant($groupbox-white-color, $groupbox-white-bg); +} + +.groupbox-transparent { + border-bottom: 1px solid $border-color-default; + > .mx-groupbox-header { + padding: 15px 0; + color: $gray-darker; + border-style: none; + background: transparent; + font-size: 16px; + font-weight: $font-weight-semibold; + } + .mx-groupbox-body { + padding: 15px 0; + border-style: none; + background-color: transparent; + } + .mx-groupbox-collapse-icon { + color: $brand-primary; + } +} + +// Header options +.groupbox-h1 > .mx-groupbox-header { + font-size: $font-size-h1; +} + +.groupbox-h2 > .mx-groupbox-header { + font-size: $font-size-h2; +} + +.groupbox-h3 > .mx-groupbox-header { + font-size: $font-size-h3; +} + +.groupbox-h4 > .mx-groupbox-header { + font-size: $font-size-h4; +} + +.groupbox-h5 > .mx-groupbox-header { + font-size: $font-size-h5; +} + +.groupbox-h6 > .mx-groupbox-header { + font-size: $font-size-h6; +} + +// Callout Look and Feel +.groupbox-callout { + > .mx-groupbox-header, + > .mx-groupbox-body { + border: 0; + background-color: $callout-info-bg; + } + .mx-groupbox-header + .mx-groupbox-body { + padding-top: 0; + } +} + +.groupbox-info.groupbox-callout { + > .mx-groupbox-header, + > .mx-groupbox-body { + background-color: $callout-info-bg; + } + > .mx-groupbox-header { + color: $callout-info-color; + } +} + +.groupbox-success.groupbox-callout { + > .mx-groupbox-header, + > .mx-groupbox-body { + background-color: $callout-success-bg; + } + > .mx-groupbox-header { + color: $callout-success-color; + } +} + +.groupbox-warning.groupbox-callout { + > .mx-groupbox-header, + > .mx-groupbox-body { + background-color: $callout-warning-bg; + } + > .mx-groupbox-header { + color: $callout-warning-color; + } +} + +.groupbox-danger.groupbox-callout { + > .mx-groupbox-header, + > .mx-groupbox-body { + background-color: $callout-danger-bg; + } + > .mx-groupbox-header { + color: $callout-danger-color; + } +} diff --git a/theme/styles/sass/lib/components/_header.scss b/theme/styles/sass/lib/components/_header.scss new file mode 100644 index 0000000..e09eee1 --- /dev/null +++ b/theme/styles/sass/lib/components/_header.scss @@ -0,0 +1,112 @@ +/* ========================================================================== + Header + + Default Mendix Mobile Header +========================================================================== */ + +.mx-header { + z-index: 100; + display: flex; + width: 100%; + height: $m-header-height; + padding: 0; + text-align: initial; + color: $m-header-color; + border-bottom: 1px solid $border-color-default; + background-color: $m-header-bg; + box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14); + + + // Reset mxui + div.mx-header-left, + div.mx-header-right { + position: relative; + top: initial; + right: initial; + left: initial; + display: flex; + align-items: center; + width: 25%; + height: 100%; + .mx-placeholder { + display: flex; + align-items: center; + height: 100%; + } + } + + div.mx-header-left .mx-placeholder { + order: 1; + .mx-placeholder { + justify-content: flex-start; + } + } + div.mx-header-center { + overflow: hidden; + flex: 1; + order: 2; + text-align: center; + + .mx-title { + overflow: hidden; + width: 100%; + margin: 0; + text-overflow: ellipsis; + color: $m-header-color; + font-size: $m-header-title-size; + line-height: $m-header-height; + } + } + div.mx-header-right { + order: 3; + .mx-placeholder { + justify-content: flex-end; + } + } + + // Content magic + .mx-link { + display: flex; + align-items: center; + height: 100%; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + transition: all 0.2s; + a { + text-decoration: none; + } + .glyphicon { + top: 0; + font-size: 23px; + } + &:active { + -webkit-transform: translateY(1px); + transform: translateY(1px); + color: $link-hover-color; + } + } + + .mx-link, + .btn, + img { + padding: 0 8px; + } + + .mx-sidebartoggle { + font-size: 24px; + line-height: $m-header-height; + img { + height: 20px; + } + } +} + +// RTL support +body[dir="rtl"] { + .mx-header-left { + order: 3; + } + .mx-header-right { + order: 1; + } +} diff --git a/theme/styles/sass/lib/components/_helpers.scss b/theme/styles/sass/lib/components/_helpers.scss new file mode 100644 index 0000000..0b2b0fc --- /dev/null +++ b/theme/styles/sass/lib/components/_helpers.scss @@ -0,0 +1,289 @@ +/* ========================================================================== + Helpers + + Default Mendix Helpers +========================================================================== */ + +.show { + display: block !important; +} + +.hidden { + display: none !important; + visibility: hidden !important; +} + +.invisible { + visibility: hidden !important; +} + +.display-ie8-only:not([attr*=""]) { + display: none !important; + padding: 0 !important; +} + +.list-nostyle { + ul { + margin: 0 !important; + padding: 0 !important; + li { + list-style-type: none !important; + } + } +} + +.nowrap, +.nowrap * { + overflow: hidden; + // Star for inside an element, IE8 span > a + white-space: nowrap !important; + text-overflow: ellipsis; +} + +// Render DIV as Table Cells +.table { + display: table !important; +} + +.table-row { + display: table-row !important; +} + +.table-cell { + display: table-cell !important; +} + +// Quick floats +.pull-left { + float: left !important; +} +.pull-right { + float: right !important; +} + +// Align options +.align-top { + vertical-align: top !important; +} + +.align-middle { + vertical-align: middle !important; +} + +.align-bottom { + vertical-align: bottom !important; +} + +// Flex alignments +.row-left { + display: flex !important; + align-items: center !important; + flex-flow: row !important; + justify-content: flex-start !important; +} +.row-center { + display: flex !important; + align-items: center !important; + flex-flow: row !important; + justify-content: center !important; +} +.row-right { + display: flex !important; + align-items: center !important; + flex-flow: row !important; + justify-content: flex-end !important; +} +.col-left { + display: flex !important; + align-items: flex-start !important; + flex-direction: column !important; + justify-content: center !important; +} +.col-center { + display: flex !important; + align-items: center !important; + flex-direction: column !important; + justify-content: center !important; +} +.col-right { + display: flex !important; + align-items: flex-end !important; + flex-direction: column !important; + justify-content: center !important; +} + +// Spacing none +.spacing-inner-none { + padding: 0 !important; +} +.spacing-inner-top-none { + padding-top: 0 !important; +} +.spacing-inner-right-none { + padding-right: 0 !important; +} +.spacing-inner-bottom-none { + padding-bottom: 0 !important; +} +.spacing-inner-left-none { + padding-left: 0 !important; +} + +.spacing-outer-none { + margin: 0 !important; +} +.spacing-outer-top-none { + margin-top: 0 !important; +} +.spacing-outer-right-none { + margin-right: 0 !important; +} +.spacing-outer-bottom-none { + margin-bottom: 0 !important; +} +.spacing-outer-left-none { + margin-left: 0 !important; +} + +// Spacing small +.spacing-inner { + padding: $spacing-small !important; +} +.spacing-inner-top { + padding-top: $spacing-small !important; +} +.spacing-inner-right { + padding-right: $spacing-small !important; +} +.spacing-inner-bottom { + padding-bottom: $spacing-small !important; +} +.spacing-inner-left { + padding-left: $spacing-small !important; +} + +.spacing-outer { + margin: $spacing-small !important; +} +.spacing-outer-top { + margin-top: $spacing-small !important; +} +.spacing-outer-right { + margin-right: $spacing-small !important; +} +.spacing-outer-bottom { + margin-bottom: $spacing-small !important; +} +.spacing-outer-left { + margin-left: $spacing-small !important; +} + +// Spacing Medium +.spacing-inner-medium { + @include get-responsive-spacing-medium($type: padding, $direction: all, $is_important: true); +} +.spacing-inner-top-medium { + @include get-responsive-spacing-medium($type: padding, $direction: top, $is_important: true); +} +.spacing-inner-right-medium { + @include get-responsive-spacing-medium($type: padding, $direction: right, $is_important: true); +} +.spacing-inner-bottom-medium { + @include get-responsive-spacing-medium($type: padding, $direction: bottom, $is_important: true); +} +.spacing-inner-left-medium { + @include get-responsive-spacing-medium($type: padding, $direction: left, $is_important: true); +} + +.spacing-outer-medium { + @include get-responsive-spacing-medium($type: margin, $direction: all, $is_important: true); +} +.spacing-outer-top-medium { + @include get-responsive-spacing-medium($type: margin, $direction: top, $is_important: true); +} +.spacing-outer-right-medium { + @include get-responsive-spacing-medium($type: margin, $direction: right, $is_important: true); +} +.spacing-outer-bottom-medium { + @include get-responsive-spacing-medium($type: margin, $direction: bottom, $is_important: true); +} +.spacing-outer-left-medium { + @include get-responsive-spacing-medium($type: margin, $direction: left, $is_important: true); +} + +// Spacing Large +.spacing-inner-large { + @include get-responsive-spacing-large($type: padding, $direction: all, $is_important: true); +} +.spacing-inner-top-large { + @include get-responsive-spacing-large($type: padding, $direction: top, $is_important: true); +} +.spacing-inner-right-large { + @include get-responsive-spacing-large($type: padding, $direction: right, $is_important: true); +} +.spacing-inner-bottom-large { + @include get-responsive-spacing-large($type: padding, $direction: bottom, $is_important: true); +} +.spacing-inner-left-large { + @include get-responsive-spacing-large($type: padding, $direction: left, $is_important: true); +} + +.spacing-outer-large { + @include get-responsive-spacing-large($type: margin, $direction: all, $is_important: true); +} +.spacing-outer-top-large { + @include get-responsive-spacing-large($type: margin, $direction: top, $is_important: true); +} +.spacing-outer-right-large { + @include get-responsive-spacing-large($type: margin, $direction: right, $is_important: true); +} +.spacing-outer-bottom-large { + @include get-responsive-spacing-large($type: margin, $direction: bottom, $is_important: true); +} +.spacing-outer-left-large { + @include get-responsive-spacing-large($type: margin, $direction: left, $is_important: true); +} + +// Spacing layouts +.spacing-inner-layout { + @include layout-spacing($type: padding, $direction: all, $device: responsive, $is_important: true); +} +.spacing-inner-top-layout { + @include layout-spacing($type: padding, $direction: top, $device: responsive, $is_important: true); +} +.spacing-inner-right-layout { + @include layout-spacing($type: padding, $direction: right, $device: responsive, $is_important: true); +} +.spacing-inner-bottom-layout { + @include layout-spacing($type: padding, $direction: bottom, $device: responsive, $is_important: true); +} +.spacing-inner-left-layout { + @include layout-spacing($type: padding, $direction: left, $device: responsive, $is_important: true); +} + +.spacing-outer-layout { + @include layout-spacing($type: margin, $direction: all, $device: responsive, $is_important: true); +} +.spacing-outer-top-layout { + @include layout-spacing($type: margin, $direction: top, $device: responsive, $is_important: true); +} +.spacing-outer-right-layout { + @include layout-spacing($type: margin, $direction: right, $device: responsive, $is_important: true); +} +.spacing-outer-bottom-layout { + @include layout-spacing($type: margin, $direction: bottom, $device: responsive, $is_important: true); +} +.spacing-outer-left-layout { + @include layout-spacing($type: margin, $direction: left, $device: responsive, $is_important: true); +} + +// Display properties +.d-inline { + display: inline !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-block { + display: block !important; +} diff --git a/theme/styles/sass/lib/components/_images.scss b/theme/styles/sass/lib/components/_images.scss new file mode 100644 index 0000000..c3c4fce --- /dev/null +++ b/theme/styles/sass/lib/components/_images.scss @@ -0,0 +1,45 @@ +/* ========================================================================== + Images + + Default Mendix Image Widgets +========================================================================== */ + +img.img-rounded, +.img-rounded img { + border-radius: 6px; +} + +img.img-thumbnail, +.img-thumbnail img { + display: inline-block; + max-width: 100%; + height: auto; + padding: 4px; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + border: 1px solid $brand-default; + border-radius: 4px; + background-color: #FFFFFF; + line-height: $line-height-base; +} + +img.img-circle, +.img-circle img { + border-radius: 50%; +} + +img.img-auto, +.img-auto img { + width: auto !important; + max-width: 100% !important; + height: auto !important; + max-height: 100% !important; +} + +img.img-center, +.img-center img { + margin-right: auto !important; + margin-left: auto !important; +} diff --git a/theme/styles/sass/lib/components/_inputs.scss b/theme/styles/sass/lib/components/_inputs.scss new file mode 100644 index 0000000..c94412e --- /dev/null +++ b/theme/styles/sass/lib/components/_inputs.scss @@ -0,0 +1,130 @@ +/* ========================================================================== + Inputs + + The form-control class style all inputs +========================================================================== */ + +.form-control { + display: block; + width: 100%; + height: $form-input-height; + padding: $form-input-padding-y $form-input-padding-x; + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + color: $form-input-color; + border: 1px solid $form-input-border-color; + border-radius: $form-input-border-radius; + background-color: $form-input-bg; + background-image: none; + -webkit-box-shadow: none; + box-shadow: none; + font-size: $form-input-font-size; + line-height: $form-input-line-height; + -moz-appearance: none; + -webkit-appearance: none; + @if $form-input-style==lined { + @extend .form-control-lined; + } +} + +.form-control:focus { + border-color: $form-input-border-focus-color; + outline: 0; + background-color: $form-input-bg-focus; + -webkit-box-shadow: none; + box-shadow: none; +} + +textarea.form-control { + height: auto; +} + + +select.form-control { + $arrow: "data:image/svg+xml;utf8,"; + padding-right: 30px; + background-image: url($arrow); + background-repeat: no-repeat; + background-position: calc(100% - #{$form-input-padding-x}) center; + -moz-appearance: none; + -webkit-appearance: none; +} + +// Lined +.form-control-lined { + border: 0; + border-bottom: 1px solid $form-input-border-color; + border-radius: 0; + background-color: transparent; + &:focus { + background-color: transparent; + } +} + +// Read only fom control class +.form-control-static { + overflow: hidden; + min-height: auto; + padding-top: $form-input-padding-y; + padding-bottom: $form-input-padding-y; + padding-left: $form-input-padding-x; + border-bottom: 1px solid $form-input-static-border-color; + font-size: $form-input-font-size; + line-height: $form-input-line-height; +} + +// Not editable textarea, textarea will be rendered as a label +.mx-textarea label { + height: auto; +} + +// File input widget +.mx-fileinput { + .mx-wrapped-label { + display: inline-block; + width: 200px; + } + /* File input widget hover fix */ + .mx-wrapped-form { + .mx-wrapped-input { + cursor: pointer; + } + .mx-fileinput-upload-button:hover { + background-color: $btn-default-bg; + } + } +} + +// Form Group +.form-group { + margin-bottom: $form-group-margin-bottom; + & > [class*="col-"] { + padding-right: $form-group-gutter; + padding-left: $form-group-gutter; + } + // Alignment content + div[class*="textBox"] > label, + div[class*="textArea"] > label, + div[class*="datePicker"] > label { + @extend .form-control-static; + } + // Label + .control-label { + color: $form-label-color; + font-size: $form-label-size; + font-weight: $form-label-weight; + } +} + +// Orientation +.form-horizontal { + @media (min-width: $screen-sm) { + .control-label { + padding-top: $form-input-padding-y; + padding-bottom: $form-input-padding-y; + line-height: $form-input-line-height; + } + } +} diff --git a/theme/styles/sass/lib/components/_labels.scss b/theme/styles/sass/lib/components/_labels.scss new file mode 100644 index 0000000..21500a7 --- /dev/null +++ b/theme/styles/sass/lib/components/_labels.scss @@ -0,0 +1,53 @@ +/* ========================================================================== + Labels + + Default labels combined with Bootstrap labels +========================================================================== */ + +.label { + display: inline; + display: inline-block; + padding: 0.2em 0.6em 0.3em; + text-align: center; + vertical-align: baseline; + white-space: nowrap; + color: #FFFFFF; + border-radius: 0.25em; + font-size: 100%; + font-weight: $font-weight-bold; + line-height: 1; +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// +// Color variations +.label-default { + color: $label-default-color; + background-color: $label-default-bg; +} + +.label-primary { + color: $label-primary-color; + background-color: $label-primary-bg; +} + +.label-success { + color: $label-success-color; + background-color: $label-success-bg; +} + +.label-info { + color: $label-info-color; + background-color: $label-info-bg; +} + +.label-warning { + color: $label-warning-color; + background-color: $label-warning-bg; +} + +.label-danger { + color: $label-danger-color; + background-color: $label-danger-bg; +} diff --git a/theme/styles/sass/lib/components/_layoutgrid.scss b/theme/styles/sass/lib/components/_layoutgrid.scss new file mode 100644 index 0000000..dfcf828 --- /dev/null +++ b/theme/styles/sass/lib/components/_layoutgrid.scss @@ -0,0 +1,57 @@ +/* ========================================================================== + Layout Grid + + Default Bootstrap containers +========================================================================== */ +.mx-layoutgrid { + +} + +// Row +.row { + @media (max-width: $screen-xs-max) { + margin-right: -#{$gutter-size / 2}; + margin-left: -#{$gutter-size / 2}; + } +} + +// Columns +.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { + padding-right: $gutter-size; + padding-left: $gutter-size; + @media (max-width: $screen-xs-max) { + padding-right: $gutter-size / 2; + padding-left: $gutter-size / 2; + } +} + +// Vertical Align Elements in a bootstrap grid (place on container) +.v-center { + display: table; + width: 100%; + &::before, + &::after { + display: none; + } + .row { + display: table-row; + } + .row > [class*="col-"] { + display: table-cell; + float: none; + vertical-align: middle; + + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + } + } +} + +// Remove padding for Bootstrap columns, add class on row +.no-gutter > [class*="col-"] { + padding-right: 0; + padding-left: 0; +} diff --git a/theme/styles/sass/lib/components/_listview.scss b/theme/styles/sass/lib/components/_listview.scss new file mode 100644 index 0000000..f4bb4da --- /dev/null +++ b/theme/styles/sass/lib/components/_listview.scss @@ -0,0 +1,368 @@ +/* ========================================================================== + Listview + + Default Mendix Listview Widget. The list view shows a list of objects arranged vertically. Each object is shown using a template +========================================================================== */ + +.mx-listview { + // Remove widget padding + padding: 0; + + /* Clear search button (overrides load more button stying) */ + .mx-button.mx-listview-clear-button { + width: auto; + } + + // Search bar + .mx-listview-searchbar { + margin-bottom: $gutter-size; + } + + /* Load more button */ + & > .mx-button { + width: 100%; + margin: 10px auto; + } + .mx-listview-list { + margin: 0; + .mx-listview-empty { + border-style: none; + background-color: transparent; + } + } + .mx-listview-item { + @include transition(); + padding: $listview-padding-top $listview-padding-right $listview-padding-bottom $listview-padding-left; + border-width: 1px 0 0 0; + border-style: solid; + border-color: $grid-border-color; + background-color: $grid-bg; + + &:first-child { + border-radius: 0; // Reset mxui listview style + } + &:last-child { + border-bottom: 1px solid $grid-border-color; + border-radius: 0; // Reset mxui listview style + } + &:nth-child(2n + 1) { + background-color: $grid-bg; + } + &:hover { + background-color: $grid-bg; + } + &:focus, + &:active { + background-color: $grid-bg-hover; + } + &.selected { + background-color: $grid-bg-selected !important; + } + } + .mx-layoutgrid { + padding-top: 0 !important; + padding-bottom: 0 !important; + } +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// +// Bordered +.listview-bordered.mx-listview { + .mx-listview-item { + border: 1px solid $grid-border-color; + border-top: 0; + &:first-child { + border-top: 1px solid $grid-border-color; + border-radius: 0; + } + &:last-child { + border-radius: 0; + } + } +} + +// Striped +.listview-striped.mx-listview { + .mx-listview-item:nth-child(2n + 1) { + background-color: $grid-bg-striped; + } +} + +// Items as seperated blocks +.listview-seperated.mx-listview { + .mx-listview-item { + margin-bottom: $gutter-size; + border-width: 1px; + border-style: solid; + border-radius: $border-radius-default; + } +} + +// Hover style activated +.listview-hover.mx-listview { + .mx-listview-item { + &:hover, + &:focus, + &:active { + background-color: $grid-bg-hover !important; + } + &.selected { + &:hover, + &:focus, + &:active { + background-color: $grid-bg-selected-hover !important; + } + } + } +} + +// Remove all styling +.listview-stylingless.mx-listview { + .mx-listview-item { + padding: 0; + cursor: default; + border: 0; + background-color: transparent; + &:hover, + &:focus, + &:active { + background-color: transparent; + } + &.selected { + background-color: transparent !important; + &:hover, + &:focus, + &:active { + background-color: transparent !important; + } + } + } +} + +// Templategrid Row Sizes +.listview-lg.mx-listview { + .mx-listview-item { + padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2) ($grid-padding-left * 2); + } +} + +.listview-sm.mx-listview { + .mx-listview-item { + padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2) ($grid-padding-left / 2); + } +} + +// Bootstrap columns +.mx-listview[class*="lv-col"] { + overflow: hidden; // For if it is not in a layout, to prevent scrollbars + .mx-listview-content-wrapper { + display: block; + } + & > .mx-listview-list { + display: block; // normal a table + margin-right: -1 * $gutter-size; + margin-left: -1 * $gutter-size; + &::before, + &::after { + // clearfix + display: table; + clear: both; + content: " "; + } + & > .mx-listview-item { + // bootstrap col + position: relative; + display: block; // normal a table + float: left; + min-height: 1px; + padding-right: $gutter-size; + padding-left: $gutter-size; + border: 0; + @media (max-width: $screen-sm-max) { + width: 100% !important; + } + & > .mx-dataview { + overflow: hidden; + } + } + } + &.lv-col-xs-12 > .mx-listview-list > .mx-listview-item { + width: 100% !important; + } + &.lv-col-xs-11 > .mx-listview-list > .mx-listview-item { + width: 91.66666667% !important; + } + &.lv-col-xs-10 > .mx-listview-list > .mx-listview-item { + width: 83.33333333% !important; + } + &.lv-col-xs-9 > .mx-listview-list > .mx-listview-item { + width: 75% !important; + } + &.lv-col-xs-8 > .mx-listview-list > .mx-listview-item { + width: 66.66666667% !important; + } + &.lv-col-xs-7 > .mx-listview-list > .mx-listview-item { + width: 58.33333333% !important; + } + &.lv-col-xs-6 > .mx-listview-list > .mx-listview-item { + width: 50% !important; + } + &.lv-col-xs-5 > .mx-listview-list > .mx-listview-item { + width: 41.66666667% !important; + } + &.lv-col-xs-4 > .mx-listview-list > .mx-listview-item { + width: 33.33333333% !important; + } + &.lv-col-xs-3 > .mx-listview-list > .mx-listview-item { + width: 25% !important; + } + &.lv-col-xs-2 > .mx-listview-list > .mx-listview-item { + width: 16.66666667% !important; + } + &.lv-col-xs-1 > .mx-listview-list > .mx-listview-item { + width: 8.33333333% !important; + } + @media (min-width: $screen-sm) { + &.lv-col-sm-12 > .mx-listview-list > .mx-listview-item { + width: 100% !important; + } + &.lv-col-sm-11 > .mx-listview-list > .mx-listview-item { + width: 91.66666667% !important; + } + &.lv-col-sm-10 > .mx-listview-list > .mx-listview-item { + width: 83.33333333% !important; + } + &.lv-col-sm-9 > .mx-listview-list > .mx-listview-item { + width: 75% !important; + } + &.lv-col-sm-8 > .mx-listview-list > .mx-listview-item { + width: 66.66666667% !important; + } + &.lv-col-sm-7 > .mx-listview-list > .mx-listview-item { + width: 58.33333333% !important; + } + &.lv-col-sm-6 > .mx-listview-list > .mx-listview-item { + width: 50% !important; + } + &.lv-col-sm-5 > .mx-listview-list > .mx-listview-item { + width: 41.66666667% !important; + } + &.lv-col-sm-4 > .mx-listview-list > .mx-listview-item { + width: 33.33333333% !important; + } + &.lv-col-sm-3 > .mx-listview-list > .mx-listview-item { + width: 25% !important; + } + &.lv-col-sm-2 > .mx-listview-list > .mx-listview-item { + width: 16.66666667% !important; + } + &.lv-col-sm-1 > .mx-listview-list > .mx-listview-item { + width: 8.33333333% !important; + } + } + @media (min-width: $screen-md) { + &.lv-col-md-12 > .mx-listview-list > .mx-listview-item { + width: 100% !important; + } + &.lv-col-md-11 > .mx-listview-list > .mx-listview-item { + width: 91.66666667% !important; + } + &.lv-col-md-10 > .mx-listview-list > .mx-listview-item { + width: 83.33333333% !important; + } + &.lv-col-md-9 > .mx-listview-list > .mx-listview-item { + width: 75% !important; + } + &.lv-col-md-8 > .mx-listview-list > .mx-listview-item { + width: 66.66666667% !important; + } + &.lv-col-md-7 > .mx-listview-list > .mx-listview-item { + width: 58.33333333% !important; + } + &.lv-col-md-6 > .mx-listview-list > .mx-listview-item { + width: 50% !important; + } + &.lv-col-md-5 > .mx-listview-list > .mx-listview-item { + width: 41.66666667% !important; + } + &.lv-col-md-4 > .mx-listview-list > .mx-listview-item { + width: 33.33333333% !important; + } + &.lv-col-md-3 > .mx-listview-list > .mx-listview-item { + width: 25% !important; + } + &.lv-col-md-2 > .mx-listview-list > .mx-listview-item { + width: 16.66666667% !important; + } + &.lv-col-md-1 > .mx-listview-list > .mx-listview-item { + width: 16.66666667% !important; + } + } + @media (min-width: $screen-lg) { + &.lv-col-lg-12 > .mx-listview-list > .mx-listview-item { + width: 100% !important; + } + &.lv-col-lg-11 > .mx-listview-list > .mx-listview-item { + width: 91.66666667% !important; + } + &.lv-col-lg-10 > .mx-listview-list > .mx-listview-item { + width: 83.33333333% !important; + } + &.lv-col-lg-9 > .mx-listview-list > .mx-listview-item { + width: 75% !important; + } + &.lv-col-lg-8 > .mx-listview-list > .mx-listview-item { + width: 66.66666667% !important; + } + &.lv-col-lg-7 > .mx-listview-list > .mx-listview-item { + width: 58.33333333% !important; + } + &.lv-col-lg-6 > .mx-listview-list > .mx-listview-item { + width: 50% !important; + } + &.lv-col-lg-5 > .mx-listview-list > .mx-listview-item { + width: 41.66666667% !important; + } + &.lv-col-lg-4 > .mx-listview-list > .mx-listview-item { + width: 33.33333333% !important; + } + &.lv-col-lg-3 > .mx-listview-list > .mx-listview-item { + width: 25% !important; + } + &.lv-col-lg-2 > .mx-listview-list > .mx-listview-item { + width: 16.66666667% !important; + } + &.lv-col-lg-1 > .mx-listview-list > .mx-listview-item { + width: 8.33333333% !important; + } + } +} + +//== Phone specific +//-------------------------------------------------------------------------------------------------------------------// +.profile-phone .mx-listview { + .mx-listview-searchbar { + margin-bottom: 3px; + background: #FFFFFF; + box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14); + input { + padding: 14px 15px; + color: #555555; + border-style: none; + border-radius: 0; + box-shadow: none; + } + } + .mx-listview-clear-button { + padding: 14px 15px; + color: inherit; + border-style: none; + } + .mx-listview-item { + &:first-child { + border-top: none; + } + } +} diff --git a/theme/styles/sass/lib/components/_modals.scss b/theme/styles/sass/lib/components/_modals.scss new file mode 100644 index 0000000..a185c91 --- /dev/null +++ b/theme/styles/sass/lib/components/_modals.scss @@ -0,0 +1,104 @@ +/* ========================================================================== + Modals + + Default Mendix Modals. Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults +========================================================================== */ + +.modal-dialog { + .modal-content { + border: 1px solid $modal-header-border-color; + border-radius: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + .modal-header { + padding: 15px 20px; + border-bottom-color: $modal-header-border-color; + border-radius: 0; // Because of the class .mx-window-active in mxui.css + background-color: $modal-header-bg; + h4 { + margin: 0; + color: $modal-header-color; + font-size: 16px; + font-weight: $font-weight-bold; + } + .close { + margin-top: -3px; + opacity: 1; + /* For IE8 and earlier */ + color: $modal-header-color; + text-shadow: none; + filter: alpha(opacity=100); + } + } + .modal-body { + padding: 20px; + } + .modal-footer { + display: flex; + justify-content: flex-end; + margin-top: 0; + padding: 20px; + border-style: none; + } + } +} + +// Default Mendix Window Modal +.mx-window { + // If popup direct child is a dataview it gets the class mx-window-view + &.mx-window-view .mx-window-body { + padding: 0; + // Dataview in popup + > .mx-dataview > .mx-dataview-content, + > .mx-placeholder > .mx-dataview > .mx-dataview-content { + padding: 20px; + } + > .mx-dataview > .mx-dataview-controls, + > .mx-placeholder > .mx-dataview > .mx-dataview-controls { + display: flex; + justify-content: flex-end; + margin: 0; + padding: 20px; + text-align: left; + border-top: 1px solid $modal-header-border-color; + } + } + .mx-dataview-controls { + padding-bottom: 0; + } + .mx-layoutgrid { + padding-right: 0; + padding-left: 0; + } +} + +// Login modal +.mx-login { + .modal-body { + padding: 0 15px; + } + .modal-content { + input { + height: 56px; + padding: 12px 12px; + border: 1px solid #EEEEEE; + background: #EEEEEE; + box-shadow: none; + font-size: 16px; + &:focus { + border-color: #66AFE9; + } + } + } + .modal-header, + .modal-footer { + border: 0; + } + button { + font-size: 16px; + } + h4 { + color: #AAAAAA; + font-size: 20px; + font-weight: $font-weight-bold; + } +} diff --git a/theme/styles/sass/lib/components/_navigationbar.scss b/theme/styles/sass/lib/components/_navigationbar.scss new file mode 100644 index 0000000..f5e7414 --- /dev/null +++ b/theme/styles/sass/lib/components/_navigationbar.scss @@ -0,0 +1,308 @@ +/* ========================================================================== + Navigation + + Default Mendix Navigation Bar +========================================================================== */ +.mx-navbar { + margin: 0; + border-style: none; + border-radius: 0; + background-color: $navigation-bg; + ul.nav { + margin: 0; // weird -margin if screen gets small (bootstrap) + + /* Navigation item */ + & > li.mx-navbar-item > a { + display: flex; + align-items: center; + min-height: $topbar-minimalheight; + padding: $navigation-item-padding; + vertical-align: middle; + color: $navigation-color; + border-radius: 0; + font-size: $navigation-font-size; + font-weight: $font-weight-normal; + + /* Dropdown arrow */ + .caret { + border-top-color: $navigation-color; + border-bottom-color: $navigation-color; + } + &:hover, + &:focus, + &.active { + text-decoration: none; + color: $navigation-color-hover; + background-color: $navigation-bg-hover; + .caret { + border-top-color: $navigation-color-active; + border-bottom-color: $navigation-color-active; + } + } + &.active { + color: $navigation-color-active; + background-color: $navigation-bg-active; + } + + /* Dropdown */ + .mx-navbar-submenu::before { + position: absolute; + top: -9px; + left: 15px; + width: 0; + height: 0; + content: ""; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + border-width: 0 9px 9px 9px; + border-style: solid; + border-color: transparent transparent $navigation-border-color transparent; + } + + // Image + img { + width: 20px; // Default size (so it looks good) + height: auto; + margin-right: 0.5em; + } + .glyphicon { + top: 0; + margin-right: 0.5em; + vertical-align: middle; + font-size: $navigation-glyph-size; + } + } + + /* When hovering or the dropdown is open */ + & > .mx-navbar-item > a:hover, + & > .mx-navbar-item > a:focus, + & > .mx-navbar-item.active a, + & > .mx-navbar-item.open > a, + & > .mx-navbar-item.open > a:hover, + & > .mx-navbar-item.open > a:focus { + text-decoration: none; + color: $navigation-color-hover; + background-color: $navigation-bg-hover; + .caret { + border-top-color: $navigation-color-hover; + border-bottom-color: $navigation-color-hover; + } + } + & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a { + color: $navigation-sub-color-active; + background-color: $navigation-sub-bg-active; + .caret { + border-top-color: $navigation-sub-color-active; + border-bottom-color: $navigation-sub-color-active; + } + } + } + @media (max-width: $screen-sm) { + ul.nav > li.mx-navbar-item > a { + padding: 10px 20px; + } + .mx-navbar-item.open .dropdown-menu { + padding: 0; + border-radius: 0; + background-color: $navigation-sub-bg; + & > li.mx-navbar-subitem > a { + padding: 10px 20px; + color: $navigation-sub-color; + border-radius: 0; + font-size: $navigation-sub-font-size; + font-weight: $font-weight-normal; + &:hover, + &:focus { + color: $navigation-sub-color-hover; + background-color: $navigation-sub-bg-hover; + } + &.active { + color: $navigation-sub-color-active; + background-color: $navigation-sub-bg-active; + } + } + } + } + + /* remove focus */ + &:focus { + outline: 0; + } +} + +//== Regions +//## Behavior in the different regions +//-------------------------------------------------------------------------------------------------------------------// +// When used in topbar +.region-topbar { + .mx-navbar { + background-color: $navtopbar-bg; + ul.nav { + /* Navigation item */ + & > li.mx-navbar-item > a { + color: $navtopbar-color; + font-size: $navtopbar-font-size; + + /* Dropdown arrow */ + .caret { + border-top-color: $navtopbar-color; + border-bottom-color: $navtopbar-color; + } + &:hover, + &:focus, + &.active { + color: $navtopbar-color-hover; + background-color: $navtopbar-bg-hover; + .caret { + border-top-color: $navtopbar-color-active; + border-bottom-color: $navtopbar-color-active; + } + } + &.active { + color: $navtopbar-color-active; + background-color: $navtopbar-bg-active; + } + + /* Dropdown */ + .mx-navbar-submenu::before { + border-color: transparent transparent $navtopbar-border-color transparent; + } + + // Image + .glyphicon { + font-size: $navtopbar-glyph-size; + } + } + + /* When hovering or the dropdown is open */ + & > .mx-navbar-item > a:hover, + & > .mx-navbar-item > a:focus, + & > .mx-navbar-item.active a, + & > .mx-navbar-item.open > a, + & > .mx-navbar-item.open > a:hover, + & > .mx-navbar-item.open > a:focus { + color: $navtopbar-color-hover; + background-color: $navtopbar-bg-hover; + .caret { + border-top-color: $navtopbar-color-hover; + border-bottom-color: $navtopbar-color-hover; + } + } + & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a { + color: $navtopbar-sub-color-active; + background-color: $navtopbar-sub-bg-active; + .caret { + border-top-color: $navtopbar-sub-color-active; + border-bottom-color: $navtopbar-sub-color-active; + } + } + } + @media (max-width: $screen-sm) { + ul.nav > li.mx-navbar-item > a { + } + .mx-navbar-item.open .dropdown-menu { + background-color: $navtopbar-sub-bg; + & > li.mx-navbar-subitem > a { + color: $navtopbar-sub-color; + font-size: $navtopbar-sub-font-size; + &:hover, + &:focus { + color: $navtopbar-sub-color-hover; + background-color: $navtopbar-sub-bg-hover; + } + &.active { + color: $navtopbar-sub-color-active; + background-color: $navtopbar-sub-bg-active; + } + } + } + } + } +} + +// When used in sidebar +.region-sidebar { + .mx-navbar { + background-color: $navsidebar-bg; + ul.nav { + /* Navigation item */ + & > li.mx-navbar-item > a { + color: $navsidebar-color; + font-size: $navsidebar-font-size; + + /* Dropdown arrow */ + .caret { + border-top-color: $navsidebar-color; + border-bottom-color: $navsidebar-color; + } + &:hover, + &:focus, + &.active { + color: $navsidebar-color-hover; + background-color: $navsidebar-bg-hover; + .caret { + border-top-color: $navsidebar-color-active; + border-bottom-color: $navsidebar-color-active; + } + } + &.active { + color: $navsidebar-color-active; + background-color: $navsidebar-bg-active; + } + + /* Dropdown */ + .mx-navbar-submenu::before { + border-color: transparent transparent $navsidebar-border-color transparent; + } + + // Image + .glyphicon { + font-size: $navsidebar-glyph-size; + } + } + + /* When hovering or the dropdown is open */ + & > .mx-navbar-item > a:hover, + & > .mx-navbar-item > a:focus, + & > .mx-navbar-item.active a, + & > .mx-navbar-item.open > a, + & > .mx-navbar-item.open > a:hover, + & > .mx-navbar-item.open > a:focus { + color: $navsidebar-color-hover; + background-color: $navsidebar-bg-hover; + .caret { + border-top-color: $navsidebar-color-hover; + border-bottom-color: $navsidebar-color-hover; + } + } + & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a { + color: $navsidebar-sub-color-active; + background-color: $navsidebar-sub-bg-active; + .caret { + border-top-color: $navsidebar-sub-color-active; + border-bottom-color: $navsidebar-sub-color-active; + } + } + } + @media (max-width: $screen-sm) { + ul.nav > li.mx-navbar-item > a { + } + .mx-navbar-item.open .dropdown-menu { + background-color: $navtopbar-sub-bg; + & > li.mx-navbar-subitem > a { + color: $navsidebar-sub-color; + font-size: $navsidebar-sub-font-size; + &:hover, + &:focus { + color: $navsidebar-sub-color-hover; + background-color: $navsidebar-sub-bg-hover; + } + &.active { + color: $navsidebar-sub-color-active; + background-color: $navsidebar-sub-bg-active; + } + } + } + } + } +} diff --git a/theme/styles/sass/lib/components/_navigationlist.scss b/theme/styles/sass/lib/components/_navigationlist.scss new file mode 100644 index 0000000..c17eab4 --- /dev/null +++ b/theme/styles/sass/lib/components/_navigationlist.scss @@ -0,0 +1,28 @@ +/* ========================================================================== + Navigation List + Default Mendix Navigation List Widget. A navigation list can be used to attach an action to an entire row. Such a row is called a navigation list item +========================================================================== */ +.mx-navigationlist { + margin: 0; + padding: 0; + + li.mx-navigationlist-item { + @include transition(); + padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + border-width: 1px; + border-style: none none solid none; + border-color: $grid-border-color; + border-radius: 0; + background-color: $grid-bg; + + &:hover, + &:focus { + color: inherit; + background-color: $grid-bg-hover; + } + &.active { + color: inherit; + background-color: $grid-bg-selected; + } + } +} diff --git a/theme/styles/sass/lib/components/_navigationtree.scss b/theme/styles/sass/lib/components/_navigationtree.scss new file mode 100644 index 0000000..35841e2 --- /dev/null +++ b/theme/styles/sass/lib/components/_navigationtree.scss @@ -0,0 +1,259 @@ +/* ========================================================================== + Navigation + + Default Mendix Navigation Tree +========================================================================== */ +.mx-navigationtree { + background-color: $navigation-bg; + + /* Every navigation item */ + .navbar-inner > ul { + margin: 0; + padding-left: 0; + & > li { + padding: 0; + border-style: none; + & > a { + display: flex; + align-items: center; + height: $navigation-item-height; + padding: $navigation-item-padding; + color: $navigation-color; + border-bottom: 1px solid $navigation-border-color; + border-radius: 0; + background-color: $navigation-bg; + text-shadow: none; + font-size: $navigation-font-size; + font-weight: $font-weight-normal; + .caret { + border-top-color: $navigation-color; + border-bottom-color: $navigation-color; + } + img { + width: 20px; // Default size + height: auto; + margin-right: 0.5em; + } + .glyphicon { + top: 0; + margin-right: 0.5em; + vertical-align: middle; + font-size: $navigation-glyph-size; + } + } + a:hover, + a:focus, + a.active { + text-decoration: none; + color: $navigation-color-hover; + background-color: $navigation-bg-hover; + .caret { + border-top-color: $navigation-color-active; + border-bottom-color: $navigation-color-active; + } + } + a.active { + color: $navigation-color-active; + border-left-color: $navigation-color-active; + background-color: $navigation-bg-active; + } + } + } + + /* Sub navigation item specific */ + li.mx-navigationtree-has-items { + & > ul { + margin: 0; + padding-left: 0; + background-color: $navigation-sub-bg; + li { + margin: 0; + padding: 0; + border: 0; + a { + padding: 12px 20px 12px 25px; + text-decoration: none; + color: $navigation-sub-color; + border: 0; + background-color: $navigation-sub-bg; + text-shadow: none; + font-size: $navigation-sub-font-size; + font-weight: $font-weight-normal; + + &:hover, + &:focus, + &.active { + color: $navigation-sub-color-hover; + background-color: $navigation-sub-bg-hover; + } + &.active { + color: $navigation-sub-color-active; + border: 0; + background-color: $navigation-sub-bg-active; + } + } + } + } + } + + /* remove focus */ + &:focus { + outline: 0; + } +} + +//== Regions +//## Behavior in the different regions +//-------------------------------------------------------------------------------------------------------------------// +// When used in topbar +.region-topbar { + .mx-navigationtree { + background-color: $navtopbar-bg; + .navbar-inner > ul { + & > li { + & > a { + color: $navtopbar-color; + border-color: $navtopbar-border-color; + background-color: $navtopbar-bg; + font-size: $navtopbar-font-size; + .caret { + border-top-color: $navtopbar-color; + border-bottom-color: $navtopbar-color; + } + + .glyphicon { + font-size: $navtopbar-glyph-size; + } + } + a:hover, + a:focus, + a.active { + color: $navtopbar-color-hover; + background-color: $navtopbar-bg-hover; + .caret { + border-top-color: $navtopbar-color-active; + border-bottom-color: $navtopbar-color-active; + } + } + a.active { + color: $navtopbar-color-active; + border-left-color: $navtopbar-color-active; + background-color: $navtopbar-bg-active; + } + } + } + + /* Sub navigation item specific */ + li.mx-navigationtree-has-items { + & > ul { + background-color: $navtopbar-sub-bg; + li { + a { + color: $navtopbar-sub-color; + background-color: $navtopbar-sub-bg; + font-size: $navtopbar-sub-font-size; + &:hover, + &:focus, + &.active { + color: $navtopbar-sub-color-hover; + background-color: $navtopbar-sub-bg-hover; + } + &.active { + color: $navtopbar-sub-color-active; + background-color: $navtopbar-sub-bg-active; + } + } + } + } + } + } +} + +// When used in sidebar +.region-sidebar { + .mx-navigationtree { + background-color: $navsidebar-bg; + .navbar-inner > ul { + & > li { + & > a { + color: $navsidebar-color; + border-color: $navsidebar-border-color; + background-color: $navsidebar-bg; + font-size: $navsidebar-font-size; + .caret { + border-top-color: $navsidebar-color; + border-bottom-color: $navsidebar-color; + } + + .glyphicon { + font-size: $navsidebar-glyph-size; + } + } + a:hover, + a:focus, + a.active { + color: $navsidebar-color-hover; + background-color: $navsidebar-bg-hover; + .caret { + border-top-color: $navsidebar-color-active; + border-bottom-color: $navsidebar-color-active; + } + } + a.active { + color: $navsidebar-color-active; + border-left-color: $navsidebar-color-active; + background-color: $navsidebar-bg-active; + } + } + } + + /* Sub navigation item specific */ + li.mx-navigationtree-has-items { + & > ul { + background-color: $navsidebar-sub-bg; + li { + a { + color: $navsidebar-sub-color; + background-color: $navsidebar-sub-bg; + font-size: $navsidebar-sub-font-size; + &:hover, + &:focus, + &.active { + color: $navsidebar-sub-color-hover; + background-color: $navsidebar-sub-bg-hover; + } + &.active { + color: $navsidebar-sub-color-active; + background-color: $navsidebar-sub-bg-active; + } + } + } + } + } + } +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// +// Content Centerd text and icons +.nav-content-center-text-icons.mx-navigationtree { + .navbar-inner ul { + a { + flex-direction: column; + justify-content: center; + .glyphicon { + margin: 0 0 5px 0; + } + } + } +} + +// Content Centerd icons only +.nav-content-center.mx-navigationtree { + .navbar-inner ul { + a { + justify-content: center; + } + } +} diff --git a/theme/styles/sass/lib/components/_progress.scss b/theme/styles/sass/lib/components/_progress.scss new file mode 100644 index 0000000..5525fa7 --- /dev/null +++ b/theme/styles/sass/lib/components/_progress.scss @@ -0,0 +1,90 @@ +.mx-progress { + color: $font-color-default; + background: $bg-color-secondary; + .mx-progress-message { + color: $font-color-default; + } + .mx-progress-indicator { + position: relative; + overflow: hidden; + width: 100%; + max-width: 100%; + height: 2px; + margin: auto; + padding: 0; + border-radius: 0; + background: $gray-lighter; + + &:before, + &:after { + position: absolute; + top: 0; + left: 0; + display: block; + width: 50%; + height: 2px; + content: ""; + transform: translate3d(-100%,0,0); + background: $brand-primary; + } + &::before { + animation: loader 2s infinite; + } + + &::after { + animation: loader 2s -2s infinite; + } + } +} + + + + +@keyframes loader { + 0% { + transform: translate3d(-100%,0,0); + } + 100% { + transform: translate3d(200%,0,0); + } +} + +.profile-phone { + .mx-progress-empty { + position: relative; + top: 45px; + left: 0; + overflow: hidden; + width: 100%; + max-width: 100%; + height: 1px; + margin: auto; + padding: 0; + border-radius: 0; + background: $gray-lighter; + + &:before, + &:after { + position: absolute; + top: 0; + left: 0; + display: block; + width: 50%; + height: 1px; + content: ""; + transform: translate3d(-100%,0,0); + background: $brand-primary; + } + &::before { + animation: loader 2s infinite; + } + + &::after { + animation: loader 2s -2s infinite; + } + + .mx-progress-indicator { + display: none; + } + } +} diff --git a/theme/styles/sass/lib/components/_simplemenubar.scss b/theme/styles/sass/lib/components/_simplemenubar.scss new file mode 100644 index 0000000..99a2773 --- /dev/null +++ b/theme/styles/sass/lib/components/_simplemenubar.scss @@ -0,0 +1,219 @@ +/* ========================================================================== + Navigation + + Default Mendix Simple Menu Bar +========================================================================== */ +.mx-menubar { + padding: 0; + background-color: $navigation-bg; + ul.mx-menubar-list { + display: flex; + width: 100%; + min-height: 50px; + li.mx-menubar-item { + margin: 0; + > a { + display: flex; + overflow: hidden; + align-items: center; + justify-content: center; + height: 100%; + padding: $navigation-item-padding; + white-space: nowrap; + color: $navigation-color; + border-radius: 0; + font-size: $navigation-font-size; + font-weight: $font-weight-normal; + img { + margin-right: 0.5em; + } + .glyphicon { + top: -1px; + margin-right: 0.5em; + vertical-align: middle; + font-size: $navigation-glyph-size; + } + } + a:hover, + a:focus, + &:hover a, + &:focus a, + &.active a { + text-decoration: none; + color: $navigation-color-hover; + background-color: $navigation-bg-hover; + } + &.active a { + color: $navigation-color-active; + background-color: $navigation-bg-active; + } + } + } + + /* remove focus */ + &:focus { + outline: 0; + } +} + +// Vertical variation specifics +.mx-menubar-vertical { + background-color: $navigation-bg; + ul.mx-menubar-list { + display: flex; + li.mx-menubar-item { + display: block; + a { + border-bottom: 1px solid $navigation-border-color; + } + } + } +} + +// Horizontal variation specifics +.mx-menubar-horizontal { + box-shadow: 2px 0 4px 0 rgba(0,0,0,0.14); + ul.mx-menubar-list { + li.mx-menubar-item { + width: auto; + a { + width: 100%; + } + } + } + + /* Two menu items */ + &.menubar-col-6 ul.mx-menubar-list li.mx-menubar-item { + width: 50%; + } + + /* Three menu items */ + &.menubar-col-4 ul.mx-menubar-list li.mx-menubar-item { + width: 33.33333333%; + } + + /* Four menu items */ + &.menubar-col-3 ul.mx-menubar-list li.mx-menubar-item { + width: 25%; + } + + /* Five menu items */ + &.menubar-col-2 ul.mx-menubar-list li.mx-menubar-item { + width: 20%; + } +} + +//== Regions +//## Behavior in the different regions +//-------------------------------------------------------------------------------------------------------------------// +// When used in topbar +.region-topbar { + .mx-menubar { + background-color: $navtopbar-bg; + ul.mx-menubar-list { + li.mx-menubar-item { + a { + color: $navtopbar-color; + font-size: $navtopbar-font-size; + .glyphicon { + font-size: $navtopbar-glyph-size; + } + } + a:hover, + a:focus, + &:hover a, + &:focus a, + &.active a { + color: $navtopbar-color-hover; + background-color: $navtopbar-bg-hover; + } + &.active a { + color: $navtopbar-color-active; + background-color: $navtopbar-bg-active; + } + } + } + } + + // Vertical variation specifics + .mx-menubar-vertical { + background-color: $navtopbar-bg; + ul.mx-menubar-list { + li.mx-menubar-item { + a { + height: $navigation-item-height; + border-color: $navtopbar-border-color; + } + } + } + } +} + +// When used in sidebar +.region-sidebar { + .mx-menubar { + background-color: $navsidebar-bg; + ul.mx-menubar-list { + li.mx-menubar-item { + a { + color: $navsidebar-color; + font-size: $navsidebar-font-size; + .glyphicon { + font-size: $navsidebar-glyph-size; + } + } + a:hover, + a:focus, + &:hover a, + &:focus a, + &.active a { + color: $navsidebar-color-hover; + background-color: $navsidebar-bg-hover; + } + &.active a { + color: $navsidebar-color-active; + background-color: $navsidebar-bg-active; + } + } + } + } + + // Vertical variation specifics + .mx-menubar-vertical { + background-color: $navsidebar-bg; + ul.mx-menubar-list { + li.mx-menubar-item { + a { + border-color: $navsidebar-border-color; + } + } + } + } +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// +// Center text and icons +.bottom-nav-text-icons.mx-menubar { + ul.mx-menubar-list { + li.mx-menubar-item { + a { + flex-direction: column; + padding: 8px 8px 6px 8px; + line-height: normal; + font-size: 11px; + .glyphicon { + display: block; + margin: 0 0 5px 0; + font-size: 18px; + } + img { + display: block; + height: 18px; + margin: 0 0 5px 0; + } + } + } + } +} diff --git a/theme/styles/sass/lib/components/_tabcontainer.scss b/theme/styles/sass/lib/components/_tabcontainer.scss new file mode 100644 index 0000000..1c2ad4b --- /dev/null +++ b/theme/styles/sass/lib/components/_tabcontainer.scss @@ -0,0 +1,234 @@ +/* ========================================================================== + Tab Container + + Default Mendix Tab Container Widget. Tab containers are used to show information categorized into multiple tab pages. + This can be very useful if the amount of information that has to be displayed is larger than the amount of space on the screen +========================================================================== */ + +.mx-tabcontainer { + .mx-tabcontainer-tabs { + margin-bottom: 20px; + border-color: $tabs-border-color; + > li > a { + margin-right: 0; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + color: $tabs-color; + font-weight: $font-weight-normal; + &:hover, + &:focus { + background-color: $tabs-bg-hover; + } + } + > li.active > a, + > li.active > a:hover, + > li.active > a:focus { + color: $tabs-color-active; + border: 1px solid $tabs-border-color; + border-bottom-color: transparent; + background-color: $tabs-bg; + } + } +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// +// Style as pills +.tab-pills.mx-tabcontainer { + .mx-tabcontainer-tabs { + border: 0; + > li > a { + margin-right: 2px; + color: $tabs-color; + border: 1px solid $tabs-border-color; + border-radius: 4px; + &:hover, + &:focus { + background-color: $tabs-bg-hover; + } + } + > li.active > a, + > li.active > a:hover, + > li.active > a:focus { + color: #FFFFFF; + border-color: $tabs-bg-active; + background-color: $tabs-bg-active; + } + } +} + +// Style with lines +.tab-lined.mx-tabcontainer { + .mx-tabcontainer-tabs { + border-width: 3px; + li { + margin-right: 30px; + margin-bottom: -3px; + > a { + padding: 10px 0; + color: $tabs-color; + border: 0; + border-style: solid; + border-color: transparent; + border-bottom-width: 3px; + border-radius: 0; + &:hover, + &:focus { + color: $tabs-color; + border: 0; + border-color: transparent; + background: transparent; + } + } + &.active > a, + &.active > a:hover, + &.active > a:focus { + color: $tabs-lined-color-active; + border: 0; + border-bottom: 3px solid $tabs-lined-border-color; + background-color: transparent; + } + } + } +} + +// Justified style +// Lets your tabs take 100% of the width +.tab-justified.mx-tabcontainer { + .mx-tabcontainer-tabs { + width: 100%; + border-bottom: 0; + > li { + display: table-cell; + float: none; + width: 1%; + margin: 0; + @media (max-width: $screen-xs-max) { + display: block; + width: 100%; + } + > a { + text-align: center; + border-bottom: 1px solid $tabs-border-color; + } + } + > li.active > a { + border-bottom-color: transparent; + border-radius: 4px; + @media (max-width: $screen-xs-max) { + border-bottom-color: $tabs-border-color; + } + } + } +} + +// Bordered +.tab-bordered.mx-tabcontainer { + .mx-tabcontainer-tabs { + margin: 0; + } + .mx-tabcontainer-content { + padding: 10px; + border-width: 0 1px 1px 1px; + border-style: solid; + border-color: $tabs-border-color; + background-color: #FFFFFF; + } +} + +// Wizard +.tab-wizard.mx-tabcontainer { + .mx-tabcontainer-tabs { + border-style: none; + position: relative; + display: flex; + justify-content: space-between; + + &::before { + content: ""; + height: 1px; + position: absolute; + width: 100%; + display: block; + top: 16px; + background-color: $tabs-border-color; + } + > li { + position: relative; + width: 100%; + text-align: center; + float: none; + > a { + text-align: center; + margin: auto; + height: 33px; + width: 33px; + padding: 0; + line-height: 33px; + font-size: 18px; + font-weight: bold; + color: $brand-default; + border: 1px solid $tabs-border-color; + background-color: #FFFFFF; + border-radius: 100%; + } + &.active { + > a, + > a:hover, + > a:focus { + color: #FFFFFF; + border-color: $tabs-bg-active; + background-color: $tabs-bg-active; + } + } + } + } +} + +// Tab Styling Specific for mobile +.tab-mobile.mx-tabcontainer { + .mx-tabcontainer-tabs { + margin: 0; + text-align: center; + border-style: none; + background-color: $brand-primary; + li { + display: table-cell; + float: none; + width: 1%; + margin: 0; + text-align: center; + border-style: none; + border-radius: 0; + a { + padding: 15px; + text-transform: uppercase; + color: #FFFFFF; + border-width: 0 1px 0 0; + border-style: solid; + border-color: rgba(255,255,255,0.3); + border-radius: 0; + font-size: 12px; + font-weight: $font-weight-normal; + &:hover, + &:focus { + background-color: inherit; + } + } + &:last-child a { + border-right: none; + } + &.active > a, + &.active > a:hover, + &.active > a:focus { + color: #FFFFFF; + border-style: none; + border-radius: 0; + background-color: mix($brand-primary, #000000, 80%); + } + } + } +} diff --git a/theme/styles/sass/lib/components/_tables.scss b/theme/styles/sass/lib/components/_tables.scss new file mode 100644 index 0000000..80e2c9c --- /dev/null +++ b/theme/styles/sass/lib/components/_tables.scss @@ -0,0 +1,269 @@ +/* ========================================================================== + Tables + + Default Mendix Table Widget. Tables can be used to lend structure to a page. They contain a number of rows (tr) and columns, the intersection of which is called a cell (td). Each cell can contain widgets +========================================================================== */ + +th { + font-weight: $font-weight-bold; +} + +html body .mx-page table.mx-table { + th, + td { + &.nopadding { + padding: 0; + } + } +} + +table.mx-table { + > tbody { + /* Table row */ + > tr { + /* Table header */ + > th { + padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left;s + * { + color: $form-label-color; + font-weight: $font-weight-bold; + font-weight: $form-label-weight; + } + > label { + padding-top: 7px; + padding-bottom: 6px; // Aligns label in the middle if there is no input field next to it. + } + } + /* Table cells */ + > td { + padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; + > div > label, + .mx-referenceselector-input-wrapper label { + padding-top: 7px; + padding-bottom: 6px; // Aligns label in the middle if there is no input field next to it. + } + } + } + } +} + +// Default Mendix Table Widget inside TemplateGrid +.mx-templategrid table.mx-table { + > tbody { + > tr { + > th, + > td { + padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; + } + } + } +} + +// Default Mendix Table Widget inside Listview +.mx-list table.mx-table { + > tbody { + > tr { + > th, + > td { + padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; + } + } + } +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// +// Lined +table.table-lined.mx-table { + > tbody { + // Table row + > tr { + // Table header + // Table data + > td { + border-width: 1px 0; + border-style: solid; + border-color: $grid-border-color; + } + } + } +} + +// Bordered +table.table-bordered.mx-table { + > tbody { + // Table row + > tr { + // Table header + // Table data + > th, + > td { + border-width: 1px; + border-style: solid; + border-color: $grid-border-color; + } + } + } +} + +// Makes table compact +table.table-compact.mx-table { + > tbody { + // Table row + > tr { + // Table header + // Table data + > th, + > td { + padding-top: 2px; + padding-bottom: 2px; + } + } + } +} + +// Remove padding on sides +table.table-sideless.mx-table { + > tbody { + // Table row + > tr { + // Table header + // Table data + > td, + > th { + padding-right: 0; + } + > th:first-child, + > td:first-child { + padding-left: 0; + } + } + } +} + +// Remove all padding +table.table-spaceless.mx-table { + > tbody { + // Table row + > tr { + // Table header + // Table data + > th, + > td { + padding: 0; + } + } + } +} + +// Tables Vertical +// Will remove unwanted paddings +table.table-vertical.mx-table { + > tbody { + // Table row + > tr { + // Table header + > th { + padding-bottom: 0; + > label { + padding: 0; + } + > div > label { + padding: 0; + } + } + } + } +} + +// Align content in middle +table.table-align-vertical-middle.mx-table { + > tbody { + // Table row + > tr { + // Table header + // Table data + > th, + > td { + vertical-align: middle; + } + } + } +} + +// Compact labels +table.table-label-compact.mx-table { + > tbody { + // Table row + > tr { + // Table header + // Table data + > th, + > td { + > label { + margin: 0; + padding: 0; + } + > div > label, + .mx-referenceselector-input-wrapper label { + margin: 0; + padding: 0; + } + } + } + } +} + +$height-row-s: 55px; +$height-row-m: 70px; +$height-row-l: 120px; +// Small rows +table.table-row-s.mx-table { + > tbody { + // Table row + > tr { + // Table header + // Table data + > th, + > td { + height: $height-row-s; + } + } + } +} + +// Medium rows +table.table-row-m.mx-table { + > tbody { + // Table row + > tr { + // Table header + // Table data + > th, + > td { + height: $height-row-m; + } + } + } +} + +// Large rows +table.table-row-l.mx-table { + > tbody { + // Table row + > tr { + // Table header + // Table data + > th, + > td { + height: $height-row-l; + } + } + } +} + +// Makes the columns fixed +table.table-fixed { + table-layout: fixed; +} diff --git a/theme/styles/sass/lib/components/_templategrids.scss b/theme/styles/sass/lib/components/_templategrids.scss new file mode 100644 index 0000000..6a45a21 --- /dev/null +++ b/theme/styles/sass/lib/components/_templategrids.scss @@ -0,0 +1,300 @@ +/* ========================================================================== + Templategrid + + Default Mendix Templategrid Widget. The template grid shows a list of objects in a tile view. For example, a template grid can show a list of products. The template grid has a lot in common with the data grid. The main difference is that the objects are shown in templates (a sort of small data view) instead of rows +========================================================================== */ + +.mx-templategrid { + .mx-templategrid-content-wrapper { + table-layout: fixed; + } + .mx-templategrid-item { + padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left; + cursor: default; + background-color: $grid-bg; + &:hover { + background-color: transparent; + } + &.selected { + background-color: $grid-bg-selected !important; + } + } + .mx-layoutgrid { + padding-top: 0 !important; + padding-bottom: 0 !important; + } +} + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// +// Hover +.templategrid-hover.mx-templategrid { + .mx-templategrid-item { + &:hover { + background-color: $grid-bg-hover !important; + } + &.selected { + background-color: $grid-bg-selected !important; + &:hover { + background-color: $grid-bg-selected-hover !important; + } + } + } +} + +// Make sure your content looks selectable +.templategrid-selectable.mx-templategrid { + .mx-templategrid-item { + cursor: pointer; + } +} + +// Lined +.templategrid-lined.mx-templategrid { + .mx-grid-content { + border-top-width: 2px; + border-top-style: solid; + border-top-color: $grid-border-color; + } + .mx-templategrid-item { + border-top: 1px solid $grid-border-color; + border-right: none; + border-bottom: 1px solid $grid-border-color; + border-left: none; + } +} + +// Striped +.templategrid-striped.mx-templategrid { + .mx-templategrid-row:nth-child(odd) .mx-templategrid-item { + background-color: #F9F9F9; + } +} + +// Stylingless +.templategrid-stylingless.mx-templategrid { + .mx-templategrid-item { + padding: 0; + cursor: default; + border: 0; + background-color: transparent; + &:hover { + background-color: transparent; + } + &.selected { + background-color: transparent !important; + &:hover { + background-color: transparent !important; + } + } + } +} + +// Transparent items +.templategrid-transparent.mx-templategrid { + .mx-templategrid-item { + border: 0; + background-color: transparent; + } +} + +// Templategrid Row Sizes +.templategrid-lg.mx-templategrid { + .mx-templategrid-item { + padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2) ($grid-padding-left * 2); + } +} + +.templategrid-sm.mx-templategrid { + .mx-templategrid-item { + padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2) ($grid-padding-left / 2); + } +} + +// Templategrid Layoutgrid styles +.mx-templategrid[class*="tg-col"] { + overflow: hidden; // For if it is not in a layout, to prevent scrollbars + .mx-templategrid-content-wrapper { + display: block; + } + .mx-templategrid-row { + display: block; + margin-right: -1 * $gutter-size; + margin-left: -1 * $gutter-size; + + &::before, + &::after { + // clearfix + display: table; + clear: both; + content: " "; + } + } + .mx-templategrid-item { + // bootstrap col + position: relative; + display: block; + float: left; + min-height: 1px; + padding-right: $gutter-size; + padding-left: $gutter-size; + border: 0; + @media (max-width: 992px) { + width: 100% !important; + } + .mx-dataview { + overflow: hidden; + } + } + &.tg-col-xs-12 .mx-templategrid-item { + width: 100% !important; + } + &.tg-col-xs-11 .mx-templategrid-item { + width: 91.66666667% !important; + } + &.tg-col-xs-10 .mx-templategrid-item { + width: 83.33333333% !important; + } + &.tg-col-xs-9 .mx-templategrid-item { + width: 75% !important; + } + &.tg-col-xs-8 .mx-templategrid-item { + width: 66.66666667% !important; + } + &.tg-col-xs-7 .mx-templategrid-item { + width: 58.33333333% !important; + } + &.tg-col-xs-6 .mx-templategrid-item { + width: 50% !important; + } + &.tg-col-xs-5 .mx-templategrid-item { + width: 41.66666667% !important; + } + &.tg-col-xs-4 .mx-templategrid-item { + width: 33.33333333% !important; + } + &.tg-col-xs-3 .mx-templategrid-item { + width: 25% !important; + } + &.tg-col-xs-2 .mx-templategrid-item { + width: 16.66666667% !important; + } + &.tg-col-xs-1 .mx-templategrid-item { + width: 8.33333333% !important; + } + @media (min-width: 768px) { + &.tg-col-sm-12 .mx-templategrid-item { + width: 100% !important; + } + &.tg-col-sm-11 .mx-templategrid-item { + width: 91.66666667% !important; + } + &.tg-col-sm-10 .mx-templategrid-item { + width: 83.33333333% !important; + } + &.tg-col-sm-9 .mx-templategrid-item { + width: 75% !important; + } + &.tg-col-sm-8 .mx-templategrid-item { + width: 66.66666667% !important; + } + &.tg-col-sm-7 .mx-templategrid-item { + width: 58.33333333% !important; + } + &.tg-col-sm-6 .mx-templategrid-item { + width: 50% !important; + } + &.tg-col-sm-5 .mx-templategrid-item { + width: 41.66666667% !important; + } + &.tg-col-sm-4 .mx-templategrid-item { + width: 33.33333333% !important; + } + &.tg-col-sm-3 .mx-templategrid-item { + width: 25% !important; + } + &.tg-col-sm-2 .mx-templategrid-item { + width: 16.66666667% !important; + } + &.tg-col-sm-1 .mx-templategrid-item { + width: 8.33333333% !important; + } + } + @media (min-width: 992px) { + &.tg-col-md-12 .mx-templategrid-item { + width: 100% !important; + } + &.tg-col-md-11 .mx-templategrid-item { + width: 91.66666667% !important; + } + &.tg-col-md-10 .mx-templategrid-item { + width: 83.33333333% !important; + } + &.tg-col-md-9 .mx-templategrid-item { + width: 75% !important; + } + &.tg-col-md-8 .mx-templategrid-item { + width: 66.66666667% !important; + } + &.tg-col-md-7 .mx-templategrid-item { + width: 58.33333333% !important; + } + &.tg-col-md-6 .mx-templategrid-item { + width: 50% !important; + } + &.tg-col-md-5 .mx-templategrid-item { + width: 41.66666667% !important; + } + &.tg-col-md-4 .mx-templategrid-item { + width: 33.33333333% !important; + } + &.tg-col-md-3 .mx-templategrid-item { + width: 25% !important; + } + &.tg-col-md-2 .mx-templategrid-item { + width: 16.66666667% !important; + } + &.tg-col-md-1 .mx-templategrid-item { + width: 8.33333333% !important; + } + } + @media (min-width: 1200px) { + &.tg-col-lg-12 .mx-templategrid-item { + width: 100% !important; + } + &.tg-col-lg-11 .mx-templategrid-item { + width: 91.66666667% !important; + } + &.tg-col-lg-10 .mx-templategrid-item { + width: 83.33333333% !important; + } + &.tg-col-lg-9 .mx-templategrid-item { + width: 75% !important; + } + &.tg-col-lg-8 .mx-templategrid-item { + width: 66.66666667% !important; + } + &.tg-col-lg-7 .mx-templategrid-item { + width: 58.33333333% !important; + } + &.tg-col-lg-6 .mx-templategrid-item { + width: 50% !important; + } + &.tg-col-lg-5 .mx-templategrid-item { + width: 41.66666667% !important; + } + &.tg-col-lg-4 .mx-templategrid-item { + width: 33.33333333% !important; + } + &.tg-col-lg-3 .mx-templategrid-item { + width: 25% !important; + } + &.tg-col-lg-2 .mx-templategrid-item { + width: 16.66666667% !important; + } + &.tg-col-lg-1 .mx-templategrid-item { + width: 8.33333333% !important; + } + } +} diff --git a/theme/styles/sass/lib/components/_typography.scss b/theme/styles/sass/lib/components/_typography.scss new file mode 100644 index 0000000..251b001 --- /dev/null +++ b/theme/styles/sass/lib/components/_typography.scss @@ -0,0 +1,196 @@ +/* ========================================================================== + Typography +========================================================================== */ + +p { + line-height: $line-height-base * 1.25; +} + +label { + padding-top: 0; +} + +.mx-title { + margin: $font-header-margin; + color: $font-color-header; + font-size: $font-size-h1; + font-weight: $font-weight-header; +} + +h1, +.h1, +.h1 > * { + font-size: $font-size-h1; +} + +h2, +.h2, +.h2 > * { + font-size: $font-size-h2; +} + +h3, +.h3, +.h3 > * { + font-size: $font-size-h3; +} + +h4, +.h4, +.h4 > * { + font-size: $font-size-h4; +} + +h5, +.h5, +.h5 > * { + font-size: $font-size-h5; +} + +h6, +.h6, +.h6 > * { + font-size: $font-size-h6; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + margin: $font-header-margin; + color: $font-color-header; + font-weight: $font-weight-header; + line-height: 1.3; +} + + +//== Design Properties +//## Helper classes to change the look and feel of the component +//-------------------------------------------------------------------------------------------------------------------// + +// Text size +.text-small { + font-size: $font-size-small !important; +} + +.text-large { + font-size: $font-size-large !important; +} + +// Text Weights +.text-light, +.text-light > *, +.text-light label { + font-weight: $font-weight-light !important; +} + +.text-normal, +.text-normal > *, +.text-normal label { + font-weight: $font-weight-normal !important; +} + +.text-semibold, +.text-semibold > *, +.text-semibold label { + font-weight: $font-weight-semibold !important; +} + +.text-bold, +.text-bold > *, +.text-bold label { + font-weight: $font-weight-bold !important; +} + +// Color variations +.text-default, +.text-default:hover { + color: $font-color-default !important; +} + +.text-primary, +.text-primary:hover { + color: $brand-primary !important; +} + +.text-info, +.text-info:hover { + color: $brand-info !important; +} + +.text-success, +.text-success:hover { + color: $brand-success !important; +} + +.text-warning, +.text-warning:hover { + color: $brand-warning!important; +} + +.text-danger, +.text-danger:hover { + color: $brand-danger !important; +} + +.text-header { + color: $font-color-header !important; +} + +.text-detail { + color: $font-color-detail !important; +} + +.text-white { + color: #FFFFFF; +} + +// Alignment options +.text-left { + display: block; + text-align: left !important; +} +.text-center { + display: block; + text-align: center !important; +} +.text-right { + display: block; + text-align: right !important; +} +.text-justify { + text-align: justify !important; +} + +// Transform options +.text-lowercase { + text-transform: lowercase !important; +} +.text-uppercase { + text-transform: uppercase !important; +} +.text-capitalize { + text-transform: capitalize !important; +} + +// Wrap options +.text-break { + word-break: break-all !important; + word-break: break-word !important; + -ms-word-break: break-all !important; + -webkit-hyphens: auto !important; + -moz-hyphens: auto !important; + hyphens: auto !important; +} + +.text-nowrap { + white-space: nowrap !important; +} diff --git a/theme/styles/sass/lib/customwidgets/_progress-bar-theme.scss b/theme/styles/sass/lib/customwidgets/_progress-bar-theme.scss new file mode 100644 index 0000000..f11eb4b --- /dev/null +++ b/theme/styles/sass/lib/customwidgets/_progress-bar-theme.scss @@ -0,0 +1,36 @@ +/* Based on https://github.com/mendixlabs/star-rating/blob/v1.1.1/src/ui/StarRating.scss */ +div.widget-progress-bar .progress-bar-default { + background-color: $brand-default; +} + +div.widget-progress-bar .progress-bar-primary { + background-color: $brand-primary; +} + +div.widget-progress-bar .progress-bar-success { + background-color: $brand-success; +} + +div.widget-progress-bar .progress-bar-info { + background-color: $brand-info; +} + +div.widget-progress-bar .progress-bar-warning { + background-color: $brand-warning; +} + +div.widget-progress-bar .progress-bar-danger { + background-color: $brand-danger; +} + +div.widget-progress-bar .progress-bar-inverse { + background-color: $brand-inverse; +} + +div.widget-progress-bar-alert.widget-progress-bar-text-contrast .progress-bar { + color: $color-danger-darker; +} + +div.widget-progress-bar-text-contrast .progress-bar { + color: $font-base-color; +} diff --git a/theme/styles/sass/lib/customwidgets/_progress-circle-theme.scss b/theme/styles/sass/lib/customwidgets/_progress-circle-theme.scss new file mode 100644 index 0000000..b77e760 --- /dev/null +++ b/theme/styles/sass/lib/customwidgets/_progress-circle-theme.scss @@ -0,0 +1,40 @@ +/* Based on https://github.com/mendixlabs/progress-circle/tree/master/src/ui/_progress-circle-theme.scss */ +path.widget-progress-circle-path { + stroke: $brand-primary; +} + +.widget-progress-circle-primary { + path.widget-progress-circle-path { + stroke: $brand-primary; + } +} + +.widget-progress-circle-info { + path.widget-progress-circle-path { + stroke: $brand-info; + } +} + +.widget-progress-circle-success { + path.widget-progress-circle-path { + stroke: $brand-success; + } +} + +.widget-progress-circle-warning { + path.widget-progress-circle-path { + stroke: $brand-warning; + } +} + +.widget-progress-circle-danger { + path.widget-progress-circle-path { + stroke: $brand-danger; + } +} + +.widget-progress-circle-inverse { + path.widget-progress-circle-path { + stroke: $brand-inverse; + } +} diff --git a/theme/styles/sass/lib/customwidgets/_range-slider-theme.scss b/theme/styles/sass/lib/customwidgets/_range-slider-theme.scss new file mode 100644 index 0000000..c6d7b09 --- /dev/null +++ b/theme/styles/sass/lib/customwidgets/_range-slider-theme.scss @@ -0,0 +1,48 @@ +// Based on https://github.com/mendixlabs/range-slider/tree/master/src/ui/_range-slider-theme.scss + +div.widget-range-slider { + .rc-slider-handle, + .rc-slider-dot-active { + border-color: $brand-default; + + &:active { + border-color: $brand-default; + box-shadow: none; + } + + &:hover { + border-color: $brand-default; + } + } + + &.has-error { + .rc-slider-track, + .rc-slider-rail { + background-color: $brand-danger; + } + } +} + +div.widget-range-slider-primary .rc-slider-track { + background-color: $brand-primary; +} + +div.widget-range-slider-info .rc-slider-track { + background-color: $brand-info; +} + +div.widget-range-slider-success .rc-slider-track { + background-color: $brand-success; +} + +div.widget-range-slider-warning .rc-slider-track { + background-color: $brand-warning; +} + +div.widget-range-slider-danger .rc-slider-track { + background-color: $brand-danger; +} + +div.widget-range-slider-inverse .rc-slider-track { + background-color: $brand-inverse; +} diff --git a/theme/styles/sass/lib/customwidgets/_slider-theme.scss b/theme/styles/sass/lib/customwidgets/_slider-theme.scss new file mode 100644 index 0000000..dc45f81 --- /dev/null +++ b/theme/styles/sass/lib/customwidgets/_slider-theme.scss @@ -0,0 +1,45 @@ +// Based on https://github.com/mendixlabs/slider/tree/master/src/ui/_slider-theme.scss + +div.widget-slider { + .rc-slider-handle, + .rc-slider-dot-active { + border-color: $brand-default; + &:active { + border-color: $brand-default; + } + &:hover { + border-color: $brand-default; + } + } + + &.has-error { + .rc-slider-track, + .rc-slider-rail { + background-color: $brand-danger; + } + } +} + +div.widget-slider-primary .rc-slider-track { + background-color: $brand-primary; +} + +div.widget-slider-info .rc-slider-track { + background-color: $brand-info; +} + +div.widget-slider-success .rc-slider-track { + background-color: $brand-success; +} + +div.widget-slider-warning .rc-slider-track { + background-color: $brand-warning; +} + +div.widget-slider-danger .rc-slider-track { + background-color: $brand-danger; +} + +div.widget-slider-inverse .rc-slider-track { + background-color: $brand-inverse; +} diff --git a/theme/styles/sass/lib/customwidgets/_star-rating-theme.scss b/theme/styles/sass/lib/customwidgets/_star-rating-theme.scss new file mode 100644 index 0000000..b2949d9 --- /dev/null +++ b/theme/styles/sass/lib/customwidgets/_star-rating-theme.scss @@ -0,0 +1,28 @@ +/* Based on https://github.com/mendixlabs/star-rating/blob/v1.1.1/src/ui/StarRating.scss */ +span.widget-star-rating-full-default { + color: $brand-default; +} + +span.widget-star-rating-full-primary { + color: $brand-primary; +} + +span.widget-star-rating-full-success { + color: $brand-success; +} + +span.widget-star-rating-full-info { + color: $brand-info; +} + +span.widget-star-rating-full-warning { + color: $brand-warning; +} + +span.widget-star-rating-full-danger { + color: $brand-danger; +} + +span.widget-star-rating-full-inverse { + color: $brand-inverse; +} diff --git a/theme/styles/sass/lib/customwidgets/_switchwidget.scss b/theme/styles/sass/lib/customwidgets/_switchwidget.scss new file mode 100644 index 0000000..950602c --- /dev/null +++ b/theme/styles/sass/lib/customwidgets/_switchwidget.scss @@ -0,0 +1,144 @@ +$default-android-color: #6FBEB5; +$default-ios-color: rgb(100, 189, 99); + +@mixin bootstrap-style-ios($brand-style) { + border-color: $brand-style; + background-color: $brand-style; + box-shadow: $brand-style 0 0 0 16px inset; +} + +@mixin bootstrap-style-android($brand-style) { + background-color: lighten($brand-style, 10%); +} + +@mixin ios { + .widget-switch-btn-wrapper { + &.checked { + &.widget-switch-btn-wrapper-default { + @include bootstrap-style-ios($default-ios-color); + } + + &.widget-switch-btn-wrapper-success { + @include bootstrap-style-ios($brand-success); + } + + &.widget-switch-btn-wrapper-info { + @include bootstrap-style-ios($brand-info); + } + + &.widget-switch-btn-wrapper-primary { + @include bootstrap-style-ios($brand-primary); + } + + &.widget-switch-btn-wrapper-warning { + @include bootstrap-style-ios($brand-warning); + } + + &.widget-switch-btn-wrapper-danger { + @include bootstrap-style-ios($brand-danger); + } + + &.widget-switch-btn-wrapper-inverse { + @include bootstrap-style-ios($brand-inverse); + } + } + } +} + +@mixin android { + .widget-switch-btn-wrapper { + &.checked { + &.widget-switch-btn-wrapper-default { + @include bootstrap-style-android($default-android-color); + + .widget-switch-btn { + background: $default-android-color; + } + } + + &.widget-switch-btn-wrapper-success { + @include bootstrap-style-android($brand-success); + + .widget-switch-btn { + background: $brand-success; + } + } + + &.widget-switch-btn-wrapper-info { + @include bootstrap-style-android($brand-info); + + .widget-switch-btn { + background: $brand-info; + } + } + + &.widget-switch-btn-wrapper-primary { + @include bootstrap-style-android($brand-primary); + + .widget-switch-btn { + background: $brand-primary; + } + } + + &.widget-switch-btn-wrapper-warning { + @include bootstrap-style-android($brand-warning); + + .widget-switch-btn { + background: $brand-warning; + } + } + + &.widget-switch-btn-wrapper-danger { + @include bootstrap-style-android($brand-danger); + + .widget-switch-btn { + background: $brand-danger; + } + } + + &.widget-switch-btn-wrapper-inverse { + @include bootstrap-style-android($brand-inverse); + + .widget-switch-btn { + background: $brand-inverse; + } + } + } + } +} + +div { + &.widget-switch { + &.iOS { + @include ios; + } + + &.android { + @include android; + } + + &.auto { + @include ios; + } + } +} + +html { + div { + &.dj_android { + .widget-switch { + &.auto { + @include android; + } + } + } + + &.dj_ios { + .widget-switch { + &.auto { + @include ios; + } + } + } + } +} diff --git a/theme/styles/sass/lib/layouts/_layout-atlas-phone.scss b/theme/styles/sass/lib/layouts/_layout-atlas-phone.scss new file mode 100644 index 0000000..f9d6e9d --- /dev/null +++ b/theme/styles/sass/lib/layouts/_layout-atlas-phone.scss @@ -0,0 +1,16 @@ +/* ========================================================================== + Atlas layout + + Extra styling for phone layouts +========================================================================== */ +.layout-atlas-phone { + .region-topbar { + min-height: $m-header-height; + border-style: none; + background-color: $m-header-bg; + + &::before { + display: none; + } + } +} diff --git a/theme/styles/sass/lib/layouts/_layout-atlas-responsive.scss b/theme/styles/sass/lib/layouts/_layout-atlas-responsive.scss new file mode 100644 index 0000000..c5dcae4 --- /dev/null +++ b/theme/styles/sass/lib/layouts/_layout-atlas-responsive.scss @@ -0,0 +1,107 @@ +/* ========================================================================== + Atlas layout + + Extra styling for responsive layouts +========================================================================== */ +.layout-atlas-responsive-default { + $sidebar-width: 60px; + + @media (min-width: $screen-sm) { + .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar { + width: $sidebar-width !important; + + .mx-scrollcontainer-wrapper > .mx-navigationtree ul li { + &.mx-navigationtree-has-items:hover { + a { + background-color: $navsidebar-sub-bg; + } + + ul { + position: absolute; + z-index: 100; + top: 0; + bottom: 0; + left: $sidebar-width; + display: block; + overflow-y: scroll; + min-width: 200px; + padding-top: 10px; + } + } + + &.mx-navigationtree-collapsed, + &.mx-navigationtree-has-items { + ul { + display: none; + } + } + } + } + } + + // Push aside for mobile + @media (max-width: $screen-xs-max) { + .mx-scrollcontainer-open { + width: 1100px; + } + } + + // Sidebar + .region-sidebar { + .toggle-btn { + width: $sidebar-width; + height: 60px; + border-color: transparent; + border-radius: 0; + background: transparent; + } + + .mx-scrollcontainer-wrapper > .mx-navigationtree { + .navbar-inner > ul > li { + & > a { + height: $sidebar-width; + // Glyph icon + .glyphicon { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + margin-left: -5px; + padding: 10px; + border-radius: 3px; + } + + &.active { + .glyphicon { + background: $brand-primary; + } + } + } + } + } + } + + // Topbar + .region-topbar { + } +} + +// Topbar variant +.layout-atlas-responsive-topbar { +} + +// All responsive layouts +.layout-atlas-responsive-default, +.layout-atlas-responsive-topbar { + // Topbar + .region-topbar { + .toggle-btn { + display: none; + + @media (max-width: $screen-xs-max) { + display: inline-block; + } + } + } +} diff --git a/theme/styles/sass/lib/layouts/_layout-atlas-tablet.scss b/theme/styles/sass/lib/layouts/_layout-atlas-tablet.scss new file mode 100644 index 0000000..dfa318e --- /dev/null +++ b/theme/styles/sass/lib/layouts/_layout-atlas-tablet.scss @@ -0,0 +1,8 @@ +/* ========================================================================== + Atlas layout + + Extra styling for tablet layouts +========================================================================== */ +.layout-atlas-tablet { + // tablet +} diff --git a/theme/styles/sass/lib/layouts/_layout-atlas.scss b/theme/styles/sass/lib/layouts/_layout-atlas.scss new file mode 100644 index 0000000..150f73d --- /dev/null +++ b/theme/styles/sass/lib/layouts/_layout-atlas.scss @@ -0,0 +1,111 @@ +/* ========================================================================== + Atlas layout + + The core stucture of all atlas layouts +========================================================================== */ +.layout-atlas { + // Toggle button + .toggle-btn > .glyphicon { + margin: 0; + } + + // Sidebar + .region-sidebar { + background-color: $navsidebar-bg; + + .mx-navigationtree .navbar-inner > ul > li > a { + padding: 0 15px; + + .glyphicon { + margin-right: 10px; + } + } + .toggle-btn { + border-color: transparent; + border-radius: 0; + background: transparent; + } + } + + // Topbar + .region-topbar { + position: relative; + z-index: 1; // Show dropshadow + min-height: $topbar-minimalheight; + border-bottom: 1px solid $navtopbar-border-color; + background-color: $navtopbar-bg; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); + + &::before { + z-index: 1; + display: block; + width: 100%; + height: 4px; + content: ""; + background-color: $brand-primary; + } + // Topbar Content + .topbar-content { + display: flex; + align-items: center; + min-height: $topbar-minimalheight; + } + + // Toggle btn + .toggle-btn { + margin-right: 15px; + padding: 5px; + } + + // For your company, product, or project name + .navbar-brand { + display: inline-block; + // reset bootstrap + float: none; + height: auto; + padding: 0; + line-height: inherit; + + img { + display: inline-block; + @if $brand-logo !=false { + width: 0; + height: 0; + padding: ($brand-logo-height / 2) ($brand-logo-width / 2); + background-image: url($brand-logo); + background-repeat: no-repeat; + background-position: left center; + background-size: $brand-logo-width; + } @else { + width: auto; + height: $brand-logo-height; + } + } + + a { + margin-left: 5px; + color: $navbar-brand-name; + font-size: 20px; + + &:hover, + &:focus { + text-decoration: none; + } + } + } + + .mx-navbar { + display: inline-block; + margin-left: $gutter-size; + vertical-align: middle; + background: transparent; + + & > .mx-navbar-item { + & > a { + margin-top: 5px; + padding: 0 20px; + } + } + } + } +} diff --git a/theme/styles/sass/lib/lib.scss b/theme/styles/sass/lib/lib.scss new file mode 100644 index 0000000..3274d19 --- /dev/null +++ b/theme/styles/sass/lib/lib.scss @@ -0,0 +1,72 @@ +// +// Atlas-UI-Framework v1.0.0 (https://atlas.mendix.com/) +// Copyright (c) 2017 Mendix +// Licensed under MIT (https://github.com/mendix/Atlas-UI-Framework/blob/master/LICENSE) +// + +@import "../custom/custom-variables"; + +@import "variables"; + +// Base +@import "base/animation"; +@import "base/mixins"; +@import "base/reset"; +@import "base/base"; + +// Components +@import "components/inputs"; +@import "components/alerts"; +@import "components/backgrounds"; +@import "components/buttons"; +@import "components/grid"; +@import "components/datagrids"; +@import "components/dataview"; +@import "components/header"; +@import "components/dijit-widgets"; +@import "components/glyphicons"; +@import "components/groupbox"; +@import "components/helpers"; +@import "components/images"; +@import "components/labels"; +@import "components/listview"; +@import "components/modals"; +@import "components/navigationbar"; +@import "components/navigationlist"; +@import "components/navigationtree"; +@import "components/simplemenubar"; +@import "components/tabcontainer"; +@import "components/tables"; +@import "components/templategrids"; +@import "components/typography"; +@import "components/layoutgrid"; +@import "components/progress"; + +// Building Blocks +@import "buildingblocks/alignment-block"; +@import "buildingblocks/breadcrumb"; +@import "buildingblocks/card"; +@import "buildingblocks/controlgroup"; +@import "buildingblocks/pageblocks"; +@import "buildingblocks/pageheader"; +@import "buildingblocks/heroheader"; +@import "buildingblocks/formblock"; +@import "buildingblocks/list"; +@import "buildingblocks/master-detail"; +@import "buildingblocks/userprofile"; +@import "buildingblocks/wizard"; +@import "buildingblocks/timeline"; + +//layouts +@import "layouts/layout-atlas"; +@import "layouts/layout-atlas-phone"; +@import "layouts/layout-atlas-responsive"; +@import "layouts/layout-atlas-tablet"; + +//customwidgets +@import "customwidgets/progress-bar-theme"; +@import "customwidgets/progress-circle-theme"; +@import "customwidgets/range-slider-theme"; +@import "customwidgets/slider-theme"; +@import "customwidgets/star-rating-theme"; +@import "customwidgets/switchwidget"; diff --git a/widgets/GoogleMaps.mpk b/widgets/GoogleMaps.mpk new file mode 100644 index 0000000..f9e532f Binary files /dev/null and b/widgets/GoogleMaps.mpk differ diff --git a/widgets/MobileFeatures.mpk b/widgets/MobileFeatures.mpk new file mode 100644 index 0000000..8a5df9a Binary files /dev/null and b/widgets/MobileFeatures.mpk differ diff --git a/widgets/ProgressCircle.mpk b/widgets/ProgressCircle.mpk new file mode 100644 index 0000000..ecf16b0 Binary files /dev/null and b/widgets/ProgressCircle.mpk differ diff --git a/widgets/SprintrFeedbackWidget.mpk b/widgets/SprintrFeedbackWidget.mpk index 6862b50..656800d 100644 Binary files a/widgets/SprintrFeedbackWidget.mpk and b/widgets/SprintrFeedbackWidget.mpk differ diff --git a/widgets/StarRating.mpk b/widgets/StarRating.mpk new file mode 100644 index 0000000..cd46ec9 Binary files /dev/null and b/widgets/StarRating.mpk differ diff --git a/widgets/Switch.mpk b/widgets/Switch.mpk new file mode 100644 index 0000000..f284baa Binary files /dev/null and b/widgets/Switch.mpk differ diff --git a/widgets/TimeSeries.mpk b/widgets/TimeSeries.mpk new file mode 100644 index 0000000..7192aef Binary files /dev/null and b/widgets/TimeSeries.mpk differ