├── .gitignore ├── LICENSE ├── README.md ├── base ├── _base.scss ├── _mixins.scss ├── _reset.scss ├── _variables.scss └── mixins │ ├── _arrow.scss │ ├── _buttons.scss │ ├── _default-spacing.scss │ ├── _fonts.scss │ └── _groupbox.scss ├── buildingblocks ├── _actionblock.scss ├── _card.scss ├── _controlbar.scss ├── _dashboardcard.scss ├── _dashboardstat.scss ├── _form.scss ├── _formblock.scss ├── _masterdetail.scss ├── _multilevel.scss ├── _pageheader.scss ├── _products.scss ├── _profilecard.scss ├── _profileheader.scss ├── _sectionheader.scss ├── _sidebarheader.scss ├── _tabsfullwidth.scss ├── _wizard.scss └── templategrid │ └── _templategrid-profilecard.scss ├── components ├── _alerts.scss ├── _backgrounds.scss ├── _buttons.scss ├── _datagrids.scss ├── _dataview.scss ├── _dijit-widgets.scss ├── _glyphicons.scss ├── _grid.scss ├── _groupbox.scss ├── _helpers.scss ├── _images.scss ├── _inputs.scss ├── _labels.scss ├── _layoutgrid.scss ├── _listview.scss ├── _modals.scss ├── _navigation.scss ├── _navigationlist.scss ├── _tabcontainer.scss ├── _tables.scss ├── _templategrids.scss └── _typography.scss ├── layouts ├── _base.scss ├── _navlayout-content.scss ├── _navlayout-sidebar.scss └── _navlayout-topbar.scss ├── lib.scss ├── mobile ├── components │ ├── _listview.scss │ ├── _loader.scss │ ├── _mx-header.scss │ └── _tabcontainer.scss └── layouts │ └── _base.scss └── pagetemplates ├── phone ├── _phone-page-dashboard.scss ├── _phone-page-form.scss ├── _phone-page-listview.scss └── _phone-page-wizard.scss ├── responsive ├── _page-dashboard.scss ├── _page-form.scss ├── _page-login.scss ├── _page-masterdetail.scss ├── _page-tabs.scss ├── _page-website.scss └── _page-wizard.scss └── tablet ├── _tablet-page-dashboard.scss ├── _tablet-page-form.scss ├── _tablet-page-masterdetail.scss ├── _tablet-page-tabs.scss └── _tablet-page-wizard.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | *.css.map 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Remco van Herwijnen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mendix UI Framework 2 | This is the library for the Mendix UI Framework to quickly create a beautiful app with Mendix. This library acts as a submodule for the default Mendix themes that can be found [here](https://ux.mendix.com/). 3 | 4 | ### Theme folder structure 5 | The theme folder consists of the default HTML pages, Sass, CSS and resources needed to style your application. 6 | 7 | #### Styles / Sass 8 | In the Sass folder you will notice two main folders, custom and library. The library folder houses the complete Mendix UI Framework and the custom folder is a duplication of the library folder. We advice to do *all customization* in the custom folder. 9 | 10 | ##### Library Folder 11 | We created a framework so our users have a clear understanding what Mendix is capable of. The library folder structure is as follows: 12 | 13 | - Base 14 | - Building Blocks 15 | - Components 16 | - Layouts 17 | - Mobile 18 | 19 | ###### Base 20 | The base folder holds the *architecture* for our framework. Here we have our *mixins*, *variables* and *resets*. The variables is what makes our framework, which holds all global variables for the project (for typography, color schemes, and so on). 21 | 22 | ###### Components 23 | This directory contains all kind of basic components like a datagrid, buttons, label, form, listview, or anything along those lines. They have distinct properties and can't be broken down further without losing their meaning. 24 | 25 | ###### Building Blocks 26 | Building blocks are combined components/widgets. For example *cards* or *headers* are building blocks. A building block could be an image, title and a button built together. 27 | 28 | ###### Layouts 29 | The layout directory contains some styles for the main sections of the layout (topbar, sidebar, footer and so on). 30 | 31 | ###### Mobile 32 | The mobile directory include specific styling for your tablet or phone pages and widgets. This is useful to target only mobile use cases. 33 | 34 | ### Useful links 35 | - [Live theme demo](https://ux.mendix.com/) 36 | - [Mendix UI Framework Website](https://ux.mendix.com/) 37 | - [Blog article about Mendix UI Framework](https://www.mendix.com/blog/the-eye-catching-mendix-ui-framework/) 38 | - [Create a custom theme with the Mendix UI Framework](https://docs.mendix.com/howto/ux/create-a-custom-theme-with-the-mendix-ui-framework) 39 | 40 | ### License 41 | 42 | MIT 43 | -------------------------------------------------------------------------------- /base/_base.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Base 3 | 4 | Default settings 5 | ========================================================================== */ 6 | html { 7 | height: 100%; 8 | } 9 | body { 10 | @include font(normal); 11 | color: $font-base-color; 12 | font-size: $font-base-size; 13 | line-height: $line-height-base; 14 | background-color: $bg-color; 15 | 16 | min-height: 100%; 17 | } 18 | a { 19 | color: $link-color; 20 | -webkit-transition: 0.25s; 21 | -moz-transition: 0.25s; 22 | -o-transition: 0.25s; 23 | transition: 0.25s; 24 | -webkit-backface-visibility: hidden; 25 | } 26 | a:hover { 27 | text-decoration: underline; 28 | color: $link-hover-color; 29 | } 30 | // Address `outline` inconsistency between Chrome and other browsers. 31 | a:focus { 32 | outline: thin dotted; 33 | } 34 | // Improve readability when focused and also mouse hovered in all browsers 35 | a:active, 36 | a:hover { 37 | outline: 0; 38 | } 39 | // Removes large blue border in chrome on focus and active states 40 | input:focus, 41 | button:focus, 42 | .mx-link:focus { 43 | outline: 0; 44 | } 45 | // Removes large blue border for tabindexes from widgets 46 | div[tabindex] { 47 | outline: 0; 48 | } 49 | -------------------------------------------------------------------------------- /base/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/fonts"; 2 | @import "mixins/default-spacing"; 3 | @import "mixins/buttons"; 4 | @import "mixins/groupbox"; 5 | @import "mixins/arrow"; 6 | -------------------------------------------------------------------------------- /base/_reset.scss: -------------------------------------------------------------------------------- 1 | .mx-grid, 2 | .mx-tabcontainer, 3 | .mx-listview, 4 | .mx-templategrid, 5 | .mx-groupbox { 6 | @include default-spacing($type: margin, $direction: bottom, $device: responsive); 7 | } 8 | 9 | .mx-layoutcontainer .mx-layoutcontainer-wrapper { 10 | padding: $padding-layoutcontainer-base; 11 | } 12 | .profile-tablet { 13 | .mx-layoutcontainer .mx-layoutcontainer-wrapper { 14 | padding: $t-padding-layoutcontainer-base; 15 | } 16 | } 17 | .profile-phone { 18 | .mx-layoutcontainer .mx-layoutcontainer-wrapper { 19 | padding: $m-padding-layoutcontainer-base; 20 | } 21 | } 22 | 23 | .mx-layoutcontainer .mx-placeholder { 24 | padding: 0; 25 | 26 | .mx-layoutgrid { 27 | @include default-spacing($type: padding, $direction: all, $device: responsive); 28 | padding-top: 0; 29 | padding-bottom: 0; 30 | 31 | &:first-child { 32 | @include default-spacing($type: padding, $direction: top, $device: responsive); 33 | } 34 | &:last-child { 35 | @include default-spacing($type: padding, $direction: bottom, $device: responsive); 36 | } 37 | &.container { 38 | padding-left: 15px; 39 | padding-right: 15px; 40 | } 41 | .mx-layoutgrid { 42 | padding: 0; 43 | 44 | } 45 | } 46 | } 47 | .profile-phone .mx-layoutcontainer .mx-placeholder { 48 | padding: 0; 49 | .mx-layoutgrid { 50 | @include default-spacing($type: padding, $direction: all, $device: phone); 51 | .mx-layoutgrid { 52 | padding: 0; 53 | } 54 | } 55 | } 56 | .profile-tablet .mx-layoutcontainer .mx-placeholder { 57 | padding: 0; 58 | .mx-layoutgrid { 59 | @include default-spacing($type: padding, $direction: all, $device: tablet); 60 | &.container { 61 | padding-left: 15px; 62 | padding-right: 15px; 63 | } 64 | .mx-layoutgrid { 65 | padding: 0; 66 | } 67 | } 68 | } 69 | .mx-layoutcontainer-wrapper.mx-layoutcontainer-nested { 70 | padding: 0; 71 | } 72 | 73 | // Removing default spacing in specific situations 74 | .pageheader { 75 | .mx-grid, 76 | .mx-tabcontainer, 77 | .mx-listview, 78 | .mx-templategrid, 79 | .mx-groupbox { 80 | margin-bottom: 0; 81 | } 82 | } 83 | 84 | // Quick fix 85 | .profile-phone, 86 | .profile-tablet { 87 | .mx-placeholder > { 88 | .mx-tabcontainer:only-child, 89 | .mx-grid:only-child { 90 | margin-bottom: 0; 91 | } 92 | } 93 | } 94 | 95 | -------------------------------------------------------------------------------- /base/_variables.scss: -------------------------------------------------------------------------------- 1 | //== Mendix UI Framework - Welcome to variables file 2 | //## The Basic step includes the customization that is also available in the Mendix Theme Creator (https://ux.mendix.com) 3 | 4 | // 5 | // ██████╗ █████╗ ███████╗██╗ ██████╗ 6 | // ██╔══██╗██╔══██╗██╔════╝██║██╔════╝ 7 | // ██████╔╝███████║███████╗██║██║ 8 | // ██╔══██╗██╔══██║╚════██║██║██║ 9 | // ██████╔╝██║ ██║███████║██║╚██████╗ 10 | // ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═════╝ 11 | // 12 | 13 | 14 | //== Step 1: Brand Colors 15 | $brand-default: #DDDDDD !default; 16 | $brand-primary: #59C2E6 !default; 17 | $brand-inverse: #3D3F41 !default; 18 | $brand-info: #8AD4ED !default; 19 | $brand-success: #8CC152 !default; 20 | $brand-warning: #F6BB42 !default; 21 | $brand-danger: #D9534F !default; 22 | 23 | $brand-logo: false !default; 24 | $brand-logo-height: 40px !default; 25 | $brand-logo-width: 40px !default; // Only used for CSS brand logo 26 | 27 | 28 | //== Step 2: UI Customization 29 | 30 | // Topbar 31 | $topbar-bg: #FFF !default; 32 | $topbar-minimalheight: 80px !default; 33 | 34 | // Sidebar 35 | $sidebar-bg: $brand-inverse !default; 36 | 37 | // Navbar Brand Name / For your company, product, or project name (used in layouts/base/) 38 | $navbar-brand-name: #000 !default; 39 | 40 | // Background Colors 41 | $bg-color: #FFF !default; 42 | // Background color that is used for specific page templates background 43 | $bg-color-secondary: #EFF4F7 !default; 44 | 45 | // Default Font Size & Color 46 | $font-base-size: 14px !default; 47 | $font-base-color: #000 !default; 48 | 49 | // Default Link Color 50 | $link-color: $brand-primary !default; 51 | $link-hover-color: darken($link-color, 15%) !default; 52 | 53 | 54 | 55 | 56 | // 57 | // █████╗ ██████╗ ██╗ ██╗ █████╗ ███╗ ██╗ ██████╗███████╗██████╗ 58 | // ██╔══██╗██╔══██╗██║ ██║██╔══██╗████╗ ██║██╔════╝██╔════╝██╔══██╗ 59 | // ███████║██║ ██║██║ ██║███████║██╔██╗ ██║██║ █████╗ ██║ ██║ 60 | // ██╔══██║██║ ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║ ██╔══╝ ██║ ██║ 61 | // ██║ ██║██████╔╝ ╚████╔╝ ██║ ██║██║ ╚████║╚██████╗███████╗██████╔╝ 62 | // ╚═╝ ╚═╝╚═════╝ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝╚══════╝╚═════╝ 63 | // 64 | 65 | 66 | //== Typography 67 | //## Change your font family, weight, line-height, headings and more (used in components/typography) 68 | 69 | // Font Family Import (Used for google font plugin in theme creater https://ux.mendix.com/theme-creator.html) 70 | $font-family-import: false !default; 71 | @if $font-family-import != false { // Only import, if the import is set 72 | @import url($font-family-import); 73 | } 74 | 75 | // Font Family / False = fallback from Bootstrap (Helvetica Neue) 76 | $font-family-base: false !default;//"Helvetica Neue", Helvetica, Arial, sans-serif !default; 77 | $font-family-light: false !default;//"Helvetica Neue", Helvetica, Arial, sans-serif !default; 78 | $font-family-semibold: false !default;//"Helvetica Neue", Helvetica, Arial, sans-serif !default; 79 | $font-family-bold: false !default;//"Helvetica Neue", Helvetica, Arial, sans-serif !default; 80 | 81 | // Font Size 82 | $font-size-large: ceil($font-base-size * 1.25) !default; // ~18px 83 | $font-size-small: ceil($font-base-size * 0.85) !default; // ~12px 84 | 85 | // Font Weights 86 | $font-weight-light: 100 !default; 87 | $font-weight-normal: normal !default; 88 | $font-weight-semibold: 500 !default; 89 | $font-weight-bold: bold !default; 90 | 91 | $font-weight-headers: $font-weight-normal !default; 92 | 93 | // Font Header Size 94 | $font-size-h1: 31px !default; 95 | $font-size-h2: 26px !default; 96 | $font-size-h3: 20px !default; 97 | $font-size-h4: 16px !default; 98 | $font-size-h5: $font-base-size !default; 99 | $font-size-h6: 11px !default; 100 | 101 | // Font Header Color 102 | $font-color-headers: $font-base-color !default; 103 | 104 | // Line Height 105 | $line-height-base: 1.428571429 !default; 106 | 107 | 108 | 109 | 110 | //== Gray Shades 111 | //## Different gray shades to be used for our variables and components 112 | $gray-darker: #222 !default; 113 | $gray-dark: #333 !default; 114 | $gray: #555 !default; 115 | $gray-light: #999 !default; 116 | $gray-primary: #DDD !default; 117 | $gray-lighter: #eee !default; 118 | 119 | 120 | 121 | 122 | //== Global Border Color 123 | // The default border color used by Datagrid, Listview, Tables, Dataview, Modals and more 124 | $default-border-color: $gray-primary !default; 125 | 126 | 127 | 128 | 129 | //== Navigation 130 | //## Used in components/navigation 131 | 132 | // Navigation Sidebar 133 | $navsidebar-font-size: $font-base-size !default; 134 | $navsidebar-sub-font-size: $font-size-small !default; 135 | $navsidebar-glyph-size: 1.2em !default; // For glyphicons that you can select in the Mendix Modeler 136 | 137 | $navsidebar-bg: $sidebar-bg !default; 138 | $navsidebar-bg-hover: lighten($navsidebar-bg, 4) !default; 139 | $navsidebar-bg-active: lighten($navsidebar-bg, 8) !default; 140 | $navsidebar-color: #FFF !default; 141 | $navsidebar-color-hover: $brand-primary !default; 142 | $navsidebar-color-active: $brand-primary !default; 143 | 144 | $navsidebar-sub-bg: darken($navsidebar-bg, 4) !default; 145 | $navsidebar-sub-bg-hover: $navsidebar-sub-bg !default; 146 | $navsidebar-sub-bg-active: $navsidebar-sub-bg !default; 147 | $navsidebar-sub-color: #AAA !default; 148 | $navsidebar-sub-color-hover: $brand-primary !default; 149 | $navsidebar-sub-color-active: $brand-primary !default; 150 | 151 | $navsidebar-border-color: $navsidebar-bg-hover !default; 152 | 153 | // Navigation topbar 154 | $navtopbar-font-size: $font-base-size !default; 155 | $navtopbar-sub-font-size: $font-size-small !default; 156 | $navtopbar-glyph-size: 1.2em !default; // For glyphicons that you can select in the Mendix Modeler 157 | 158 | $navtopbar-bg: $topbar-bg !default; 159 | $navtopbar-bg-hover: darken($navtopbar-bg, 4) !default; 160 | $navtopbar-bg-active: darken($navtopbar-bg, 8) !default; 161 | $navtopbar-color: #AAA !default; 162 | $navtopbar-color-hover: $brand-primary !default; 163 | $navtopbar-color-active: $brand-primary !default; 164 | 165 | $navtopbar-sub-bg: lighten($navtopbar-bg, 4) !default; 166 | $navtopbar-sub-bg-hover: $navtopbar-sub-bg !default; 167 | $navtopbar-sub-bg-active: $navtopbar-sub-bg !default; 168 | $navtopbar-sub-color: #AAA !default; 169 | $navtopbar-sub-color-hover: $brand-primary !default; 170 | $navtopbar-sub-color-active: $brand-primary !default; 171 | 172 | //## Used in layouts/base 173 | $navtopbar-border-color: $default-border-color !default; 174 | 175 | 176 | 177 | 178 | //== Form 179 | //## Used in components/inputs 180 | 181 | // Form Label 182 | $form-label-color: #666 !default; 183 | $form-label-size: $font-base-size !default; 184 | $form-label-weight: $font-weight-normal !default; 185 | 186 | // Form Input dimensions 187 | $form-input-height: auto !default; 188 | $form-input-padding-y: 6px !default; 189 | $form-input-padding-x: 8px !default; 190 | $form-input-font-size: $form-label-size !default; 191 | $form-input-line-height: $line-height-base !default; 192 | $form-input-border-radius: 4px !default; 193 | 194 | // Form Input styling 195 | $form-input-bg: #FFF !default; 196 | $form-input-bg-focus: #FFF !default; 197 | $form-input-bg-disabled: $gray-lighter !default; 198 | $form-input-color: $font-base-color !default; 199 | $form-input-focus-color: $form-input-color !default; 200 | $form-input-disabled-color: $form-input-color !default; 201 | $form-input-placeholder-color: $gray-light !default; 202 | $form-input-border-color: $default-border-color !default; 203 | $form-input-border-focus-color: $brand-primary !default; 204 | 205 | // Form Group 206 | $form-group-margin-bottom: 15px !default; 207 | $form-group-gutter: 15px !default; 208 | 209 | 210 | 211 | 212 | //== Buttons 213 | //## Define background-color, border-color and text. Used in components/buttons 214 | 215 | // Button Text Size 216 | $btn-font-size: 12px !default; 217 | 218 | // Button Background Color 219 | $btn-default-bg: $brand-default !default; 220 | $btn-inverse-bg: $brand-inverse !default; 221 | $btn-primary-bg: $brand-primary !default; 222 | $btn-info-bg: $brand-info !default; 223 | $btn-success-bg: $brand-success !default; 224 | $btn-warning-bg: $brand-warning !default; 225 | $btn-danger-bg: $brand-danger !default; 226 | 227 | // Button Border Color 228 | $btn-default-border-color: $brand-default !default; 229 | $btn-inverse-border-color: $brand-inverse !default; 230 | $btn-primary-border-color: $brand-primary !default; 231 | $btn-info-border-color: $brand-info !default; 232 | $btn-success-border-color: $brand-success !default; 233 | $btn-warning-border-color: $brand-warning !default; 234 | $btn-danger-border-color: $brand-danger !default; 235 | 236 | // Button Text Color 237 | $btn-default-color: $font-base-color !default; 238 | $btn-inverse-color: #FFF !default; 239 | $btn-primary-color: #FFF !default; 240 | $btn-info-color: #FFF !default; 241 | $btn-success-color: #FFF !default; 242 | $btn-warning-color: #FFF !default; 243 | $btn-danger-color: #FFF !default; 244 | 245 | 246 | 247 | // 248 | // ███████╗██╗ ██╗██████╗ ███████╗██████╗ ████████╗ 249 | // ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝ 250 | // █████╗ ╚███╔╝ ██████╔╝█████╗ ██████╔╝ ██║ 251 | // ██╔══╝ ██╔██╗ ██╔═══╝ ██╔══╝ ██╔══██╗ ██║ 252 | // ███████╗██╔╝ ██╗██║ ███████╗██║ ██║ ██║ 253 | // ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ 254 | // 255 | 256 | //== Color variations 257 | //## These variations are used to support several other variables and components 258 | 259 | // Basic Text colors 260 | $color-text-black: #000 !default; 261 | $color-text-white: #FFF !default; 262 | $color-text-black-secondary: lighten($color-text-black, 40%) !default; 263 | $color-text-black-disabled: rgba($color-text-black, .26) !default; 264 | $color-text-black-hint: rgba($color-text-black, .26) !default; 265 | 266 | $color-text-white-secondary: rgba($color-text-white, .7) !default; 267 | $color-text-white-disabled: rgba($color-text-white, .3) !default; 268 | $color-text-white-hint: rgba($color-text-white, .3) !default; 269 | 270 | // Color variations 271 | $color-default-darker: shade($brand-default,40) !default; 272 | $color-default-dark: shade($brand-default,26) !default; 273 | $color-default-light: tint($brand-default,40) !default; 274 | $color-default-lighter: tint($brand-default,80) !default; 275 | 276 | $color-inverse-darker: shade($brand-inverse,40) !default; 277 | $color-inverse-dark: shade($brand-inverse,26) !default; 278 | $color-inverse-light: tint($brand-inverse,40) !default; 279 | $color-inverse-lighter: tint($brand-inverse,80) !default; 280 | 281 | $color-primary-darker: shade($brand-primary,40) !default; 282 | $color-primary-dark: shade($brand-primary,26) !default; 283 | $color-primary-light: tint($brand-primary,40) !default; 284 | $color-primary-lighter: tint($brand-primary,80) !default; 285 | 286 | $color-info-darker: shade($brand-info,40) !default; 287 | $color-info-dark: shade($brand-info,26) !default; 288 | $color-info-light: tint($brand-info,40) !default; 289 | $color-info-lighter: tint($brand-info,80) !default; 290 | 291 | $color-success-darker: shade($brand-success,40) !default; 292 | $color-success-dark: shade($brand-success,26) !default; 293 | $color-success-light: tint($brand-success,40) !default; 294 | $color-success-lighter: tint($brand-success,80) !default; 295 | 296 | $color-warning-darker: shade($brand-warning,40) !default; 297 | $color-warning-dark: shade($brand-warning,26) !default; 298 | $color-warning-light: tint($brand-warning,40) !default; 299 | $color-warning-lighter: tint($brand-warning,80) !default; 300 | 301 | $color-danger-darker: shade($brand-danger,40) !default; 302 | $color-danger-dark: shade($brand-danger,26) !default; 303 | $color-danger-light: tint($brand-danger,40) !default; 304 | $color-danger-lighter: tint($brand-danger,80) !default; 305 | 306 | 307 | 308 | 309 | //== Grids 310 | //## Used for Datagrid, Templategrid, Listview & Tables (see components folder) 311 | 312 | // Default Border Colors 313 | $grid-border-color: $default-border-color !default; 314 | 315 | // Background Colors 316 | $grid-bg: #FFF !default; 317 | $grid-bg-header: transparent !default; // Grid Headers 318 | $grid-bg-hover: shade($color-primary-lighter,3) !default; 319 | $grid-bg-selected: $brand-primary !default; 320 | $grid-bg-selected-hover: shade($color-primary-lighter,3) !default; 321 | 322 | // Striped Background Color 323 | $grid-bg-striped: lighten($grid-border-color,5) !default; 324 | 325 | // Background Footer Color 326 | $grid-footer-bg: $gray-primary !default; 327 | 328 | // Text Color 329 | $grid-selected-color: $font-base-color !default; 330 | 331 | // Paging Colors 332 | $grid-paging-bg: transparent !default; 333 | $grid-paging-bg-hover: transparent !default; 334 | $grid-paging-border-color: transparent !default; 335 | $grid-paging-border-color-hover: transparent !default; 336 | $grid-paging-color: $gray-light !default; 337 | $grid-paging-color-hover: $brand-primary !default; 338 | 339 | 340 | 341 | 342 | //== Tabs 343 | //## Default variables for Tab Container Widget (used in components/tabcontainer) 344 | 345 | // Text Color 346 | $tabs-color: $color-text-black-secondary !default; 347 | $tabs-color-active: $color-text-black !default; 348 | $tabs-lined-color-active: $brand-primary !default; 349 | 350 | // Border Color 351 | $tabs-border-color: $default-border-color !default; 352 | $tabs-lined-border-color: $brand-primary !default; 353 | 354 | // Background Color 355 | $tabs-bg: #FFF !default; 356 | $tabs-bg-hover: lighten($tabs-border-color,5) !default; 357 | $tabs-bg-active: $brand-primary !default; 358 | 359 | 360 | 361 | 362 | //== Modals 363 | //## Default Mendix Modal, Blocking Modal and Login Modal (used in components/modals) 364 | 365 | // Background Color 366 | $modal-header-bg: transparent !default; 367 | 368 | // Border Color 369 | $modal-header-border-color: $default-border-color !default; 370 | 371 | // Text Color 372 | $modal-header-color: $font-base-color !default; 373 | 374 | 375 | 376 | 377 | //== Dataview 378 | //## Default variables for Dataview Widget (used in components/dataview) 379 | 380 | // Controls 381 | $dataview-controls-bg: transparent !default; 382 | $dataview-controls-border-color: $default-border-color !default; 383 | 384 | // Empty Message 385 | $dataview-emptymessage-bg: $bg-color !default; 386 | $dataview-emptymessage-color: $font-base-color !default; 387 | 388 | 389 | 390 | 391 | //== Alerts 392 | //## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) 393 | 394 | // Background Color 395 | $alert-info-bg: $color-info-lighter !default; 396 | $alert-success-bg: $color-success-lighter !default; 397 | $alert-warning-bg: $color-warning-lighter !default; 398 | $alert-danger-bg: $color-danger-lighter !default; 399 | 400 | // Text Color 401 | $alert-info-color: $color-info-darker !default; 402 | $alert-success-color: $color-success-darker !default; 403 | $alert-warning-color: $color-warning-darker !default; 404 | $alert-danger-color: $color-danger-darker !default; 405 | 406 | // Border Color 407 | $alert-info-border-color: $color-info-dark !default; 408 | $alert-success-border-color: $color-success-dark !default; 409 | $alert-warning-border-color: $color-warning-dark !default; 410 | $alert-danger-border-color: $color-danger-dark !default; 411 | 412 | 413 | 414 | 415 | //== Labels 416 | //## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels) 417 | 418 | // Background Color 419 | $label-default-bg: $brand-default !default; 420 | $label-primary-bg: $brand-primary !default; 421 | $label-info-bg: $brand-info !default; 422 | $label-success-bg: $brand-success !default; 423 | $label-warning-bg: $brand-warning !default; 424 | $label-danger-bg: $brand-danger !default; 425 | 426 | // Border Color 427 | $label-default-border-color: $brand-default !default; 428 | $label-primary-border-color: $brand-primary !default; 429 | $label-info-border-color: $brand-info !default; 430 | $label-success-border-color: $brand-success !default; 431 | $label-warning-border-color: $brand-warning !default; 432 | $label-danger-border-color: $brand-danger !default; 433 | 434 | // Text Color 435 | $label-default-color: $font-base-color !default; 436 | $label-primary-color: #FFF !default; 437 | $label-info-color: #FFF !default; 438 | $label-success-color: #FFF !default; 439 | $label-warning-color: #FFF !default; 440 | $label-danger-color: #FFF !default; 441 | 442 | 443 | 444 | 445 | //== Groupbox 446 | //## Default variables for Groupbox Widget (used in components/groupbox) 447 | 448 | // Background Color 449 | $groupbox-default-bg: $brand-default !default; 450 | $groupbox-inverse-bg: $brand-inverse !default; 451 | $groupbox-primary-bg: $brand-primary !default; 452 | $groupbox-info-bg: $brand-info !default; 453 | $groupbox-success-bg: $brand-success !default; 454 | $groupbox-warning-bg: $brand-warning !default; 455 | $groupbox-danger-bg: $brand-danger !default; 456 | $groupbox-white-bg: #FFF !default; 457 | 458 | // Text Color 459 | $groupbox-default-color: $color-text-black !default; 460 | $groupbox-inverse-color: $color-text-white !default; 461 | $groupbox-primary-color: $color-text-white !default; 462 | $groupbox-info-color: $color-text-white !default; 463 | $groupbox-success-color: $color-text-white !default; 464 | $groupbox-warning-color: $color-text-white !default; 465 | $groupbox-danger-color: $color-text-white !default; 466 | $groupbox-white-color: $font-base-color !default; 467 | 468 | 469 | 470 | 471 | //== Callout (groupbox) Colors 472 | //## Extended variables for Groupbox Widget (used in components/groupbox) 473 | 474 | // Text and Border Color 475 | $callout-info-color: $brand-info !default; 476 | $callout-success-color: $brand-success !default; 477 | $callout-warning-color: $brand-warning !default; 478 | $callout-danger-color: $brand-danger !default; 479 | 480 | // Background Color 481 | $callout-info-bg: $color-info-lighter !default; 482 | $callout-success-bg: $color-success-lighter !default; 483 | $callout-warning-bg: $color-warning-lighter !default; 484 | $callout-danger-bg: $color-danger-lighter !default; 485 | 486 | 487 | 488 | 489 | //== Mobile 490 | //## 491 | 492 | //== Mobile Header 493 | //## Specific mobile widgets and components (used in mobile/components/mx-header) 494 | 495 | // Height 496 | $m-header-height: 44px !default; 497 | 498 | // Background Color 499 | $m-header-bg: $topbar-bg !default; 500 | 501 | // Text Color 502 | $m-header-color: $font-base-color !default; 503 | 504 | // Link Color 505 | $m-header-link-color: $link-color !default; 506 | 507 | 508 | 509 | 510 | //== Layout Spacing 511 | //## Advanced layout options (used in base/mixins/default-spacing) 512 | 513 | $default-spacing-top: 35px !default; 514 | $default-spacing-right: 40px !default; 515 | $default-spacing-bottom: 35px !default; 516 | $default-spacing-left: 40px !default; 517 | 518 | $m-default-spacing-top: 10px !default; 519 | $m-default-spacing-right: 15px !default; 520 | $m-default-spacing-bottom: 10px !default; 521 | $m-default-spacing-left: 15px !default; 522 | 523 | $t-default-spacing-top: 20px !default; 524 | $t-default-spacing-right: 30px !default; 525 | $t-default-spacing-bottom: 20px !default; 526 | $t-default-spacing-left: 30px !default; 527 | 528 | 529 | 530 | 531 | //== Layouts 532 | //## 533 | 534 | // Scroll container / layout container default padding 535 | $padding-layoutcontainer-base: 0px !default; 536 | $m-padding-layoutcontainer-base: 0px !default; 537 | $t-padding-layoutcontainer-base: 0px !default; 538 | 539 | // Combined spacing 540 | $default-spacing: $default-spacing-top $default-spacing-right $default-spacing-bottom $default-spacing-left !default; 541 | $m-default-spacing: $m-default-spacing-top $m-default-spacing-right $m-default-spacing-bottom $m-default-spacing-left !default; 542 | $t-default-spacing: $t-default-spacing-top $t-default-spacing-right $t-default-spacing-bottom $t-default-spacing-left !default; 543 | 544 | 545 | 546 | //== Tables 547 | //## Table spacing options (used in components/tables) 548 | 549 | $padding-table-cell-top: 8px !default; 550 | $padding-table-cell-bottom: 8px !default; 551 | $padding-table-cell-left: 8px !default; 552 | $padding-table-cell-right: 8px !default; 553 | 554 | 555 | 556 | 557 | //== Media queries breakpoints 558 | //## Define the breakpoints at which your layout will change, adapting to different screen sizes. 559 | 560 | // Extra small screen / phone Deprecated `$screen-xs` as of v3.0.1 561 | $screen-xs: 480px !default; 562 | // Deprecated `$screen-xs-min` as of v3.2.0 563 | $screen-xs-min: $screen-xs !default; 564 | // Deprecated `$screen-phone` as of v3.0.1 565 | $screen-phone: $screen-xs-min !default; 566 | 567 | // Small screen / tablet Deprecated `$screen-sm` as of v3.0.1 568 | $screen-sm: 768px !default; 569 | $screen-sm-min: $screen-sm !default; 570 | // Deprecated `$screen-tablet` as of v3.0.1 571 | $screen-tablet: $screen-sm-min !default; 572 | 573 | // Medium screen / desktop Deprecated `$screen-md` as of v3.0.1 574 | $screen-md: 992px !default; 575 | $screen-md-min: $screen-md !default; 576 | // Deprecated `$screen-desktop` as of v3.0.1 577 | $screen-desktop: $screen-md-min !default; 578 | 579 | // Large screen / wide desktop Deprecated `$screen-lg` as of v3.0.1 580 | $screen-lg: 1200px !default; 581 | $screen-lg-min: $screen-lg !default; 582 | // Deprecated `$screen-lg-desktop` as of v3.0.1 583 | $screen-lg-desktop: $screen-lg-min !default; 584 | 585 | // So media queries don't overlap when required, provide a maximum 586 | $screen-xs-max: ($screen-sm-min - 1) !default; 587 | $screen-sm-max: ($screen-md-min - 1) !default; 588 | $screen-md-max: ($screen-lg-min - 1) !default; 589 | -------------------------------------------------------------------------------- /base/mixins/_arrow.scss: -------------------------------------------------------------------------------- 1 | // CSS - ARROW 2 | // A mixin to create a arrow to a side of a box 3 | // 4 | // *dont forget to put position relative on the wrapper 5 | // 6 | // @include css-arrow($position, $height, $width, $bg-color, $arrow-color, $arrow-border-width) 7 | // 8 | // Inputs: 9 | // - position: top, bottom, left, right; 10 | // - height 11 | // - width 12 | // - color of background 13 | // - color of border 14 | // - border width 15 | ///////////////////////////////////////////////////////////////// 16 | @mixin css-arrow($position: "top", $height: 10px, $width: 10px, $bg-color: #AAA, $arrow-color: #CCC, $arrow-border-width: 0px) { 17 | $position: unquote($position); 18 | $position: quote($position); 19 | position: relative; 20 | 21 | &:after, &:before { 22 | position: absolute; 23 | width: 0; 24 | height: 0; 25 | border: solid transparent; 26 | border-color: transparent; 27 | content: " "; 28 | pointer-events: none; 29 | } 30 | 31 | @if $position == "top" { 32 | &:after, &:before { 33 | bottom: 100%; 34 | } 35 | 36 | &:after { 37 | left: 50%; 38 | margin-left: ($width - $width - $width); 39 | border-width: $height $width; 40 | border-bottom-color: $bg-color; 41 | } 42 | 43 | &:before { 44 | left: 50%; 45 | margin-left: ($width - $width - $width - $arrow-border-width); 46 | border-width: $height + 1 $width + $arrow-border-width; 47 | border-bottom-color: $arrow-color; 48 | } 49 | } 50 | 51 | @if $position == "right" { 52 | &:after, &:before { 53 | left: 100%; 54 | } 55 | 56 | &:after { 57 | top: 50%; 58 | margin-top: ($width - $width - $width); 59 | border-width: $height $width; 60 | border-left-color: $bg-color; 61 | } 62 | 63 | &:before { 64 | top: 50%; 65 | margin-top: ($width - $width - $width - $arrow-border-width); 66 | border-width: $height + 1 $width + $arrow-border-width; 67 | border-left-color: $arrow-color; 68 | } 69 | } 70 | 71 | @if $position == "bottom" { 72 | &:after, &:before { 73 | top: 100%; 74 | } 75 | 76 | &:after { 77 | left: 50%; 78 | margin-left: ($width - $width - $width); 79 | border-width: $height $width; 80 | border-top-color: $bg-color; 81 | } 82 | 83 | &:before { 84 | left: 50%; 85 | margin-left: ($width - $width - $width - $arrow-border-width); 86 | border-width: $height + 1 $width + $arrow-border-width; 87 | border-top-color: $arrow-color; 88 | } 89 | } 90 | 91 | @if $position == "left" { 92 | &:after, &:before { 93 | right: 100%; 94 | } 95 | 96 | &:after { 97 | top: 50%; 98 | margin-top: ($width - $width - $width); 99 | border-width: $height $width; 100 | border-right-color: $bg-color; 101 | } 102 | 103 | &:before { 104 | top: 50%; 105 | margin-top: ($width - $width - $width - $arrow-border-width); 106 | border-width: $height + 1 $width + $arrow-border-width; 107 | border-right-color: $arrow-color; 108 | } 109 | } 110 | } -------------------------------------------------------------------------------- /base/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | @mixin button-variant($color, $background, $border) { 2 | border-color: $border; 3 | background-color: $background; 4 | color: $color; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | .open > &.dropdown-toggle { 11 | border-color: darken($border, 10%); 12 | background-color: darken($background, 10%); 13 | color: $color; 14 | } 15 | &:active, 16 | &.active, 17 | .open > &.dropdown-toggle { 18 | background-image: none; 19 | } 20 | &.disabled, 21 | &[disabled], 22 | fieldset[disabled] & { 23 | &, 24 | &:hover, 25 | &:focus, 26 | &:active, 27 | &.active { 28 | border-color: $border; 29 | background-color: $background; 30 | } 31 | } 32 | 33 | &.btn-bordered { 34 | background-color: transparent; 35 | color: $border; 36 | 37 | &:hover, 38 | &:focus, 39 | &:active, 40 | &.active, 41 | .open > &.dropdown-toggle { 42 | background-color: $background; 43 | border-color: $border; 44 | color: $color; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /base/mixins/_default-spacing.scss: -------------------------------------------------------------------------------- 1 | @mixin default-spacing ($type: padding, $direction: all, $device: responsive) { 2 | @if $device == responsive { 3 | @if $direction == all { 4 | @media (max-width: $screen-xs-max){ 5 | #{$type}: $m-default-spacing; 6 | } 7 | @media (min-width: $screen-sm) { 8 | #{$type}: $t-default-spacing; 9 | } 10 | @media (min-width: $screen-md) { 11 | #{$type}: $default-spacing; 12 | } 13 | } @else if $direction == top { 14 | @media (max-width: $screen-xs-max){ 15 | #{$type}-top: $m-default-spacing-bottom; 16 | } 17 | @media (min-width: $screen-sm) { 18 | #{$type}-top: $t-default-spacing-top; 19 | } 20 | @media (min-width: $screen-md) { 21 | #{$type}-top: $default-spacing-top; 22 | } 23 | } @else if $direction == right { 24 | @media (max-width: $screen-xs-max){ 25 | #{$type}-right: $m-default-spacing-right; 26 | } 27 | @media (min-width: $screen-sm) { 28 | #{$type}-right: $t-default-spacing-right; 29 | } 30 | @media (min-width: $screen-md) { 31 | #{$type}-right: $default-spacing-right; 32 | } 33 | } @else if $direction == bottom { 34 | @media (max-width: $screen-xs-max){ 35 | #{$type}-bottom: $m-default-spacing-bottom; 36 | } 37 | @media (min-width: $screen-sm) { 38 | #{$type}-bottom: $t-default-spacing-bottom; 39 | } 40 | @media (min-width: $screen-md) { 41 | #{$type}-bottom: $default-spacing-bottom; 42 | } 43 | } @else if $direction == left { 44 | @media (max-width: $screen-xs-max){ 45 | #{$type}-left: $m-default-spacing-left; 46 | } 47 | @media (min-width: $screen-sm) { 48 | #{$type}-left: $t-default-spacing-left; 49 | } 50 | @media (min-width: $screen-md) { 51 | #{$type}-left: $default-spacing-left; 52 | } 53 | } 54 | } @else if $device == tablet { 55 | @if $direction == all { 56 | #{$type}: $t-default-spacing; 57 | } @else if $direction == top { 58 | #{$type}-top: $t-default-spacing-bottom; 59 | } @else if $direction == right { 60 | #{$type}-right: $t-default-spacing-right; 61 | } @else if $direction == bottom { 62 | #{$type}-bottom: $t-default-spacing-bottom; 63 | } @else if $direction == left { 64 | #{$type}-left: $t-default-spacing-left; 65 | } 66 | } @else if $device == mobile { 67 | @if $direction == all { 68 | #{$type}: $m-default-spacing; 69 | } @else if $direction == top { 70 | #{$type}-top: $m-default-spacing-bottom; 71 | } @else if $direction == right { 72 | #{$type}-right: $m-default-spacing-right; 73 | } @else if $direction == bottom { 74 | #{$type}-bottom: $m-default-spacing-bottom; 75 | } @else if $direction == left { 76 | #{$type}-left: $m-default-spacing-left; 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /base/mixins/_fonts.scss: -------------------------------------------------------------------------------- 1 | @mixin font($weight: "normal") { 2 | 3 | $weight: unquote($weight); 4 | $weight: quote($weight); 5 | @if $weight == normal { 6 | @if($font-family-base) { 7 | font-family: $font-family-base; 8 | } 9 | font-weight: $font-weight-normal; 10 | } @else if $weight == "light" { 11 | @if($font-family-light) { 12 | font-family: $font-family-light; 13 | } 14 | font-weight: $font-weight-light; 15 | } @else if $weight == "semibold" { 16 | @if($font-family-semibold) { 17 | font-family: $font-family-semibold; 18 | } 19 | font-weight: $font-weight-semibold; 20 | } @else if $weight == "bold" { 21 | @if($font-family-bold) { 22 | font-family: $font-family-bold; 23 | } 24 | font-weight: $font-weight-bold; 25 | } 26 | } -------------------------------------------------------------------------------- /base/mixins/_groupbox.scss: -------------------------------------------------------------------------------- 1 | @mixin groupbox-variant($color, $background) { 2 | > .mx-groupbox-header { 3 | background: $background; 4 | color: $color; 5 | border-color: $background; 6 | } 7 | > .mx-groupbox-body { 8 | border-color: $background; 9 | } 10 | } -------------------------------------------------------------------------------- /buildingblocks/_actionblock.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Action Block 3 | ========================================================================== */ 4 | .actionblock { 5 | @include font(bold); 6 | padding: 20px 0; 7 | margin: 10px 0; 8 | overflow: hidden; 9 | text-overflow: ellipsis; 10 | width: 100%; 11 | white-space: nowrap; 12 | span { 13 | display: block; 14 | margin: auto auto 20px auto; 15 | font-size: 72px; 16 | } 17 | img { 18 | height: 72px; 19 | display: block; 20 | margin: auto auto 20px auto; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /buildingblocks/_card.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Card 3 | ========================================================================== */ 4 | .card { 5 | padding: 20px; 6 | margin: 0 0 30px 0; 7 | border: 1px solid $default-border-color; 8 | background-color: #FFF; 9 | border-radius: 3px; 10 | 11 | @media only screen and (max-width: 1024px) { 12 | padding: 10px; 13 | } 14 | } 15 | .card-maps { 16 | padding: 0; 17 | } 18 | 19 | /* Title + button + border below title and button */ 20 | .card-header-action { 21 | overflow: hidden; 22 | margin-bottom: 20px; 23 | .card-title { 24 | float: left; 25 | } 26 | .btn { 27 | float: right; 28 | } 29 | } 30 | .card-details { 31 | padding: 10px; 32 | } 33 | .card-title { 34 | margin-top: 0; 35 | 36 | @media only screen and (max-width: 1024px) { 37 | font-size: 18px; 38 | } 39 | } 40 | .card-subtitle { 41 | font-size: 14px; 42 | color: $color-text-black-secondary; 43 | margin-bottom: 10px; 44 | } 45 | .card-annotation { 46 | text-transform: uppercase; 47 | letter-spacing: 8px; 48 | padding-bottom: 10px; 49 | } 50 | .card-icon { 51 | border-radius: 50%; 52 | margin: 30px auto; 53 | width: 125px; 54 | height: 125px; 55 | 56 | @media (max-width: $screen-md) { 57 | width: 75px; 58 | height: 75px; 59 | } 60 | 61 | .glyphicon { 62 | font-size: 60px; 63 | position: relative; 64 | top: 50%; 65 | transform: translateY(-50%); 66 | 67 | @media (max-width: $screen-md) { 68 | font-size: 28px; 69 | } 70 | } 71 | } 72 | .card-image { 73 | margin: 30px auto; 74 | } 75 | .card-user-image { 76 | border: 4px solid #FFF; 77 | } 78 | .card-link { 79 | font-size: $font-size-small; 80 | } 81 | -------------------------------------------------------------------------------- /buildingblocks/_controlbar.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Controlbar 3 | 4 | Can be used with action buttons instead of a default dataview controlbar 5 | ========================================================================== */ 6 | .controlbar { 7 | border-top: 1px solid $gray-lighter; 8 | padding-top: 10px; 9 | margin-top: 20px; 10 | } 11 | -------------------------------------------------------------------------------- /buildingblocks/_dashboardcard.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Dashboard Card 3 | ========================================================================== */ 4 | .dashboardcard { 5 | padding: 20px; 6 | margin: 0 0 40px 0; 7 | border: 1px solid $default-border-color; 8 | background-color: #FFF; 9 | border-radius: 3px; 10 | } 11 | .dashboardcard-title { 12 | margin-top: 0; 13 | } 14 | .dashboardcard-subtitle { 15 | font-size: 14px; 16 | color: $color-text-black-secondary; 17 | margin-bottom: 10px; 18 | } 19 | .dashboardcard-link { 20 | font-size: $font-size-small; 21 | } 22 | 23 | @media only screen and (max-width: 960px) { 24 | .dashboardcard { 25 | padding: 10px; 26 | margin: 0 0 20px 0; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /buildingblocks/_dashboardstat.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Dashboard Stats 3 | 4 | Used in dashboard 5 | ========================================================================== */ 6 | .dashboardstat { 7 | margin: 30px 0; 8 | 9 | @media (max-width: $screen-md) { 10 | margin: 10px 0; 11 | } 12 | 13 | .dashboardstat-left, 14 | .dashboardstat-right { 15 | display: table-cell; 16 | vertical-align: top; 17 | } 18 | } 19 | .dashboardstat-icon { 20 | font-size: 30px; 21 | padding: 8px 14px; 22 | margin: 5px 10px 0 0; 23 | 24 | @media (max-width: $screen-md) { 25 | font-size: 20px; 26 | } 27 | } 28 | .dashboardstat-title { 29 | font-size: 18px; 30 | color: $gray-light; 31 | text-transform: uppercase; 32 | 33 | @media (max-width: $screen-md) { 34 | font-size: 13px; 35 | } 36 | } 37 | .dashboardstat-number { 38 | font-size: 72px; 39 | line-height: 1em; 40 | color: $color-text-black; 41 | 42 | @media (max-width: $screen-md) { 43 | font-size: 30px; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /buildingblocks/_form.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Form 3 | 4 | To extend the default Bootstrap form 5 | ========================================================================== */ 6 | .form { 7 | 8 | } 9 | .form-footer { 10 | border-top: 1px solid $gray-lighter; 11 | padding: 10px 0; 12 | margin-top: 20px; 13 | } 14 | -------------------------------------------------------------------------------- /buildingblocks/_formblock.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Form Block 3 | 4 | Used in default forms 5 | ========================================================================== */ 6 | .formblock { 7 | margin-bottom: 20px; 8 | margin-top: 20px; 9 | } 10 | .formblock-header { 11 | color: $brand-primary; 12 | border-bottom: 1px solid $default-border-color; 13 | padding-bottom: 5px; 14 | margin-bottom: 15px; 15 | } 16 | -------------------------------------------------------------------------------- /buildingblocks/_masterdetail.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Master Detail Listview 3 | ========================================================================== */ 4 | .masterdetail-listview { 5 | background-color: $bg-color-secondary; 6 | .mx-listview { 7 | height: 100%; 8 | margin: 0; 9 | .mx-listview-item { 10 | background-color: transparent; 11 | 12 | &.selected { 13 | color: #FFF; 14 | .mx-link { 15 | color: #FFF; 16 | } 17 | 18 | &:hover, 19 | &:active { 20 | background-color: $grid-bg-selected !important; 21 | } 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /buildingblocks/_multilevel.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Multilevel 3 | ========================================================================== */ 4 | .multilevel-tabs .mx-tabcontainer-tabs { 5 | margin-bottom: 10px; 6 | } 7 | .multilevel-list { 8 | @extend .listview-lined; 9 | @extend .listview-hover; 10 | .mx-listview-list { 11 | border-left: 1px solid $gray-lighter; 12 | border-right: 1px solid $gray-lighter; 13 | .mx-listview-item { 14 | padding: 10px; 15 | border-color: $gray-lighter; 16 | border-left: 4px solid $gray-lighter; 17 | border-right: none; 18 | border-radius: 0; 19 | -webkit-transition: all .2s; 20 | -o-transition: all .2s; 21 | transition: all .2s; 22 | 23 | &:first-child { 24 | border-radius: 0; 25 | } 26 | &:last-child { 27 | border-radius: 0; 28 | } 29 | &.selected { 30 | border-left: 4px solid $brand-primary; 31 | background-color: $gray-lighter !important; 32 | } 33 | } 34 | } 35 | } 36 | .multilevel-title { 37 | label { 38 | font-weight: bold; 39 | } 40 | } 41 | .multilevel-subtitle { 42 | color: $gray; 43 | } 44 | .multilevel-message-header { 45 | color: $gray; 46 | margin-bottom: 10px; 47 | border-bottom: 1px solid $gray-primary; 48 | } 49 | .multilevel-message-header-title { 50 | font-size: $font-size-h2; 51 | } 52 | .multilevel-message-header-subtitle { 53 | font-size: $font-size-h4; 54 | margin-bottom: 10px; 55 | } 56 | .multilevel-message-text { 57 | margin: 10px 0; 58 | } 59 | .multilevel-grid { 60 | @extend .datagrid-hover; 61 | @extend .datagrid-fullsearch; 62 | @extend .datagrid-transparent; 63 | 64 | .mx-datagrid-head-table th { 65 | border-style: none; 66 | } 67 | .mx-datagrid-body-table { 68 | border-left: 1px solid $default-border-color; 69 | border-right: 1px solid $default-border-color; 70 | border-bottom: 1px solid $default-border-color; 71 | .mx-datagrid-body tr { 72 | td { 73 | border-color: $gray-lighter; 74 | border-left: 4px solid $gray-lighter; 75 | -webkit-transition: all .2s; 76 | -o-transition: all .2s; 77 | transition: all .2s; 78 | } 79 | &.selected td, 80 | &.selected:hover td { 81 | border-left: 4px solid $brand-primary; 82 | background-color: $gray-lighter !important; 83 | } 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /buildingblocks/_pageheader.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Page Header 3 | ========================================================================== */ 4 | .pageheader { 5 | border-bottom: 2px solid $default-border-color; 6 | @include default-spacing($type: margin, $direction: bottom, $device: responsive); 7 | } 8 | .pageheader.pageheader-fullwidth { 9 | background-color: $bg-color-secondary; 10 | border-bottom: 1px solid $default-border-color; 11 | margin-bottom: 0; 12 | } 13 | .profile-tablet { 14 | .pageheader.pageheader-fullwidth { 15 | border-style: none; 16 | } 17 | } 18 | .pageheader-title { 19 | margin-bottom: 0; 20 | margin-top: 0; 21 | } 22 | .pageheader-subtitle { 23 | color: $color-text-black-secondary; 24 | } 25 | -------------------------------------------------------------------------------- /buildingblocks/_products.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Products 3 | 4 | Used in Website page templates 5 | ========================================================================== */ 6 | .product-header { 7 | padding: 25px 0; 8 | border-bottom: 1px solid $default-border-color; 9 | } 10 | .product-content { 11 | 12 | } 13 | .product-title { 14 | margin-bottom: 0; 15 | margin-top: 0; 16 | } 17 | .product-subtitle { 18 | color: $color-text-black-secondary; 19 | } 20 | .product-btn { 21 | margin-top: 10px; 22 | } 23 | -------------------------------------------------------------------------------- /buildingblocks/_profilecard.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Profile Card 3 | ========================================================================== */ 4 | .profilecard { 5 | display: table; 6 | width: 100%; 7 | margin-bottom: 20px; 8 | .profilecard-contentwrapper { 9 | width: auto; 10 | } 11 | .profilecard-imgwrapper { 12 | width: 150px; 13 | } 14 | .profilecard-actionwrapper { 15 | width: auto; 16 | text-align: right; 17 | } 18 | .profilecard-contentwrapper, 19 | .profilecard-imgwrapper, 20 | .profilecard-actionwrapper { 21 | display: table-cell; 22 | vertical-align: middle; 23 | } 24 | } 25 | .profilecard-btn { 26 | display: inline-block; 27 | width: 150px; 28 | margin-left: 5px; 29 | margin-bottom: 5px; 30 | } 31 | .profilecard-img { 32 | border-radius: 50%; 33 | margin-right: 40px; 34 | padding: 4px; 35 | border: 2px solid $default-border-color; 36 | background-color: #FFF; 37 | } 38 | .profilecard-title { 39 | font-size: $font-size-h3; 40 | margin-bottom: 0; 41 | margin-top: 0; 42 | } 43 | .profilecard-subtitle { 44 | color: $color-text-black-secondary; 45 | } 46 | .pageheader .profilecard { 47 | margin-bottom: 0; 48 | } 49 | -------------------------------------------------------------------------------- /buildingblocks/_profileheader.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Profile Header 3 | ========================================================================== */ 4 | .profileheader { 5 | margin: 20px 0; 6 | 7 | .profileheader-content { 8 | padding: 0 10px; 9 | } 10 | 11 | .profileheader-image { 12 | display: block; 13 | margin: auto auto 10px auto; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /buildingblocks/_sectionheader.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Section Header 3 | ========================================================================== */ 4 | .sectionheader { 5 | margin-bottom: 20px; 6 | border-bottom: 1px solid $default-border-color; 7 | padding-bottom: 10px; 8 | } 9 | .sectionheader-title { 10 | margin-top: 0; 11 | margin-bottom: 10px; 12 | } 13 | .sectionheader-subtitle { 14 | color: $color-text-black-secondary; 15 | margin-bottom: 10px; 16 | } 17 | .sectionheader-avatar { 18 | padding: 4px; 19 | border: 2px solid $default-border-color; 20 | background-color: #FFF; 21 | } 22 | -------------------------------------------------------------------------------- /buildingblocks/_sidebarheader.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Sidebar Header 3 | ========================================================================== */ 4 | .sidebarheader { 5 | padding: 10px 20px; 6 | } 7 | .sidebarheader-content { 8 | 9 | } 10 | .sidebarheader-img { 11 | margin-bottom: 10px; 12 | } 13 | .sidebarheader-title { 14 | color: $color-text-white; 15 | } 16 | .sidebarheader-subtitle { 17 | color: $color-text-black-secondary; 18 | } 19 | -------------------------------------------------------------------------------- /buildingblocks/_tabsfullwidth.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Tabs full width 3 | ========================================================================== */ 4 | .tabsfullwidth { 5 | background-color: $bg-color-secondary; 6 | > .mx-tabcontainer-tabs { 7 | margin-bottom: 0; 8 | 9 | @media (min-width: $screen-sm) { 10 | padding: 0 40px; 11 | } 12 | } 13 | > .mx-tabcontainer-content { 14 | background-color: #FFF; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /buildingblocks/_wizard.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Wizard 3 | 4 | Styling for Wizard (Steps/Numbers) 5 | ========================================================================== */ 6 | .wizard { 7 | position: relative; 8 | margin: auto; 9 | .row:before { 10 | left: 0; 11 | top: 40px; 12 | bottom: 0; 13 | position: absolute; 14 | content: " "; 15 | width: 100%; 16 | height: 1px; 17 | background-color: #ccc; 18 | } 19 | .row { 20 | position: relative; 21 | width: 100%; 22 | display: table; 23 | margin: auto; 24 | } 25 | } 26 | .wizard-step { 27 | text-align: center; 28 | display: table-cell; 29 | vertical-align: middle; 30 | float: none; 31 | } 32 | .wizard-step-number { 33 | @include font(bold); 34 | border-radius: 50%; 35 | font-size: 20px; 36 | width: 72px; 37 | height: 72px; 38 | color: $gray-primary; 39 | border: 2px solid $default-border-color; 40 | background-color: #FFF; 41 | 42 | // Labels and buttons 43 | line-height: 3.5em; 44 | padding: 0; 45 | } 46 | .wizard-step-number-active { 47 | color: #FFF; 48 | border-color: $brand-primary; 49 | background-color: $brand-primary; 50 | } 51 | .wizard-step-number-visited { 52 | color: $brand-primary; 53 | border-color: $brand-primary; 54 | background-color: #FFF; 55 | } 56 | .wizard-step-title { 57 | display: block; 58 | margin-top: 10px; 59 | } 60 | 61 | .profile-phone .wizard { 62 | .row:before { 63 | top: 20px; 64 | } 65 | .wizard-step-number { 66 | width: 40px; 67 | height: 40px; 68 | line-height: 2em; 69 | font-size: 16px; 70 | } 71 | } 72 | 73 | 74 | /* ========================================================================== 75 | Wizard Progress 76 | 77 | Styling for Wizard (Progress Steps) 78 | ========================================================================== */ 79 | .wizard-progress { 80 | border: 1px solid $gray-primary; 81 | border-radius: 4px; 82 | background-color: $gray-lighter; 83 | position: relative; 84 | 85 | [class*=col-]:first-child .wizard-progress-step { 86 | margin-left: 0; 87 | } 88 | } 89 | .wizard-steps-container { 90 | border-bottom: 1px solid $gray-primary; 91 | } 92 | .wizard-progress-step { 93 | margin: 0 0 0 -30px; 94 | padding: 14px 20px 14px 30px; 95 | position: relative; 96 | background: $gray-lighter; 97 | 98 | &:after, 99 | &:before { 100 | position: absolute; 101 | width: 0; 102 | height: 0; 103 | border: solid transparent; 104 | border-color: transparent; 105 | content: " "; 106 | pointer-events: none; 107 | left: 100%; 108 | z-index: 10; 109 | } 110 | &:before { 111 | top: 50%; 112 | margin-top: -25px; 113 | border-width: 25px 15px; 114 | border-left-color: $gray-primary; 115 | } 116 | &:after { 117 | top: 50%; 118 | margin-top: -24px; 119 | border-width: 24px 14px; 120 | border-left-color: $gray-lighter; 121 | } 122 | } 123 | .wizard-progress-step-active { 124 | background-color: $color-primary-lighter; 125 | 126 | &:after { 127 | border-left-color: $color-primary-lighter; 128 | } 129 | .wizard-progress-number { 130 | background-color: $brand-primary; 131 | } 132 | } 133 | .wizard-progress-step-visited { 134 | background-color: $color-primary-lighter; 135 | 136 | &:after { 137 | border-left-color: $color-primary-lighter; 138 | } 139 | .wizard-progress-number { 140 | background-color: $brand-success; 141 | } 142 | .wizard-progress-title { 143 | color: $brand-success; 144 | } 145 | } 146 | .wizard-progress-number { 147 | display: inline-block; 148 | padding: 1px 7px; 149 | color: #fff; 150 | text-align: center; 151 | white-space: nowrap; 152 | vertical-align: middle; 153 | background-color: $gray-light; 154 | margin-right: 10px; 155 | border-radius: 10px; 156 | } 157 | .wizard-progress-title { 158 | color: $brand-primary; 159 | } 160 | .wizard-step-content { 161 | padding: 10px 20px; 162 | } 163 | -------------------------------------------------------------------------------- /buildingblocks/templategrid/_templategrid-profilecard.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Templategrid Profile Card 3 | 4 | Profile card styled for templategrid 5 | ========================================================================== */ 6 | .templategrid-profilecard { 7 | padding: 20px; 8 | border: 1px solid $default-border-color; 9 | background-color: #FFF; 10 | border-radius: 3px; 11 | .templategrid-profilecard-contentwrapper { 12 | width: auto; 13 | } 14 | .templategrid-profilecard-imgwrapper { 15 | width: 150px; 16 | } 17 | .templategrid-profilecard-contentwrapper, 18 | .templategrid-profilecard-imgwrapper { 19 | display: table-cell; 20 | vertical-align: middle; 21 | } 22 | .templategrid-profilecard-btn { 23 | display: block; 24 | margin-top: 10px; 25 | } 26 | .templategrid-profilecard-img { 27 | border-radius: 50%; 28 | margin-right: 40px; 29 | padding: 4px; 30 | border: 2px solid $default-border-color; 31 | background-color: #FFF; 32 | } 33 | .templategrid-profilecard-title { 34 | font-size: $font-size-h3; 35 | margin-bottom: 0; 36 | margin-top: 0; 37 | } 38 | .templategrid-profilecard-subtitle { 39 | color: $color-text-black-secondary; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /components/_alerts.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Alerts 3 | 4 | Default Bootstrap Alert boxes. Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages 5 | ========================================================================== */ 6 | .alert { 7 | border-radius: 4px; 8 | margin-top: 0; // want to align it with padding of a page 9 | padding: 15px; 10 | border: 0; 11 | } 12 | .alert-bordered { 13 | border: 1px solid; 14 | } 15 | .alert-success { 16 | border-color: $alert-success-border-color; 17 | background-color: $alert-success-bg; 18 | color: $alert-success-color; 19 | } 20 | .alert-info { 21 | border-color: $alert-info-border-color; 22 | background-color: $alert-info-bg; 23 | color: $alert-info-color; 24 | } 25 | .alert-warning { 26 | border-color: $alert-warning-border-color; 27 | background-color: $alert-warning-bg; 28 | color: $alert-warning-color; 29 | } 30 | .alert-danger { 31 | border-color: $alert-danger-border-color; 32 | background-color: $alert-danger-bg; 33 | color: $alert-danger-color; 34 | } 35 | .has-error .alert { 36 | margin-top: 8px; 37 | margin-bottom: 0; 38 | } 39 | -------------------------------------------------------------------------------- /components/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Backgrounds 3 | 4 | Different background components, all managed by variables 5 | ========================================================================== */ 6 | .background-layout { background-color: $bg-color !important; } 7 | .background-layout-secondary { background-color: $bg-color-secondary !important; } 8 | 9 | .background-default { background-color: $brand-default !important; } 10 | .background-default-darker { background-color: $color-default-darker !important; } 11 | .background-default-dark { background-color: $color-default-dark !important; } 12 | .background-default-light { background-color: $color-default-light !important; } 13 | .background-default-lighter { background-color: $color-default-lighter !important; } 14 | 15 | .background-inverse { background-color: $brand-inverse !important; } 16 | .background-inverse-darker { background-color: $color-inverse-darker !important; } 17 | .background-inverse-dark { background-color: $color-inverse-dark !important; } 18 | .background-inverse-light { background-color: $color-inverse-light !important; } 19 | .background-inverse-lighter { background-color: $color-inverse-lighter !important; } 20 | 21 | .background-primary { background-color: $brand-primary !important; } 22 | .background-primary-darker { background-color: $color-primary-darker !important; } 23 | .background-primary-dark { background-color: $color-primary-dark !important; } 24 | .background-primary-light { background-color: $color-primary-light !important; } 25 | .background-primary-lighter { background-color: $color-primary-lighter !important; } 26 | 27 | .background-info { background-color: $brand-info !important; } 28 | .background-info-darker { background-color: $color-info-darker !important; } 29 | .background-info-dark { background-color: $color-info-dark !important; } 30 | .background-info-light { background-color: $color-info-light !important; } 31 | .background-info-lighter { background-color: $color-info-lighter !important; } 32 | 33 | .background-success { background-color: $brand-success !important; } 34 | .background-success-darker { background-color: $color-success-darker !important; } 35 | .background-success-dark { background-color: $color-success-dark !important; } 36 | .background-success-light { background-color: $color-success-light !important; } 37 | .background-success-lighter { background-color: $color-success-lighter !important; } 38 | 39 | .background-warning { background-color: $brand-warning !important; } 40 | .background-warning-darker { background-color: $color-warning-darker !important; } 41 | .background-warning-dark { background-color: $color-warning-dark !important; } 42 | .background-warning-light { background-color: $color-warning-light !important; } 43 | .background-warning-lighter { background-color: $color-warning-lighter !important; } 44 | 45 | .background-danger { background-color: $brand-danger !important; } 46 | .background-danger-darker { background-color: $color-danger-darker !important; } 47 | .background-danger-dark { background-color: $color-danger-dark !important; } 48 | .background-danger-light { background-color: $color-danger-light !important; } 49 | .background-danger-lighter { background-color: $color-danger-lighter !important; } 50 | -------------------------------------------------------------------------------- /components/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Buttons 3 | 4 | Default Bootstrap and Mendix Buttons 5 | ========================================================================== */ 6 | .btn, 7 | .mx-button { 8 | 9 | /* MXID / Bootstrap values for when used in non-mendix apps */ 10 | display: inline-block; 11 | margin-bottom: 0; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: middle; 15 | cursor: pointer; 16 | background-image: none; 17 | border: 1px solid transparent; 18 | -webkit-user-select: none; 19 | -moz-user-select: none; 20 | -ms-user-select: none; 21 | -o-user-select: none; 22 | user-select: none; 23 | 24 | @include font(normal); 25 | 26 | -moz-transition: all .2s ease-in-out; 27 | -o-transition: all .2s ease-in-out; 28 | -webkit-transition: all .2s ease-in-out; 29 | transition: all .2s ease-in-out; 30 | 31 | border-radius: 4px; 32 | box-shadow: none; 33 | padding: round(0.6 * $font-base-size) round(1 * $font-base-size); 34 | background-color: $btn-default-bg; 35 | color: $btn-default-color; 36 | text-shadow: none; 37 | font-size: $btn-font-size; 38 | line-height: $line-height-base; 39 | 40 | &:hover, 41 | &:focus, 42 | &:active { 43 | box-shadow: none; 44 | outline: none; 45 | } 46 | } 47 | 48 | // Mendix button link 49 | .mx-link { 50 | padding: 0; 51 | color: $link-color; 52 | 53 | a { 54 | color: inherit; 55 | } 56 | } 57 | 58 | // Images in buttons 59 | .btn, 60 | .mx-button, 61 | .mx-link { 62 | img { 63 | margin-top: -1px; 64 | //height: auto; // MXUI override who set the height on 16px default 65 | height: $font-base-size + 4px; 66 | } 67 | } 68 | 69 | // IE 8 only (mxui overwrites) 70 | .dj_ie8 .mx-link { 71 | margin-right: 0; 72 | white-space: normal; 73 | } 74 | 75 | 76 | // Buttons Alternate Style 77 | .btn-default { 78 | @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border-color); 79 | } 80 | .btn-primary { 81 | @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color); 82 | } 83 | .btn-inverse { 84 | @include button-variant($btn-inverse-color, $btn-inverse-bg, $btn-inverse-border-color); 85 | &:hover, 86 | &:focus, 87 | &:active, 88 | &.active, 89 | .open > &.dropdown-toggle { 90 | background-color: lighten($btn-inverse-bg, 10%); 91 | border-color: lighten($btn-inverse-bg, 10%); 92 | } 93 | } 94 | // Success appears as green 95 | .btn-success { 96 | @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color); 97 | } 98 | // Info appears as blue-green 99 | .btn-info { 100 | @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color); 101 | } 102 | // Warning appears as orange 103 | .btn-warning { 104 | @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color); 105 | } 106 | // Danger and error appear as red 107 | .btn-danger { 108 | @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color); 109 | } 110 | // Button as link but with padding 111 | .btn-link { 112 | border: 0; 113 | background-color: transparent; 114 | color: $link-color; 115 | 116 | &:hover { 117 | background-color: transparent; 118 | color: $link-hover-color; 119 | } 120 | } 121 | /* Buttons appear disabled */ 122 | .btn-disabled { 123 | opacity: 0.65; 124 | filter: alpha(opacity=65); /* For IE8 and earlier */ 125 | 126 | cursor: not-allowed; 127 | pointer-events: none; 128 | } 129 | // Transparent 130 | .btn-transparent, 131 | .btn-transparent:hover, 132 | .btn-transparent:focus { 133 | border-style: none; 134 | background-color: transparent; 135 | } 136 | 137 | // Buttons Sizes 138 | .btn-lg { 139 | font-size: $font-size-large; 140 | padding: round(0.6 * $font-size-large) round(1 * $font-size-large); // only for buttons 141 | img { 142 | height: $font-base-size + 4px; 143 | } 144 | } 145 | .btn-sm { 146 | font-size: $font-size-small; 147 | padding: round(0.6 * $font-size-small) round(1 * $font-size-small); 148 | img { 149 | height: $font-size-small + 4px; 150 | } 151 | } 152 | 153 | 154 | /* Buttons Image */ 155 | .btn-image { 156 | padding: 0; 157 | border-style: none; 158 | background-color: transparent; 159 | vertical-align: middle; 160 | 161 | img { 162 | height: auto; // Image set height 163 | display: block; // or else the button doesn't get a width 164 | } 165 | 166 | &:hover, 167 | &:focus { 168 | background-color: transparent; 169 | } 170 | } 171 | 172 | 173 | /* Buttons Position */ 174 | .btn-right { 175 | float: right; 176 | } 177 | .btn-left { 178 | float: left; 179 | } 180 | 181 | /* Buttons Attached */ 182 | .btn-attached-right { 183 | margin-left: 5px; 184 | } 185 | .btn-attached-left { 186 | margin-right: 5px; 187 | } 188 | .btn-attached-bottom { 189 | margin-top: 5px; 190 | } 191 | .btn-attached-top { 192 | margin-bottom: 5px; 193 | } 194 | -------------------------------------------------------------------------------- /components/_datagrids.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Datagrid Default 3 | 4 | Default Mendix Datagrid Widget. The datagrid shows a list of objects in a grid 5 | ========================================================================== */ 6 | .mx-datagrid { 7 | .mx-datagrid-head-table { 8 | border-width: 0; 9 | background-color: transparent; 10 | 11 | /* Table header */ 12 | th { 13 | border-left: 0; 14 | border-right: 0; 15 | border-top-width: 0; 16 | border-bottom-width: 2px; 17 | border-style: solid; 18 | border-color: $grid-border-color; 19 | background-color: $grid-bg-header; 20 | } 21 | 22 | .mx-datagrid-head-wrapper { 23 | padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; 24 | vertical-align: middle; 25 | .mx-datagrid-head-caption { 26 | white-space: normal; 27 | } 28 | } 29 | } 30 | .mx-datagrid-body-table { 31 | border-width: 0; 32 | 33 | /* Table Body */ 34 | .mx-datagrid-body tr { 35 | td { 36 | padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; 37 | background-color: $grid-bg; 38 | border-width: 0; 39 | border-top-width: 1px; 40 | border-top-style: solid; 41 | border-color: $grid-border-color; 42 | vertical-align: middle; 43 | 44 | &:focus { 45 | outline: none; 46 | } 47 | /* Text without spaces */ 48 | .mx-datagrid-data-wrapper { 49 | text-overflow: ellipsis; 50 | } 51 | } 52 | &:hover td { 53 | 54 | } 55 | &.selected td, 56 | &.selected:hover td { 57 | background-color: $grid-bg-selected !important; 58 | color: $grid-selected-color; 59 | } 60 | } 61 | 62 | /* Table Footer */ 63 | .mx-datagrid-foot { 64 | 65 | > tr > th { 66 | padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; 67 | background-color: $grid-footer-bg; 68 | border-width: 0; 69 | } 70 | 71 | > tr > td { 72 | background-color: $grid-bg; 73 | border-width: 0; 74 | font-weight: bold; 75 | padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; 76 | } 77 | } 78 | 79 | & *:focus { 80 | outline: 0; 81 | } 82 | } 83 | } 84 | 85 | 86 | /* ========================================================================== 87 | Datagrid Striped 88 | 89 | Default Mendix Datagrid Widget with striped rows 90 | ========================================================================== */ 91 | .datagrid-striped.mx-datagrid { 92 | .mx-datagrid-head-table { 93 | th { border-width: 0; } 94 | .mx-datagrid-head-wrapper { 95 | 96 | } 97 | } 98 | .mx-datagrid-body-table { 99 | /* Body */ 100 | .mx-datagrid-body tr { 101 | td { 102 | border-top-width: 0; 103 | } 104 | &:nth-child(odd) td { 105 | background-color: $grid-bg-striped; 106 | } 107 | } 108 | } 109 | } 110 | 111 | 112 | /* ========================================================================== 113 | Datagrid Bordered 114 | 115 | Default Mendix Datagrid Widget with borders 116 | ========================================================================== */ 117 | .datagrid-bordered.mx-datagrid { 118 | .mx-datagrid-head-table { 119 | th { 120 | border: 1px solid $grid-border-color; 121 | border-bottom-width: 1px; 122 | } 123 | .mx-datagrid-head-wrapper { 124 | 125 | } 126 | } 127 | .mx-datagrid-body-table { 128 | border: 1px solid; 129 | .mx-datagrid-body tr { 130 | td { 131 | border: 1px solid $grid-border-color; 132 | } 133 | } 134 | } 135 | .mx-datagrid-foot { 136 | > tr > th { 137 | background-color: $grid-footer-bg; 138 | border-width: 0; 139 | } 140 | > tr > td { 141 | border-width: 1px; 142 | } 143 | } 144 | } 145 | 146 | 147 | /* ========================================================================== 148 | Datagrid Hover 149 | 150 | Default Mendix Datagrid Widget with hover 151 | ========================================================================== */ 152 | .datagrid-hover.mx-datagrid { 153 | .mx-datagrid-body-table { 154 | // Body 155 | .mx-datagrid-body tr { 156 | &:hover td { 157 | background-color: $grid-bg-hover !important; 158 | } 159 | &.selected:hover td { 160 | background-color: $grid-bg-selected-hover !important; 161 | } 162 | } 163 | } 164 | } 165 | 166 | 167 | /* ========================================================================== 168 | Datagrid Large 169 | 170 | Default Mendix Datagrid Widget with large rows 171 | ========================================================================== */ 172 | .datagrid-large.mx-datagrid { 173 | .mx-datagrid-head-table { 174 | .mx-datagrid-head-wrapper { 175 | padding: 15px 10px; 176 | } 177 | } 178 | 179 | .mx-datagrid-body-table { 180 | .mx-datagrid-body tr { 181 | td { 182 | padding: 15px 10px; 183 | } 184 | } 185 | } 186 | } 187 | 188 | 189 | /* ========================================================================== 190 | Datagrid Transparent 191 | 192 | Default Mendix Datagrid Widget with transparent background for row and cells 193 | ========================================================================== */ 194 | .datagrid-transparent.mx-datagrid { 195 | .mx-datagrid-head-table { 196 | background-color: transparent; 197 | } 198 | .mx-datagrid-body-table { 199 | .mx-datagrid-body tr { 200 | &:nth-of-type(odd) { 201 | background-color: transparent; 202 | } 203 | td { 204 | background-color: transparent; 205 | } 206 | } 207 | } 208 | } 209 | 210 | 211 | /* ========================================================================== 212 | Datagrid Full Search 213 | 214 | Default Mendix Datagrid Widget with adjusted search field. Only 1 search field is allowed 215 | ========================================================================== */ 216 | .mx-grid.datagrid-fullsearch { 217 | .mx-grid-search-button { 218 | @extend .btn-primary; 219 | } 220 | .mx-grid-reset-button { 221 | display: none; 222 | } 223 | .mx-grid-search-item { 224 | display: block; 225 | } 226 | .mx-grid-search-label { 227 | display: none; 228 | } 229 | .mx-grid-searchbar { 230 | .mx-grid-search-controls { 231 | position: absolute; 232 | right: 0; 233 | } 234 | .mx-grid-search-input { 235 | width: 80%; 236 | padding-left: 0; 237 | .form-control { 238 | height: 35px; 239 | font-size: 12px; 240 | } 241 | } 242 | } 243 | } 244 | -------------------------------------------------------------------------------- /components/_dataview.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Dataview 3 | 4 | Default Mendix Dataview Widget. The data view is used for showing the contents of exactly one object 5 | ========================================================================== */ 6 | .mx-dataview { 7 | 8 | /* Control bar */ 9 | .mx-dataview-controls { 10 | border-radius: 0; 11 | // Needed to clear the bootstrap columns (get float: left) 12 | clear: both; 13 | margin-top: 10px; 14 | padding: 8px 0; 15 | border-top: 1px solid $dataview-controls-border-color; 16 | background-color: $dataview-controls-bg; 17 | 18 | /* Buttons */ 19 | .mx-button { 20 | margin-bottom: 0; 21 | margin-right: 0.3em; 22 | &:last-child { 23 | margin-right: 0; 24 | } 25 | } 26 | } 27 | 28 | /* Dataview-content gives problems for nexted layout grid containers */ 29 | > .mx-dataview-content > .mx-container-nested { 30 | > .row { 31 | margin-right: 0; 32 | margin-left: 0; 33 | } 34 | } 35 | 36 | /* Dataview empty message */ 37 | .mx-dataview-message { 38 | background: $dataview-emptymessage-bg; 39 | color: $dataview-emptymessage-color; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /components/_dijit-widgets.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Mendix Documentation 3 | * Special styles for presenting components 4 | */ 5 | 6 | 7 | /* 8 | * Dijit Widgets 9 | * 10 | * Default Dojo Dijit Widgets 11 | */ 12 | 13 | 14 | /* 15 | * Dijit Calendar Widget 16 | * 17 | * Used in dataviews 18 | */ 19 | .dijitCalendarContainer { 20 | /* (must be higher than popup z-index) */ 21 | z-index: 10010 !important; 22 | background-color: #eff0f2; 23 | 24 | tr { 25 | th { 26 | background-color: #26323D; 27 | color: #FFF; 28 | text-align: center; 29 | } 30 | th, 31 | td { 32 | padding: 6px; 33 | text-align: center; 34 | } 35 | td .dijitCalendarDateLabel { 36 | color: #000; 37 | } 38 | tfoot h3 { 39 | margin: 0; 40 | padding: 0; 41 | font-size: inherit; 42 | } 43 | } 44 | 45 | .dijitCalendarMonthLabel { 46 | @include font(bold); 47 | } 48 | .dijitButtonNode { 49 | border: 0; 50 | } 51 | .dijitCalendarArrow { 52 | cursor: pointer; 53 | } 54 | .dijitCalendarSelectedDate, 55 | .dijitCalendarSelectedDate:hover { 56 | border-radius: 10px; 57 | background: $brand-primary; 58 | .dijitCalendarDateLabel { 59 | color: #fff; 60 | } 61 | } 62 | .dijitCalendarHoveredDate, 63 | .dijitCalendarPreviousYearHover, 64 | .dijitCalendarNextYearHover, 65 | .dijitCalendarMonthLabelHover { 66 | border-radius: 10px; 67 | background-color: #dbdcdd; 68 | } 69 | .dijitCalendarYearContainer td { 70 | border-top: 1px solid $default-border-color; 71 | text-align: center; 72 | color: #000; 73 | .dijitCalendarSelectedYear { 74 | @include font(bold); 75 | text-decoration: underline; 76 | } 77 | } 78 | .dijitCalendarMonthContainer th:first-child { 79 | border-top-left-radius: 3px; 80 | } 81 | .dijitCalendarMonthContainer th:last-child { 82 | border-top-right-radius: 3px; 83 | } 84 | } 85 | 86 | .dijitCalendarMonthMenuPopup { 87 | border-radius: 3px; 88 | /* (must be higher than popup z-index) */ 89 | z-index: 10020 !important; 90 | padding: 3px 4px; 91 | background-color: #26323D; 92 | .dijitCalendarMonthMenu { 93 | border-style: none; 94 | background: none; 95 | .dijitCalendarMonthLabel { 96 | padding: 2px 0; 97 | color: #FFF; 98 | &:hover, 99 | &:focus { 100 | color: #4280cb; 101 | } 102 | } 103 | } 104 | } 105 | 106 | .dj_rtl { 107 | .dijitCalendarContainer { 108 | .dijitCalendarMonthContainer { 109 | th { 110 | 111 | &:first-child { 112 | border-top-left-radius: 0px; 113 | border-top-right-radius: 3px; 114 | } 115 | &:last-child { 116 | border-top-left-radius: 3px; 117 | border-top-right-radius: 0px; 118 | } 119 | } 120 | } 121 | } 122 | } 123 | 124 | 125 | /* 126 | * Dijit Tooltip Widget 127 | * 128 | * Default tooltip used for Mendix widgets 129 | */ 130 | .mx-tooltip { 131 | .dijitTooltipContainer { 132 | border-radius: 4px; 133 | box-shadow: 0 6px 12px rgba(0,0,0,0.175); 134 | 135 | border-width: 1px; 136 | border-color: $gray-light; 137 | background: #FFF; 138 | 139 | .mx-tooltip-content { 140 | padding: 10px; 141 | } 142 | .form-group { 143 | margin-bottom: 5px; 144 | } 145 | } 146 | 147 | .dijitTooltipConnector { 148 | margin-left: -10px; 149 | width: 0; 150 | height: 0; 151 | border-width: 10px 10px 10px 0; 152 | border-style: solid; 153 | border-color: transparent; 154 | border-right-color: $gray-light; 155 | } 156 | } 157 | 158 | 159 | /* 160 | * Dijit Border Container 161 | * 162 | * Used in Mendix as split pane containers 163 | */ 164 | .dijitBorderContainer { 165 | padding: 5px; 166 | background-color: #fcfcfc; 167 | 168 | .dijitSplitterV, 169 | .dijitGutterV { 170 | width: 5px; 171 | border: 0; 172 | background: #fcfcfc; 173 | } 174 | .dijitSplitterH, 175 | .dijitGutterH { 176 | height: 5px; 177 | border: 0; 178 | background: #fcfcfc; 179 | } 180 | .dijitSplitterH { 181 | .dijitSplitterThumb { 182 | top: 2px; 183 | width: 19px; 184 | height: 1px; 185 | background: #B0B0B0; 186 | } 187 | } 188 | .dijitSplitterV { 189 | .dijitSplitterThumb { 190 | left: 2px; 191 | width: 1px; 192 | height: 19px; 193 | background: #B0B0B0; 194 | } 195 | } 196 | .dijitSplitContainer-child, 197 | .dijitBorderContainer-child { 198 | border: 1px solid #ccc; 199 | } 200 | .dijitBorderContainer-dijitTabContainerTop, 201 | .dijitBorderContainer-dijitTabContainerBottom, 202 | .dijitBorderContainer-dijitTabContainerLeft, 203 | .dijitBorderContainer-dijitTabContainerRight { 204 | border: none; 205 | } 206 | .dijitBorderContainer-dijitBorderContainer { 207 | padding: 0; 208 | border: none; 209 | } 210 | .dijitSplitterActive { 211 | opacity: 0.6; 212 | filter: alpha(opacity=60); /* For IE8 and earlier */ 213 | 214 | margin: 0; 215 | background-color: #aaa; 216 | background-image: none; 217 | font-size: 1px; 218 | } 219 | .dijitSplitContainer-dijitContentPane, 220 | .dijitBorderContainer-dijitContentPane { 221 | padding: 5px; 222 | background-color: #fff; 223 | } 224 | } 225 | 226 | 227 | /* 228 | * Dijit Menu Popup 229 | * 230 | * Used in datepickers and calendar widgets 231 | */ 232 | .dijitMenuPopup { 233 | margin-top: 10px; 234 | .dijitMenu { 235 | border-radius: 3px; 236 | display: block; 237 | margin-top: 0; // No top margin because there is no parent with margin bottom 238 | padding: 12px 10px; 239 | background: $brand-inverse; 240 | width: 200px !important; 241 | 242 | &:after { 243 | position: absolute; 244 | bottom: 100%; 245 | left: 20px; 246 | margin-left: -10px; 247 | width: 0px; 248 | height: 0px; 249 | border: medium solid transparent; 250 | border-width: 10px; 251 | border-bottom-color: $brand-inverse; 252 | content: " "; 253 | pointer-events: none; 254 | } 255 | 256 | // Menu item 257 | .dijitMenuItem { 258 | background: transparent; 259 | .dijitMenuItemLabel { 260 | border-radius: 3px; 261 | padding: 10px; 262 | color: #FFF; 263 | width: 180px !important; 264 | display: block; 265 | overflow: hidden; 266 | text-overflow: ellipsis; 267 | } 268 | // Hover 269 | &.dijitMenuItemHover { 270 | background: none; 271 | .dijitMenuItemLabel { 272 | background: $brand-primary; 273 | } 274 | } 275 | } 276 | 277 | // New label 278 | .tg_newlabelmenuitem { 279 | .dijitMenuItemLabel { 280 | @include font(bold); 281 | } 282 | } 283 | 284 | // Seperator 285 | .dijitMenuSeparator { 286 | td { 287 | padding: 0; 288 | border-bottom-width: 3px; 289 | } 290 | .dijitMenuSeparatorIconCell { 291 | > div { 292 | margin: 0; //override dijit styling 293 | } 294 | } 295 | } 296 | } 297 | } 298 | -------------------------------------------------------------------------------- /components/_glyphicons.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Glyphicons 3 | 4 | Glyphicons alternaed to use with Mendix 5 | ========================================================================== */ 6 | .mx-glyphicon { 7 | &:before { 8 | display: inline-block; 9 | font-family: 'Glyphicons Halflings'; 10 | -webkit-font-smoothing: antialiased; 11 | font-style: normal; 12 | font-weight: normal; 13 | vertical-align: middle; 14 | margin-right: 0.4555555em; 15 | margin-top: -0.2em; 16 | line-height: inherit; 17 | -moz-osx-font-smoothing: grayscale; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /components/_grid.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Grid 3 | 4 | Default Mendix Grid (used for Mendix Datagrid) 5 | ========================================================================== */ 6 | .mx-grid { 7 | border-radius: 0; 8 | padding: 0px; 9 | border: 0; 10 | 11 | .mx-grid-controlbar { 12 | margin: 10px 0; 13 | /* Paging */ 14 | .mx-grid-pagingbar { 15 | 16 | /* Buttons */ 17 | .mx-button { 18 | padding: 6px; 19 | background-color: $grid-paging-bg; 20 | color: $grid-paging-color; 21 | border-color: $grid-paging-border-color; 22 | 23 | &:hover { 24 | background-color: $grid-paging-bg-hover; 25 | color: $grid-paging-color-hover; 26 | border-color: $grid-paging-border-color-hover; 27 | } 28 | 29 | &.disabled, 30 | &[disabled] { 31 | opacity: 0.4; 32 | filter: alpha(opacity=40); /* For IE8 and earlier */ 33 | } 34 | } 35 | 36 | /* Text Paging .. to .. to .. */ 37 | .mx-grid-paging-status { 38 | padding: 0 8px 8px; 39 | } 40 | } 41 | } 42 | 43 | .mx-grid-searchbar { 44 | margin: 10px 0; 45 | .mx-grid-search-item { 46 | .mx-grid-search-label { 47 | vertical-align: middle; 48 | label { padding-top: 5px; } 49 | } 50 | .mx-grid-search-input { 51 | .form-control { 52 | height: 28px; 53 | font-size: 11px; 54 | } 55 | select.form-control { 56 | vertical-align: middle; 57 | padding: 3px; 58 | } 59 | .mx-button { 60 | height: 28px; 61 | padding-top: 2px; 62 | padding-bottom: 2px; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | 69 | /* Remove default border from grid inside a Mendix Dataview */ 70 | .mx-dataview .mx-grid { 71 | border: 0; 72 | } 73 | -------------------------------------------------------------------------------- /components/_groupbox.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Groupbox 3 | 4 | Default Mendix Groupboxes 5 | ========================================================================== */ 6 | .mx-groupbox { 7 | > .mx-groupbox-header { 8 | @include font(bold); 9 | border-radius: 0; 10 | margin: 0; 11 | background: $groupbox-default-bg; 12 | color: $groupbox-default-color; 13 | font-size: $font-size-h4; 14 | border-style: solid; 15 | border-width: 1px 1px 0 1px; 16 | border-color: $groupbox-default-bg; 17 | 18 | .mx-groupbox-collapse-icon { 19 | margin-top: 0.1em; 20 | } 21 | } 22 | > .mx-groupbox-body { 23 | border-radius: 0; 24 | padding: 10px 15px; 25 | border-color: $groupbox-default-bg; 26 | background-color: #FFF; 27 | border-style: solid; 28 | border-width: 1px; 29 | 30 | } 31 | .mx-groupbox-header + .mx-groupbox-body { 32 | border-radius: 0; 33 | border-top: none; 34 | } 35 | 36 | &.collapsed > .mx-groupbox-header { 37 | border-radius: 0; 38 | } 39 | } 40 | 41 | 42 | /* ========================================================================== 43 | Groupbox Callouts 44 | 45 | Default Mendix Groupboxes rendered as (Bootstrap) callouts 46 | ========================================================================== */ 47 | .mx-groupbox { 48 | 49 | // Stylingless has no stlying or padding (used for wrapper) 50 | &.groupbox-stylingless { 51 | > .mx-groupbox-header { 52 | border-radius: 0; 53 | padding: 0; 54 | border-style: none; 55 | background-color: transparent; 56 | } 57 | > .mx-groupbox-body { 58 | border-radius: 0; 59 | padding: 0; 60 | border-style: none; 61 | background-color: transparent; 62 | } 63 | } 64 | 65 | // Border radius 66 | &.groupbox-border-radius { 67 | > .mx-groupbox-header { 68 | border-radius: 3px 3px 0 0 !important; 69 | } 70 | > .mx-groupbox-body { 71 | border-radius: 3px !important; 72 | } 73 | .mx-groupbox-header + .mx-groupbox-body { 74 | border-radius: 0 0 3px 3px !important; 75 | } 76 | } 77 | &.groupbox-borderless { 78 | > .mx-groupbox-body { 79 | border: 0 !important; 80 | } 81 | } 82 | &.groupbox-border-top { 83 | > .mx-groupbox-header { 84 | border-style: none; 85 | border-top-style: solid !important 86 | } 87 | > .mx-groupbox-body { 88 | border-style: none; 89 | border-top-style: solid !important 90 | } 91 | .mx-groupbox-header + .mx-groupbox-body { 92 | border-top-style: none !important; 93 | } 94 | } 95 | &.groupbox-border-right { 96 | > .mx-groupbox-header { 97 | border-style: none; 98 | border-right-style: solid !important 99 | } 100 | > .mx-groupbox-body { 101 | border-style: none; 102 | border-right-style: solid !important 103 | } 104 | } 105 | &.groupbox-border-bottom { 106 | > .mx-groupbox-header { 107 | border-style: none; 108 | } 109 | > .mx-groupbox-body { 110 | border-style: none; 111 | border-bottom-style: solid !important 112 | } 113 | } 114 | &.groupbox-border-left { 115 | > .mx-groupbox-header { 116 | border-style: none; 117 | border-left-style: solid !important 118 | } 119 | > .mx-groupbox-body { 120 | border-style: none; 121 | border-left-style: solid !important 122 | } 123 | } 124 | } 125 | 126 | 127 | /* ========================================================================== 128 | Groupbox Colors 129 | ========================================================================== */ 130 | .mx-groupbox { 131 | // Color variations 132 | &.groupbox-default { 133 | @include groupbox-variant($groupbox-default-color, $groupbox-default-bg); 134 | } 135 | &.groupbox-primary { 136 | @include groupbox-variant($groupbox-primary-color, $groupbox-primary-bg); 137 | } 138 | &.groupbox-inverse { 139 | @include groupbox-variant($groupbox-inverse-color, $groupbox-inverse-bg); 140 | } 141 | // Success appears as green 142 | &.groupbox-success { 143 | @include groupbox-variant($groupbox-success-color, $groupbox-success-bg); 144 | } 145 | // Info appears as blue-green 146 | &.groupbox-info { 147 | @include groupbox-variant($groupbox-info-color, $groupbox-info-bg); 148 | } 149 | // Warning appears as orange 150 | &.groupbox-warning { 151 | @include groupbox-variant($groupbox-warning-color, $groupbox-warning-bg); 152 | } 153 | // Danger and error appear as red 154 | &.groupbox-danger { 155 | @include groupbox-variant($groupbox-danger-color, $groupbox-danger-bg); 156 | } 157 | // white appears as full white 158 | &.groupbox-white { 159 | @include groupbox-variant($groupbox-white-color, $groupbox-white-bg); 160 | } 161 | &.groupbox-transparent { 162 | background-color: transparent; 163 | > .mx-groupbox-header { 164 | border-style: none; 165 | background-color: transparent; 166 | } 167 | > .mx-groupbox-body { 168 | border-style: none; 169 | background-color: transparent; 170 | } 171 | } 172 | } 173 | 174 | 175 | /* ========================================================================== 176 | Groupbox Spacing 177 | ========================================================================== */ 178 | .mx-groupbox { 179 | 180 | &.groupbox-sideless { 181 | > .mx-groupbox-header { 182 | padding-right: 0; 183 | padding-left: 0; 184 | } 185 | > .mx-groupbox-body { 186 | padding-right: 0; 187 | padding-left: 0; 188 | } 189 | } 190 | 191 | &.groupbox-bodyless { 192 | > .mx-groupbox-header { 193 | 194 | } 195 | > .mx-groupbox-body { 196 | padding: 0; 197 | } 198 | } 199 | } 200 | 201 | 202 | /* ========================================================================== 203 | Groupbox Headers 204 | ========================================================================== */ 205 | .mx-groupbox { 206 | &.groupbox-h1 > .mx-groupbox-header { font-size: $font-size-h1; } 207 | &.groupbox-h2 > .mx-groupbox-header { font-size: $font-size-h2; } 208 | &.groupbox-h3 > .mx-groupbox-header { font-size: $font-size-h3; } 209 | &.groupbox-h4 > .mx-groupbox-header { font-size: $font-size-h4; } 210 | &.groupbox-h5 > .mx-groupbox-header { font-size: $font-size-h5; } 211 | &.groupbox-h6 > .mx-groupbox-header { font-size: $font-size-h6; } 212 | } 213 | 214 | 215 | /* ========================================================================== 216 | Groupbox Callouts 217 | ========================================================================== */ 218 | .mx-groupbox { 219 | &.groupbox-callout { 220 | > .mx-groupbox-header, 221 | > .mx-groupbox-body { 222 | border: 0; 223 | } 224 | .mx-groupbox-header + .mx-groupbox-body { 225 | padding-top: 0; 226 | } 227 | } 228 | &.groupbox-callout-info { 229 | > .mx-groupbox-header, 230 | > .mx-groupbox-body { 231 | background-color: $callout-info-bg; 232 | } 233 | > .mx-groupbox-header { 234 | color: $callout-info-color; 235 | } 236 | } 237 | &.groupbox-callout-success { 238 | > .mx-groupbox-header, 239 | > .mx-groupbox-body { 240 | background-color: $callout-success-bg; 241 | } 242 | > .mx-groupbox-header { 243 | color: $callout-success-color; 244 | } 245 | } 246 | &.groupbox-callout-warning { 247 | > .mx-groupbox-header, 248 | > .mx-groupbox-body { 249 | background-color: $callout-warning-bg; 250 | } 251 | > .mx-groupbox-header { 252 | color: $callout-warning-color; 253 | } 254 | } 255 | &.groupbox-callout-danger { 256 | > .mx-groupbox-header, 257 | > .mx-groupbox-body { 258 | background-color: $callout-danger-bg; 259 | } 260 | > .mx-groupbox-header { 261 | color: $callout-danger-color; 262 | } 263 | } 264 | } 265 | -------------------------------------------------------------------------------- /components/_helpers.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Helpers 3 | 4 | Default Mendix Helpers 5 | ========================================================================== */ 6 | .show { 7 | display: block !important; 8 | } 9 | .hidden { 10 | display: none !important; 11 | visibility: hidden !important; 12 | } 13 | .invisible { 14 | visibility: hidden; 15 | } 16 | .display-ie8-only:not([attr*='']) { 17 | display: none; 18 | padding: 0; 19 | } 20 | .list-nostyle { 21 | ul { 22 | padding: 0; 23 | margin: 0; 24 | li { 25 | list-style-type: none !important; 26 | } 27 | } 28 | } 29 | .nowrap, 30 | .nowrap * { // Star for inside an element, IE8 span > a 31 | white-space: nowrap; 32 | } 33 | .form-disabled p { 34 | @extend .form-control; 35 | background-color: $form-input-bg-disabled !important; 36 | } 37 | .padding-bottom-none { 38 | padding-bottom: 0 39 | } 40 | 41 | /* Vertical Align Elements in a bootstrap row, add class on row */ 42 | .v-center { 43 | display: table; 44 | width: 100%; 45 | div[class*='col-'] { 46 | display: table-cell; 47 | vertical-align: middle; 48 | float: none; 49 | } 50 | } 51 | 52 | /* Remove padding for Bootstrap columns, add class on row */ 53 | .no-gutter > [class*='col-'] { 54 | padding-right:0; 55 | padding-left:0; 56 | } 57 | 58 | /* Render DIV as Table Cells */ 59 | .table { 60 | display: table; 61 | } 62 | .table-cell { 63 | display: table-cell; 64 | } 65 | .align-top { 66 | vertical-align: top; 67 | } 68 | .align-middle { 69 | vertical-align: middle; 70 | } 71 | .align-bottom { 72 | vertical-align: bottom; 73 | } 74 | -------------------------------------------------------------------------------- /components/_images.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Images 3 | 4 | Default Mendix Image Widgets 5 | ========================================================================== */ 6 | img.img-rounded, 7 | .img-rounded img { 8 | border-radius: 6px; 9 | } 10 | img.img-thumbnail, 11 | .img-thumbnail img { 12 | -moz-transition: all .2s ease-in-out; 13 | -o-transition: all .2s ease-in-out; 14 | -webkit-transition: all .2s ease-in-out; 15 | transition: all .2s ease-in-out; 16 | 17 | border-radius: 4px; 18 | display: inline-block; 19 | height: auto; 20 | max-width: 100%; 21 | padding: 4px; 22 | line-height: $line-height-base; 23 | background-color: #fff; 24 | border: 1px solid $brand-default; 25 | } 26 | img.img-circle, 27 | .img-circle img { 28 | border-radius: 50%; 29 | } 30 | img.img-auto, 31 | .img-auto img { 32 | width: auto !important; 33 | height: auto !important; 34 | max-width: 100% !important; 35 | max-height: 100% !important; 36 | } 37 | -------------------------------------------------------------------------------- /components/_inputs.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Inputs 3 | ========================================================================== */ 4 | .form-control { 5 | -moz-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 6 | -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 7 | -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 8 | transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 9 | 10 | box-shadow: none; 11 | display: block; 12 | padding: $form-input-padding-y $form-input-padding-x; 13 | width: 100%; 14 | height: $form-input-height; 15 | border: 1px solid $form-input-border-color; 16 | border-radius: $form-input-border-radius; 17 | background-color: $form-input-bg; 18 | background-image: none; 19 | color: $form-input-color; 20 | font-size: $form-input-font-size; 21 | line-height: $form-input-line-height; 22 | } 23 | .form-control:focus { 24 | border-color: $form-input-border-focus-color; 25 | background-color: $form-input-bg-focus; 26 | outline: 0; 27 | } 28 | textarea.form-control { 29 | height: auto; 30 | } 31 | 32 | .form-control-static { 33 | overflow: hidden; 34 | min-height: auto; 35 | 36 | padding-top: $form-input-padding-y; 37 | padding-bottom: $form-input-padding-y; 38 | font-size: $form-input-font-size; 39 | line-height: $form-input-line-height; 40 | } 41 | /* Not editable textarea, textarea will be rendered as a label */ 42 | .mx-textarea label { 43 | height: auto; 44 | } 45 | 46 | 47 | 48 | /* ========================================================================== 49 | Group with label and input 50 | ========================================================================== */ 51 | /* Input and textarea get properly aligned */ 52 | .form-group div[class*='textBox'] > label, 53 | .form-group div[class*='textArea'] > label, 54 | .form-group div[class*='datePicker'] > label { 55 | @extend .form-control-static; 56 | } 57 | .form-group { 58 | margin-bottom: $form-group-margin-bottom; 59 | [class*='col-'] { 60 | padding-left: $form-group-gutter; 61 | padding-right: $form-group-gutter; 62 | } 63 | } 64 | .form-group .control-label { 65 | color: $form-label-color; 66 | font-size: $form-label-size; 67 | font-weight: $form-label-weight; 68 | } 69 | .form-horizontal { 70 | @media (min-width: $screen-sm){ 71 | .control-label { 72 | line-height: $form-input-line-height; 73 | padding-top: $form-input-padding-y; 74 | padding-bottom: $form-input-padding-y; 75 | } 76 | } 77 | } 78 | 79 | 80 | 81 | /* ========================================================================== 82 | Inputs File Upload 83 | ========================================================================== */ 84 | .mx-fileinput { 85 | .mx-wrapped-label { 86 | display: inline-block; 87 | width: 200px; 88 | } 89 | /* File input widget hover fix */ 90 | .mx-wrapped-form { 91 | .mx-wrapped-input { 92 | cursor: pointer; 93 | } 94 | .mx-fileinput-upload-button:hover { 95 | background-color: $btn-default-bg; 96 | } 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /components/_labels.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Labels 3 | 4 | Default labels combined with Bootstrap labels 5 | ========================================================================== */ 6 | .label { 7 | @include font(bold); 8 | border-radius: .25em; 9 | display: inline; 10 | padding: .2em .6em .3em !important; 11 | color: #fff; 12 | vertical-align: baseline; 13 | text-align: center; 14 | white-space: nowrap; 15 | font-size: 100%; 16 | line-height: 1; 17 | } 18 | .label-default { 19 | background-color: $label-default-bg; 20 | color: $label-default-color; 21 | } 22 | .label-primary { 23 | background-color: $label-primary-bg; 24 | color: $label-primary-color; 25 | } 26 | .label-success { 27 | background-color: $label-success-bg; 28 | color: $label-success-color; 29 | } 30 | .label-info { 31 | background-color: $label-info-bg; 32 | color: $label-info-color; 33 | } 34 | .label-warning { 35 | background-color: $label-warning-bg; 36 | color: $label-warning-color; 37 | } 38 | .label-danger { 39 | background-color: $label-danger-bg; 40 | color: $label-danger-color; 41 | } 42 | -------------------------------------------------------------------------------- /components/_layoutgrid.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Layout Grid 3 | 4 | Default Bootstrap containers 5 | ========================================================================== */ 6 | .mx-container, 7 | .mx-container-fluid { 8 | padding-left: 0; 9 | padding-right: 0; 10 | } 11 | -------------------------------------------------------------------------------- /components/_listview.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Listview 3 | 4 | Default Mendix Listview Widget. The list view shows a list of objects arranged vertically. Each object is shown using a template 5 | ========================================================================== */ 6 | .mx-listview { 7 | /* Remove widget padding */ 8 | padding: 0; 9 | 10 | /* Clear search button (overrides load more button stying) */ 11 | .mx-button.mx-listview-clear-button { 12 | width: auto; 13 | } 14 | 15 | /* Load more button */ 16 | > .mx-button { 17 | width: 100%; 18 | margin: 10px auto 19 | } 20 | .mx-listview-list { 21 | margin: 0; 22 | } 23 | .mx-listview-item { 24 | background-color: $grid-bg; 25 | padding: 10px 0; 26 | &:hover { 27 | background-color: $grid-bg; 28 | } 29 | &.selected { 30 | background-color: $grid-bg-selected !important; 31 | 32 | &:hover { 33 | background-color: $grid-bg-selected-hover !important; 34 | } 35 | } 36 | &:nth-child(2n+1) { 37 | background-color: $grid-bg; 38 | } 39 | } 40 | 41 | .mx-layoutgrid { 42 | padding-top: 0 !important; 43 | padding-bottom: 0 !important; 44 | } 45 | } 46 | 47 | 48 | /* ========================================================================== 49 | Listview Hover 50 | 51 | Default Mendix Listview Widget with hover 52 | ========================================================================== */ 53 | .listview-hover.mx-listview { 54 | .mx-listview-item { 55 | &:hover, 56 | &:active { 57 | background-color: $grid-bg-hover !important; 58 | } 59 | } 60 | } 61 | 62 | 63 | /* ========================================================================== 64 | Listview Lined 65 | 66 | Default Mendix Listview Widget with only border bottom in listview item 67 | ========================================================================== */ 68 | .listview-lined.mx-listview { 69 | .mx-listview-item { 70 | border-top: 1px solid $grid-border-color; 71 | border-right: none; 72 | border-left: none; 73 | 74 | &:first-child { 75 | border-radius: 0; 76 | } 77 | &:last-child { 78 | border-radius: 0; 79 | border-bottom: 1px solid $grid-border-color; 80 | } 81 | } 82 | } 83 | 84 | 85 | /* ========================================================================== 86 | Listview Striped 87 | 88 | Default Mendix Listview Widget with striped listview items 89 | ========================================================================== */ 90 | .listview-striped.mx-listview { 91 | .mx-listview-item:nth-child(2n+1) { 92 | background-color: $grid-bg-striped; 93 | } 94 | } 95 | 96 | 97 | /* ========================================================================== 98 | Listview Seperated 99 | 100 | Default Mendix Listview Widget with listview items seperated 101 | ========================================================================== */ 102 | .listview-seperated.mx-listview { 103 | .mx-listview-item { 104 | border-radius: 4px; 105 | margin-bottom: 10px; 106 | border-style: solid; 107 | } 108 | } 109 | 110 | 111 | /* ========================================================================== 112 | Listview Stylingless 113 | 114 | Default Mendix Listview Widget with listview items seperated 115 | ========================================================================== */ 116 | .listview-stylingless.mx-listview { 117 | .mx-listview-item { 118 | background-color: transparent; 119 | border: 0; 120 | padding: 0; 121 | cursor: default; 122 | 123 | &:hover { 124 | background-color: transparent; 125 | } 126 | &.selected { 127 | background-color: transparent !important; 128 | 129 | &:hover { 130 | background-color: transparent !important; 131 | } 132 | } 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /components/_modals.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Modals 3 | 4 | Default Mendix Modals. Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults 5 | ========================================================================== */ 6 | .modal-dialog { 7 | 8 | .modal-content { 9 | border-radius: 4px; 10 | box-shadow: 0 2px 4px rgba(0,0,0,.2); 11 | border: 1px solid $modal-header-border-color; 12 | 13 | .modal-header { 14 | border-radius: 0; // Because of the class .mx-window-active in mxui.css 15 | padding: 15px 20px; 16 | background-color: $modal-header-bg; 17 | border-bottom-color: $modal-header-border-color; 18 | h4 { 19 | @include font(bold); 20 | color: $modal-header-color; 21 | font-size: 16px; 22 | margin: 0; 23 | } 24 | .close { 25 | opacity: 1; 26 | filter: alpha(opacity=100); /* For IE8 and earlier */ 27 | 28 | color: $modal-header-color; 29 | text-shadow: none; 30 | margin-top: -3px; 31 | } 32 | } 33 | .modal-body { 34 | padding: 20px; 35 | } 36 | .modal-footer { 37 | padding: 20px; 38 | margin-top: 0; 39 | border-style: none; 40 | text-align: left; 41 | } 42 | } 43 | } 44 | 45 | 46 | /* Default Mendix Window Modal */ 47 | .mx-window { 48 | 49 | // If popup direct child is a dataview it gets the class mx-window-view 50 | &.mx-window-view .mx-window-body { 51 | padding: 0; 52 | 53 | // Dataview in popup 54 | > .mx-dataview > .mx-dataview-content, 55 | > .mx-placeholder > .mx-dataview > .mx-dataview-content { 56 | padding: 20px; 57 | } 58 | > .mx-dataview > .mx-dataview-controls, 59 | > .mx-placeholder > .mx-dataview > .mx-dataview-controls { 60 | padding: 20px; 61 | border-style: none; 62 | text-align: left; 63 | margin: 0; 64 | } 65 | } 66 | .mx-dataview-controls { 67 | padding-bottom: 0; 68 | } 69 | .mx-layoutgrid { 70 | padding-left: 0; 71 | padding-right: 0; 72 | } 73 | } 74 | 75 | 76 | /* Default Mendix Login Modal */ 77 | .mx-login { 78 | .modal-body { 79 | padding: 0 15px; 80 | } 81 | .modal-content { 82 | input { 83 | box-shadow: none; 84 | padding: 12px 12px; 85 | height: 56px; 86 | border: 1px solid #EEE; 87 | background: #eee; 88 | font-size: 16px; 89 | 90 | &:focus { 91 | border-color: #66afe9; 92 | } 93 | } 94 | } 95 | .modal-header, 96 | .modal-footer { 97 | border: 0; 98 | } 99 | button { 100 | font-size: 16px; 101 | } 102 | h4 { 103 | color: #aaa; 104 | font-weight: $font-weight-bold; 105 | font-size: 20px; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /components/_navigation.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Navigation 3 | 4 | Default Mendix Navigation Bar 5 | ========================================================================== */ 6 | .mx-navbar { 7 | border-radius: 0; 8 | margin: 0; 9 | border-style: none; 10 | background-color: $navtopbar-bg; 11 | 12 | ul.nav { 13 | 14 | margin: 0; // weird -margin if screen gets small (bootstrap) 15 | /* Navigation item */ 16 | > li.mx-navbar-item > a { 17 | @include font(normal); 18 | border-radius: 0; 19 | padding: 15px 20px; 20 | color: $navtopbar-color; 21 | font-size: $navtopbar-font-size; 22 | vertical-align: middle; 23 | 24 | /* Dropdown arrow */ 25 | .caret { 26 | border-top-color: $navtopbar-color; 27 | border-bottom-color: $navtopbar-color; 28 | } 29 | 30 | &:hover, 31 | &:focus, 32 | &.active { 33 | background-color: $navtopbar-bg-hover; 34 | color: $navtopbar-color-hover; 35 | text-decoration: none; 36 | 37 | .caret { 38 | border-top-color: $navtopbar-color-active; 39 | border-bottom-color: $navtopbar-color-active; 40 | } 41 | } 42 | &.active { 43 | color: $navtopbar-color-active; 44 | background-color: $navtopbar-bg-active; 45 | } 46 | 47 | /* Dropdown */ 48 | .mx-navbar-submenu:before { 49 | position: absolute; 50 | top: -9px; 51 | left: 15px; 52 | width: 0; 53 | height: 0; 54 | border-width: 0 9px 9px 9px; 55 | border-style: solid; 56 | border-color: transparent transparent $navtopbar-border-color transparent; 57 | content: ""; 58 | transform: rotate(360deg); 59 | -webkit-transform: rotate(360deg); 60 | } 61 | 62 | // Image 63 | img { 64 | width: 20px; // Default size (so it looks good) 65 | height: auto; 66 | } 67 | 68 | .glyphicon { 69 | vertical-align: middle; 70 | font-size: $navtopbar-glyph-size; 71 | top: -1px; 72 | } 73 | } 74 | 75 | /* When hovering or the dropdown is open */ 76 | > .mx-navbar-item > a:hover, 77 | > .mx-navbar-item > a:focus, 78 | > .mx-navbar-item.active a, 79 | > .mx-navbar-item.open > a, 80 | > .mx-navbar-item.open > a:hover, 81 | > .mx-navbar-item.open > a:focus { 82 | background-color: $navtopbar-bg-hover; 83 | color: $navtopbar-color-hover; 84 | text-decoration: none; 85 | 86 | .caret { 87 | border-top-color: $navtopbar-color-hover; 88 | border-bottom-color: $navtopbar-color-hover; 89 | } 90 | } 91 | > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a { 92 | background-color: $navtopbar-sub-bg-active; 93 | color: $navtopbar-sub-color-active; 94 | 95 | .caret { 96 | border-top-color: $navtopbar-sub-color-active; 97 | border-bottom-color: $navtopbar-sub-color-active; 98 | } 99 | } 100 | } 101 | 102 | @media (max-width: $screen-sm) { 103 | ul.nav > li.mx-navbar-item > a { 104 | padding: 10px 20px; 105 | } 106 | .mx-navbar-item.open .dropdown-menu { 107 | background-color: $navtopbar-sub-bg; 108 | border-radius: 0; 109 | padding: 0; 110 | 111 | > li.mx-navbar-subitem > a { 112 | @include font(normal); 113 | padding: 10px 20px; 114 | border-radius: 0; 115 | color: $navtopbar-sub-color; 116 | font-size: $navtopbar-sub-font-size; 117 | 118 | &:hover, 119 | &:focus { 120 | color: $navtopbar-sub-color-hover; 121 | background-color: $navtopbar-sub-bg-hover; 122 | } 123 | 124 | &.active { 125 | color: $navtopbar-sub-color-active; 126 | background-color: $navtopbar-sub-bg-active; 127 | } 128 | } 129 | } 130 | } 131 | 132 | /* remove focus */ 133 | &:focus { 134 | outline: 0; 135 | } 136 | } 137 | 138 | 139 | /* ========================================================================== 140 | Navigation 141 | 142 | Default Mendix Navigation Tree 143 | ========================================================================== */ 144 | .mx-navigationtree { 145 | background-color: $navsidebar-bg; 146 | 147 | /* Every navigation item */ 148 | .navbar-inner ul { 149 | margin: 0; 150 | padding-left: 0; 151 | 152 | li { 153 | padding: 0; 154 | border-style: none; 155 | 156 | a { 157 | @include font(normal); 158 | display: block; 159 | padding: 15px 20px 15px 16px; 160 | border-bottom: 1px solid $navsidebar-border-color; 161 | border-radius: 0; 162 | color: $navsidebar-color; 163 | text-shadow: none; 164 | font-size: $navsidebar-font-size; 165 | vertical-align: middle; 166 | background-color: $navsidebar-bg; 167 | border-left: 4px solid transparent; 168 | 169 | .caret { 170 | border-top-color: $navsidebar-color; 171 | border-bottom-color: $navsidebar-color; 172 | } 173 | 174 | img { 175 | margin-right: 4px; 176 | width: 20px; // Default size 177 | height: auto; 178 | } 179 | 180 | .glyphicon { 181 | vertical-align: middle; 182 | font-size: $navsidebar-glyph-size; 183 | top: -1px; 184 | } 185 | } 186 | 187 | a:hover, 188 | a:focus, 189 | a.active { 190 | background-color: $navsidebar-bg-hover; 191 | color: $navsidebar-color-hover; 192 | text-decoration: none; 193 | 194 | .caret { 195 | border-top-color: $navsidebar-color-active; 196 | border-bottom-color: $navsidebar-color-active; 197 | } 198 | } 199 | 200 | a.active { 201 | border-left-color: $navsidebar-color-active; 202 | color: $navsidebar-color-active; 203 | background-color: $navsidebar-bg-active; 204 | } 205 | } 206 | } 207 | 208 | /* Sub navigation item specific */ 209 | li.mx-navigationtree-has-items { 210 | > ul { 211 | margin: 0; 212 | padding-left: 0; 213 | background-color: $navsidebar-sub-bg; 214 | 215 | li { 216 | margin: 0; 217 | padding: 0; 218 | a { 219 | @include font(normal); 220 | color: $navsidebar-sub-color; 221 | font-size: $navsidebar-sub-font-size; 222 | background-color: $navsidebar-sub-bg; 223 | padding: 12px 20px 12px 25px; 224 | border: 0; 225 | 226 | &:hover, 227 | &:focus, 228 | &.active { 229 | color: $navsidebar-sub-color-hover; 230 | background-color: $navsidebar-sub-bg-hover; 231 | } 232 | &.active { 233 | border: 0; 234 | color: $navsidebar-sub-color-active; 235 | background-color: $navsidebar-sub-bg-active; 236 | } 237 | } 238 | } 239 | } 240 | } 241 | 242 | /* remove focus */ 243 | &:focus { 244 | outline: 0; 245 | } 246 | } 247 | 248 | 249 | /* Content Centerd text and icons */ 250 | 251 | .mx-navigationtree.nav-content-center-text-icons { 252 | .navbar-inner ul { 253 | a { 254 | text-align: center; 255 | .glyphicon { 256 | display: block; 257 | margin-bottom: 5px; 258 | } 259 | } 260 | } 261 | } 262 | 263 | /* Content Centerd icons only */ 264 | 265 | .mx-navigationtree.nav-content-center { 266 | .navbar-inner ul { 267 | a { 268 | text-align: center; 269 | .glyphicon { 270 | 271 | } 272 | } 273 | } 274 | } 275 | 276 | 277 | /* ========================================================================== 278 | Navigation 279 | 280 | Default Mendix Simple Menu Bar 281 | ========================================================================== */ 282 | .mx-menubar { 283 | padding: 0; 284 | background-color: $navsidebar-bg; 285 | ul.mx-menubar-list { 286 | width: 100%; 287 | min-height: 50px; 288 | table-layout: fixed; 289 | li.mx-menubar-item { 290 | margin: 0; 291 | width: 100%; 292 | display: inline-block; 293 | a { 294 | @include font(normal); 295 | border-radius: 0; 296 | color: $navsidebar-color; 297 | font-size: $navsidebar-sub-font-size; 298 | padding: 0 8px; 299 | text-align: center; 300 | line-height: 50px; 301 | overflow: hidden; 302 | display: block; 303 | vertical-align: middle; 304 | 305 | .glyphicon { 306 | vertical-align: middle; 307 | font-size: $navsidebar-glyph-size; 308 | top: -1px; 309 | } 310 | } 311 | a:hover, 312 | a:focus, 313 | &:hover a, 314 | &:focus a, 315 | &.active a { 316 | background-color: $navsidebar-bg-hover; 317 | color: $navsidebar-color-hover; 318 | text-decoration: none; 319 | } 320 | &.active a { 321 | color: $navsidebar-color-active; 322 | background-color: $navsidebar-bg-active; 323 | } 324 | } 325 | } 326 | 327 | /* Two menu items */ 328 | &.menubar-col-6 ul.mx-menubar-list li.mx-menubar-item { 329 | width: 50%; 330 | } 331 | /* Three menu items */ 332 | &.menubar-col-4 ul.mx-menubar-list li.mx-menubar-item { 333 | width: 33.33333333%; 334 | } 335 | /* Four menu items */ 336 | &.menubar-col-3 ul.mx-menubar-list li.mx-menubar-item { 337 | width: 25%; 338 | } 339 | /* Five menu items */ 340 | &.menubar-col-2 ul.mx-menubar-list li.mx-menubar-item { 341 | width: 20%; 342 | } 343 | 344 | /* remove focus */ 345 | &:focus { 346 | outline: 0; 347 | } 348 | } 349 | 350 | /* text and icons centerd */ 351 | .mx-menubar.bottom-nav-text-icons { 352 | ul.mx-menubar-list { 353 | li.mx-menubar-item { 354 | a { 355 | line-height: normal; 356 | padding: 8px 8px 6px 8px; 357 | .glyphicon { 358 | display: block; 359 | font-size: 18px; 360 | margin-bottom: 4px; 361 | } 362 | } 363 | } 364 | } 365 | 366 | } 367 | 368 | /* Vertical variation specifics */ 369 | .mx-menubar-vertical { 370 | background-color: $navtopbar-bg; 371 | ul.mx-menubar-list { 372 | li.mx-menubar-item { 373 | a { 374 | color: $navtopbar-color; 375 | font-size: $navtopbar-font-size; 376 | border-bottom: 1px solid $navtopbar-border-color; 377 | 378 | .glyphicon { 379 | vertical-align: middle; 380 | font-size: $navtopbar-glyph-size; 381 | top: -1px; 382 | } 383 | 384 | &:hover, 385 | &:focus, 386 | &.active { 387 | background-color: $navtopbar-bg-hover; 388 | color: $navtopbar-color-hover; 389 | text-decoration: none; 390 | } 391 | &.active { 392 | color: $navtopbar-color-active; 393 | background-color: $navtopbar-bg-active; 394 | } 395 | } 396 | } 397 | } 398 | } 399 | 400 | /* Horizontal variation specifics */ 401 | .mx-menubar-horizontal { 402 | ul.mx-menubar-list { 403 | li.mx-menubar-item { 404 | width: auto; 405 | } 406 | } 407 | } 408 | 409 | -------------------------------------------------------------------------------- /components/_navigationlist.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Navigation List 3 | 4 | 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 5 | ========================================================================== */ 6 | .mx-navigationlist { 7 | padding: 0; 8 | margin: 0; 9 | 10 | .mx-navigationlist-item { 11 | padding: 15px 20px 15px 16px; 12 | border-left: 4px solid transparent; 13 | border-bottom: 1px solid $navsidebar-border-color; 14 | border-top: none; 15 | border-radius: 0; 16 | background-color: $navsidebar-bg; 17 | label { 18 | @include font(normal); 19 | color: $navsidebar-color; 20 | font-size: $navsidebar-font-size; 21 | } 22 | &:hover, 23 | &:focus, 24 | &.active { 25 | background-color: $navsidebar-bg-hover; 26 | label { 27 | color: $navsidebar-color-hover; 28 | } 29 | } 30 | &.active { 31 | border-left-color: $navsidebar-color-active; 32 | color: $navsidebar-color-active; 33 | background-color: $navsidebar-bg-active; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /components/_tabcontainer.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Tab Container 3 | 4 | Default Mendix Tab Container Widget. Tab containers are used to show information categorized into multiple tab pages. 5 | 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 6 | ========================================================================== */ 7 | .mx-tabcontainer { 8 | .mx-tabcontainer-tabs { 9 | margin-bottom: 20px; 10 | border-color: $tabs-border-color; 11 | > li > a { 12 | @include font(normal); 13 | 14 | -moz-transition: all .2s ease-in-out; 15 | -o-transition: all .2s ease-in-out; 16 | -webkit-transition: all .2s ease-in-out; 17 | transition: all .2s ease-in-out; 18 | 19 | margin-right: 0; 20 | color: $tabs-color; 21 | 22 | &:hover, 23 | &:focus { 24 | background-color: $tabs-bg-hover; 25 | } 26 | } 27 | 28 | > li.active > a, 29 | > li.active > a:hover, 30 | > li.active > a:focus { 31 | border: 1px solid $tabs-border-color; 32 | border-bottom-color: transparent; 33 | background-color: $tabs-bg; 34 | color: $tabs-color-active; 35 | } 36 | } 37 | } 38 | 39 | 40 | /* ========================================================================== 41 | Tab Container Pills 42 | 43 | Default Mendix Tab Container Widget rendered as Pills 44 | ========================================================================== */ 45 | .tab-pills.mx-tabcontainer { 46 | .mx-tabcontainer-tabs { 47 | border: 0; 48 | > li > a { 49 | border-radius: 4px; 50 | margin-right: 2px; 51 | border: 1px solid $tabs-border-color; 52 | color: $tabs-color; 53 | 54 | &:hover, 55 | &:focus { 56 | background-color: $tabs-bg-hover; 57 | } 58 | } 59 | 60 | > li.active > a, 61 | > li.active > a:hover, 62 | > li.active > a:focus { 63 | background-color: $tabs-bg-active; 64 | color: #FFF; 65 | border-color: $tabs-bg-active; 66 | } 67 | } 68 | } 69 | 70 | 71 | /* ========================================================================== 72 | Tab Container Lined 73 | 74 | Default Mendix Tab Container Widget rendered with tabs rendered without background 75 | ========================================================================== */ 76 | .tab-lined.mx-tabcontainer { 77 | .mx-tabcontainer-tabs { 78 | border-width: 3px; 79 | 80 | li { 81 | margin-bottom: -3px; 82 | margin-right: 30px; 83 | 84 | > a { 85 | padding: 10px 0; 86 | border: 0; 87 | border-style: solid; 88 | border-color: transparent; 89 | border-bottom-width: 3px; 90 | border-radius: 0; 91 | color: $tabs-color; 92 | 93 | &:hover, 94 | &:focus { 95 | border: 0; 96 | border-color: transparent; 97 | background: transparent; 98 | color: $tabs-color; 99 | } 100 | 101 | } 102 | 103 | &.active > a, 104 | &.active > a:hover, 105 | &.active > a:focus { 106 | border: 0; 107 | border-bottom: 3px solid $tabs-lined-border-color; 108 | background-color: transparent; 109 | color: $tabs-lined-color-active; 110 | } 111 | } 112 | } 113 | } 114 | 115 | 116 | /* ========================================================================== 117 | Tab Container Justified 118 | 119 | Default Mendix Tab Container Widget rendered as justified 120 | ========================================================================== */ 121 | .tab-justified.mx-tabcontainer { 122 | .mx-tabcontainer-tabs { 123 | width: 100%; 124 | border-bottom: 0; 125 | 126 | > li { 127 | display: table-cell; 128 | float: none; 129 | margin: 0; 130 | width: 1%; 131 | @media (max-width: 768px) { 132 | display: block; 133 | width: 100%; 134 | } 135 | > a { 136 | border-bottom: 1px solid $tabs-border-color; 137 | text-align: center; 138 | } 139 | 140 | } 141 | > li.active > a { 142 | border-radius: 4px; 143 | border-bottom-color: transparent; 144 | 145 | @media (max-width: 768px) { 146 | border-bottom-color: $tabs-border-color; 147 | } 148 | } 149 | } 150 | } 151 | 152 | 153 | /* ========================================================================== 154 | Tab Container Bordered 155 | 156 | Default Mendix Tab Container Widget rendered with borders 157 | ========================================================================== */ 158 | .tab-bordered.mx-tabcontainer { 159 | .mx-tabcontainer-tabs { 160 | margin: 0; 161 | } 162 | 163 | .mx-tabcontainer-content { 164 | padding: 10px; 165 | border-width: 0 1px 1px 1px; 166 | border-style: solid; 167 | border-color: $tabs-border-color; 168 | background-color: #FFF; 169 | } 170 | } 171 | 172 | 173 | /* ========================================================================== 174 | Tab Container Mobile 175 | 176 | Default Mendix Tab Container Widget rendered for mobile use 177 | ========================================================================== */ 178 | .tab-mobile.mx-tabcontainer { 179 | .mx-tabcontainer-tabs { 180 | margin: 0 0 10px 0 !important; 181 | border-color: transparent; 182 | background-color: $brand-primary; 183 | text-align: center; 184 | 185 | li { 186 | display: table-cell; 187 | float: none; 188 | margin: 0; 189 | width: 1%; 190 | a { 191 | padding: 15px 0; 192 | border-style: none; 193 | color: #FFF; 194 | font-weight: normal; 195 | font-size: 11px; 196 | text-transform: uppercase; 197 | &:hover, 198 | &:focus { 199 | color: $tabs-color-active; 200 | border-style: none; 201 | background-color: transparent; 202 | } 203 | } 204 | 205 | &.active a { 206 | color: $tabs-color-active; 207 | background-color: transparent; 208 | @include css-arrow(bottom, 5px, 5px, #FFF, #FFF, 0); 209 | &:after, 210 | &:before { 211 | -webkit-transform: rotate(180deg); 212 | } 213 | &:after { 214 | top: 80%; 215 | } 216 | &:before { 217 | top: 75%; 218 | } 219 | } 220 | } 221 | } 222 | } 223 | -------------------------------------------------------------------------------- /components/_tables.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Tables 3 | 4 | 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 5 | ========================================================================== */ 6 | th { @include font(bold);} 7 | table.mx-table { 8 | > tbody { 9 | 10 | /* Table row */ 11 | > tr { 12 | 13 | /* Table header */ 14 | > th { 15 | padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; 16 | * { 17 | @include font(bold); 18 | color: $form-label-color; 19 | font-weight: $form-label-weight; 20 | } 21 | > label { 22 | padding-top: 7px; 23 | padding-bottom: 6px; // Aligns label in the middle if there is no input field next to it. 24 | } 25 | } 26 | 27 | /* Table cells */ 28 | > td { 29 | padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; 30 | > div > label, 31 | .mx-referenceselector-input-wrapper label { 32 | padding-top: 7px; 33 | padding-bottom: 6px; // Aligns label in the middle if there is no input field next to it. 34 | } 35 | } 36 | } 37 | } 38 | } 39 | 40 | 41 | /* Default Mendix Table Widget inside TemplateGrid */ 42 | .mx-templategrid table.mx-table { 43 | > tbody { 44 | > tr { 45 | > th, 46 | > td { 47 | padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; 48 | } 49 | } 50 | } 51 | } 52 | 53 | 54 | /* Default Mendix Table Widget inside Listview */ 55 | .mx-list table.mx-table { 56 | > tbody { 57 | > tr { 58 | > th, 59 | > td { 60 | padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; 61 | } 62 | } 63 | } 64 | } 65 | 66 | 67 | /* ========================================================================== 68 | Tables Lined 69 | 70 | Default Mendix Table Widget with borders top and bottom 71 | ========================================================================== */ 72 | table.table-lined.mx-table { 73 | > tbody { 74 | 75 | // Table row 76 | > tr { 77 | 78 | // Table header 79 | // Table data 80 | > th, 81 | > td { 82 | border-width: 1px 0; 83 | border-style: solid; 84 | border-color: $grid-border-color; 85 | } 86 | } 87 | } 88 | } 89 | 90 | 91 | /* ========================================================================== 92 | Tables Bordered 93 | 94 | Default Mendix Table Widget with borders 95 | ========================================================================== */ 96 | table.table-bordered.mx-table { 97 | > tbody { 98 | 99 | // Table row 100 | > tr { 101 | 102 | // Table header 103 | // Table data 104 | > th , 105 | > td { 106 | border-width: 1px; 107 | border-style: solid; 108 | border-color: $grid-border-color; 109 | } 110 | } 111 | } 112 | } 113 | 114 | 115 | /* ========================================================================== 116 | Tables Compact 117 | 118 | Default Mendix Table Widget with less spacing in table cells 119 | ========================================================================== */ 120 | table.table-compact.mx-table { 121 | > tbody { 122 | 123 | // Table row 124 | > tr { 125 | 126 | // Table header 127 | // Table data 128 | > th, 129 | > td { 130 | padding-top: 2px; 131 | padding-bottom: 2px; 132 | } 133 | } 134 | } 135 | } 136 | 137 | 138 | /* ========================================================================== 139 | Tables Sideless 140 | 141 | Default Mendix Table Widget inside TemplateGrid 142 | ========================================================================== */ 143 | table.table-sideless.mx-table { 144 | > tbody { 145 | 146 | // Table row 147 | > tr { 148 | 149 | // Table header 150 | // Table data 151 | > td, 152 | > th { 153 | padding-right: 0; 154 | } 155 | > th:first-child, 156 | > td:first-child { 157 | padding-left: 0; 158 | } 159 | } 160 | } 161 | } 162 | 163 | 164 | /* ========================================================================== 165 | Tables Spaceless 166 | 167 | Default Mendix Table Widget without padding 168 | ========================================================================== */ 169 | table.table-spaceless.mx-table { 170 | > tbody { 171 | 172 | // Table row 173 | > tr { 174 | 175 | // Table header 176 | // Table data 177 | > th, 178 | > td { 179 | padding: 0; 180 | } 181 | } 182 | } 183 | } 184 | 185 | 186 | /* ========================================================================== 187 | Tables Vertical 188 | 189 | Default Mendix Table Widget vertical aligned 190 | ========================================================================== */ 191 | table.table-vertical.mx-table { 192 | > tbody { 193 | 194 | // Table row 195 | > tr { 196 | 197 | // Table header 198 | > th { 199 | padding-bottom: 0; 200 | > label { padding: 0; } 201 | > div > label { padding: 0; } 202 | } 203 | } 204 | } 205 | } 206 | 207 | 208 | /* ========================================================================== 209 | Tables Vertical Middle 210 | 211 | Default Mendix Table Widget vertical aligned middle 212 | ========================================================================== */ 213 | table.table-align-vertical-middle.mx-table { 214 | > tbody { 215 | 216 | // Table row 217 | > tr { 218 | 219 | // Table header 220 | // Table data 221 | > th, 222 | > td { 223 | vertical-align: middle; 224 | } 225 | } 226 | } 227 | } 228 | 229 | 230 | /* ========================================================================== 231 | Tables Compact 232 | 233 | Default Mendix Table Widget without padding and margin 234 | ========================================================================== */ 235 | table.table-label-compact.mx-table { 236 | > tbody { 237 | 238 | // Table row 239 | > tr { 240 | 241 | // Table header 242 | // Table data 243 | > th, 244 | > td { 245 | > label { 246 | padding: 0; 247 | margin: 0; 248 | } 249 | > div > label, 250 | .mx-referenceselector-input-wrapper label { 251 | padding: 0; 252 | margin: 0; 253 | } 254 | } 255 | } 256 | } 257 | } 258 | 259 | 260 | html body .mx-page table.mx-table { 261 | th, 262 | td { 263 | &.nopadding { 264 | padding: 0; 265 | } 266 | } 267 | } 268 | 269 | 270 | /* ========================================================================== 271 | Tables Row Sizes 272 | ========================================================================== */ 273 | $height-row-s: 55px; 274 | $height-row-m: 70px; 275 | $height-row-l: 120px; 276 | 277 | /* Small rows 278 | ========================================================================== */ 279 | table.table-row-s.mx-table { 280 | > tbody { 281 | 282 | // Table row 283 | > tr { 284 | 285 | // Table header 286 | // Table data 287 | > th, 288 | > td { 289 | height: $height-row-s; 290 | } 291 | } 292 | } 293 | } 294 | 295 | 296 | /* Medium rows 297 | ========================================================================== */ 298 | table.table-row-m.mx-table { 299 | > tbody { 300 | 301 | // Table row 302 | > tr { 303 | 304 | // Table header 305 | // Table data 306 | > th, 307 | > td { 308 | height: $height-row-m; 309 | } 310 | } 311 | } 312 | } 313 | 314 | /* Large rows 315 | ========================================================================== */ 316 | table.table-row-l.mx-table { 317 | > tbody { 318 | 319 | // Table row 320 | > tr { 321 | 322 | // Table header 323 | // Table data 324 | > th, 325 | > td { 326 | height: $height-row-l; 327 | } 328 | } 329 | } 330 | } 331 | 332 | 333 | /* Table Fixed 334 | ========================================================================== */ 335 | table.table-fixed { 336 | table-layout: fixed; 337 | } 338 | -------------------------------------------------------------------------------- /components/_templategrids.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Templategrid 3 | 4 | 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 5 | ========================================================================== */ 6 | .mx-templategrid { 7 | .mx-templategrid-content-wrapper { 8 | table-layout: fixed; 9 | } 10 | .mx-templategrid-item { 11 | background-color: $grid-bg; 12 | padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom $padding-table-cell-left; 13 | cursor: default; 14 | 15 | &:hover { 16 | background-color: transparent; 17 | } 18 | &.selected { 19 | background-color: $grid-bg-selected !important; 20 | } 21 | } 22 | .mx-layoutgrid { 23 | padding-top: 0 !important; 24 | padding-bottom: 0 !important; 25 | } 26 | } 27 | 28 | 29 | /* ========================================================================== 30 | Templategrid Hover 31 | 32 | Default Mendix Templategrid Widget Hover 33 | ========================================================================== */ 34 | .templategrid-hover.mx-templategrid { 35 | .mx-templategrid-item { 36 | &:hover { 37 | background-color: $grid-bg-hover !important; 38 | } 39 | &.selected { 40 | background-color: $grid-bg-selected !important; 41 | 42 | &:hover { 43 | background-color: $grid-bg-selected-hover !important; 44 | } 45 | } 46 | } 47 | } 48 | 49 | 50 | /* ========================================================================== 51 | Templategrid Selectable 52 | 53 | Default Mendix Templategrid Widget with selection enabled 54 | ========================================================================== */ 55 | .templategrid-selectable.mx-templategrid { 56 | .mx-templategrid-item { 57 | cursor: pointer; 58 | } 59 | } 60 | 61 | 62 | /* ========================================================================== 63 | Templategrid Lined 64 | 65 | Default Mendix Templategrid Widget with borders between items 66 | ========================================================================== */ 67 | .templategrid-lined.mx-templategrid { 68 | .mx-grid-content { 69 | border-top-style: solid; 70 | border-top-color: $grid-border-color; 71 | border-top-width: 2px; 72 | } 73 | .mx-templategrid-item { 74 | border-left: none; 75 | border-right: none; 76 | border-top: 1px solid $grid-border-color; 77 | border-bottom: 1px solid $grid-border-color; 78 | } 79 | } 80 | 81 | 82 | /* ========================================================================== 83 | Templategrid Striped 84 | 85 | Default Mendix Templategrid Widget with background between items 86 | ========================================================================== */ 87 | .templategrid-striped.mx-templategrid { 88 | .mx-templategrid-row:nth-child(odd) .mx-templategrid-item { 89 | background-color: #f9f9f9; 90 | } 91 | } 92 | 93 | 94 | /* ========================================================================== 95 | Templategrid Stylingless 96 | 97 | Default Mendix Templategrid Widget without styling 98 | ========================================================================== */ 99 | .templategrid-stylingless.mx-templategrid { 100 | .mx-templategrid-item { 101 | background-color: transparent; 102 | border: 0; 103 | padding: 0; 104 | cursor: default; 105 | 106 | &:hover { 107 | background-color: transparent; 108 | } 109 | &.selected { 110 | background-color: transparent !important; 111 | 112 | &:hover { 113 | background-color: transparent !important; 114 | } 115 | } 116 | } 117 | } 118 | 119 | 120 | /* ========================================================================== 121 | Templategrid Transparent 122 | 123 | Default Mendix Templategrid Widget without background and padding in items 124 | ========================================================================== */ 125 | .templategrid-transparent.mx-templategrid { 126 | .mx-templategrid-item { 127 | background-color: transparent; 128 | border: 0; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /components/_typography.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Typography 3 | ========================================================================== */ 4 | p { 5 | line-height: $line-height-base; 6 | } 7 | label { 8 | padding-top: 0; 9 | } 10 | .mx-title { 11 | font-weight: $font-weight-headers; 12 | color: $font-base-color; 13 | font-size: $font-size-h1; 14 | } 15 | h1, .h1, .h1 > * { font-size: $font-size-h1; } 16 | h2, .h2, .h2 > * { font-size: $font-size-h2; } 17 | h3, .h3, .h3 > * { font-size: $font-size-h3; } 18 | h4, .h4, .h4 > * { font-size: $font-size-h4; } 19 | h5, .h5, .h5 > * { font-size: $font-size-h5; } 20 | h6, .h6, .h6 > * { font-size: $font-size-h6; } 21 | 22 | h1, h2, h3, h4, h5, h6, 23 | .h1, .h2, .h3, .h4, .h5, .h6 { 24 | font-weight: $font-weight-headers; 25 | color: $font-color-headers; 26 | line-height: 1.3; 27 | } 28 | 29 | 30 | /* Text Weights */ 31 | .text-light, .text-light > *, .text-light label { 32 | @include font(light); 33 | } 34 | .text-normal, .text-normal > *, .text-normal label { 35 | @include font(normal); 36 | } 37 | .text-semibold, .text-semibold > *, .text-semibold label { 38 | @include font(semibold); 39 | } 40 | .text-bold, .text-bold > *, .text-bold label { 41 | @include font(bold); 42 | } 43 | 44 | 45 | /* ========================================================================== 46 | Text Utility Classes 47 | ========================================================================== */ 48 | .text-spacing { 49 | margin-top: 1em; 50 | margin-bottom: 1em; 51 | } 52 | .text-lined { 53 | padding-bottom: 10px; 54 | border-bottom: 1px solid $default-border-color; 55 | } 56 | 57 | 58 | /* Text Break */ 59 | .text-break { 60 | -ms-word-break: break-all; 61 | word-break: break-all; 62 | word-break: break-word; 63 | -webkit-hyphens: auto; 64 | -moz-hyphens: auto; 65 | hyphens: auto; 66 | } 67 | 68 | 69 | /* ========================================================================== 70 | Typography 71 | 72 | Text Colors 73 | ========================================================================== */ 74 | // Gray shades 75 | .text-gray-darker { color: $gray-darker; } 76 | .text-gray-dark { color: $gray-dark; } 77 | .text-gray { color: $gray; } 78 | .text-gray-light { color: $gray-light; } 79 | .text-gray-primary { color: $gray-primary; } 80 | .text-gray-lighter { color: $gray-lighter; } 81 | 82 | // Colors 83 | .text-default, .text-default:hover { color: $color-text-black; } 84 | .text-primary, .text-primary:hover { color: $brand-primary; } 85 | .text-info, .text-info:hover { color: $brand-info; } 86 | .text-success, .text-success:hover { color: $brand-success; } 87 | .text-warning, .text-warning:hover { color: $brand-warning; } 88 | .text-danger, .text-danger:hover { color: $brand-danger; } 89 | 90 | // Text colors 91 | .text-black { color: $color-text-black; } 92 | .text-black-secondary { color: $color-text-black-secondary; } 93 | .text-black-disabled { color: $color-text-black-disabled; } 94 | .text-black-hint { color: $color-text-black-hint; } 95 | 96 | .text-white { color: $color-text-white; } 97 | .text-white-secondary { color: $color-text-white-secondary; } 98 | .text-white-disabled { color: $color-text-white-disabled; } 99 | .text-white-hint { color: $color-text-white-hint; } 100 | -------------------------------------------------------------------------------- /layouts/_base.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Regions 3 | 4 | Used for navigation layouts 5 | ========================================================================== */ 6 | .region-topbar { 7 | min-height: $topbar-minimalheight; 8 | border-bottom: 1px solid $navtopbar-border-color; 9 | background-color: $navtopbar-bg; 10 | > .mx-layoutcontainer-wrapper { 11 | padding: 0; 12 | } 13 | 14 | .toggle-btn { 15 | font-size: 16px; 16 | float: left; 17 | margin: -20px 15px 0 0; 18 | transform: translateY($topbar-minimalheight / 2); 19 | } 20 | .navbar-header { 21 | width: 100%; 22 | } 23 | // SSO widgets 24 | .navbar-right { 25 | min-height: $topbar-minimalheight; 26 | max-width: 100%; 27 | .mx-appswitcher-button-placeholder, 28 | .mx-profilemenu-button-placeholder { 29 | display: inline-block; 30 | border-left: 1px solid $default-border-color; 31 | width: $topbar-minimalheight; 32 | height: $topbar-minimalheight; 33 | position: relative; 34 | float: left; 35 | max-width: 50%; 36 | iframe { 37 | width: 48px; 38 | height: 48px; 39 | 40 | position: absolute; 41 | top: 0; 42 | right: 0; 43 | bottom: 0; 44 | left: 0; 45 | margin: auto auto; 46 | } 47 | 48 | } 49 | @media (max-width: 768px) { 50 | display: none; 51 | } 52 | } 53 | } 54 | .region-sidebar, 55 | .region-sidebar-fixed { 56 | background-color: $navsidebar-bg; 57 | > .mx-layoutcontainer-wrapper { 58 | padding: 0; 59 | } 60 | } 61 | .region-content { 62 | padding: 0; // for if region-content is on a col so you dont get scollbar 63 | > .mx-layoutcontainer-wrapper { 64 | padding: 0; 65 | } 66 | > .mx-placeholder, 67 | > .mx-layoutcontainer-wrapper .mx-placeholder { 68 | 69 | // Fake orginal container styling on the first container on the page 70 | .mx-layoutgrid-fixed { 71 | max-width: 1170px; 72 | margin: auto 73 | } 74 | } 75 | } 76 | .region-footer { 77 | > .mx-layoutcontainer-wrapper { 78 | padding: 0; 79 | } 80 | } 81 | 82 | .layout-sidebar-responsive { 83 | .region-sidebar-fixed { 84 | display: none; 85 | @extend .region-sidebar; 86 | @media (min-width: 768px) { 87 | position: fixed; 88 | top: $topbar-minimalheight; 89 | bottom: 0; 90 | z-index: 10; 91 | display: block; 92 | overflow-x: hidden; 93 | overflow-y: auto; 94 | padding: 0; 95 | } 96 | } 97 | .mx-scrollcontainer-open { 98 | @media (min-width: 768px) { 99 | left: -200px !important; 100 | } 101 | } 102 | } 103 | body[dir="rtl"] .layout-sidebar-responsive .region-sidebar-fixed { 104 | @media (min-width: 768px) { 105 | right: 0; 106 | } 107 | } 108 | body[dir="ltr"] .layout-sidebar-responsive .region-sidebar-fixed { 109 | @media (min-width: 768px) { 110 | left: 0; 111 | } 112 | } 113 | 114 | /* ========================================================================== 115 | Navbar Brand 116 | 117 | For your company, product, or project name 118 | ========================================================================== */ 119 | .navbar-brand { 120 | display: block; 121 | min-height: $topbar-minimalheight; 122 | float: left; 123 | padding: 0; 124 | line-height: $topbar-minimalheight; 125 | 126 | @if $brand-logo != false { 127 | img { 128 | display: none; 129 | } 130 | &:before { 131 | content: ""; 132 | display: inline-block; 133 | width: $brand-logo-width; 134 | height: $brand-logo-height; 135 | vertical-align: middle; 136 | background-image: url($brand-logo); 137 | background-size: contain; 138 | background-repeat: no-repeat; 139 | background-position: center center; 140 | margin-top: -5px; 141 | margin-right: 5px; 142 | } 143 | } @else { 144 | img { 145 | height: $brand-logo-height; 146 | width: auto; 147 | display: inline-block; 148 | vertical-align: middle; 149 | } 150 | } 151 | 152 | a { 153 | font-size: 20px; 154 | color: $navbar-brand-name; 155 | 156 | &:hover, 157 | &:focus { 158 | text-decoration: none; 159 | } 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /layouts/_navlayout-content.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Region Content 3 | 4 | Specific content styling 5 | ========================================================================== */ 6 | .region-content { 7 | 8 | > .mx-layoutcontainer-wrapper { 9 | 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /layouts/_navlayout-sidebar.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Region Sidebar 3 | 4 | Specific sidebar styling 5 | ========================================================================== */ 6 | .region-sidebar { 7 | background-color: $navsidebar-bg; 8 | > .mx-layoutcontainer-wrapper { 9 | padding: 0; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /layouts/_navlayout-topbar.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Region Topbar 3 | 4 | Specific topbar styling 5 | ========================================================================== */ 6 | .navlayout-topbar { 7 | .region-topbar { 8 | /* Reset Layout Grid spacing */ 9 | .container-fluid { 10 | padding: 0 20px; 11 | } 12 | .mx-navbar { 13 | float: left; 14 | background-color: transparent; 15 | @media (max-width: $screen-sm) { 16 | float: none; 17 | clear: both; 18 | } 19 | ul.nav { 20 | > li.mx-navbar-item > a { 21 | padding: 0 30px; 22 | line-height: $topbar-minimalheight; 23 | } 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /lib.scss: -------------------------------------------------------------------------------- 1 | @import "../custom/custom-variables"; 2 | 3 | // Base 4 | @import "base/variables"; 5 | @import "base/mixins"; 6 | @import "base/reset"; 7 | @import "base/base"; 8 | 9 | // Components 10 | @import "components/inputs"; 11 | @import "components/alerts"; 12 | @import "components/backgrounds"; 13 | @import "components/buttons"; 14 | @import "components/grid"; 15 | @import "components/datagrids"; 16 | @import "components/dataview"; 17 | @import "components/dijit-widgets"; 18 | @import "components/glyphicons"; 19 | @import "components/groupbox"; 20 | @import "components/helpers"; 21 | @import "components/images"; 22 | @import "components/labels"; 23 | @import "components/listview"; 24 | @import "components/modals"; 25 | @import "components/navigation"; 26 | @import "components/navigationlist"; 27 | @import "components/tabcontainer"; 28 | @import "components/tables"; 29 | @import "components/templategrids"; 30 | @import "components/typography"; 31 | 32 | // Page Templates 33 | @import "pagetemplates/responsive/page-dashboard"; 34 | @import "pagetemplates/responsive/page-form"; 35 | @import "pagetemplates/responsive/page-login"; 36 | @import "pagetemplates/responsive/page-masterdetail"; 37 | @import "pagetemplates/responsive/page-tabs"; 38 | @import "pagetemplates/responsive/page-website"; 39 | @import "pagetemplates/responsive/page-wizard"; 40 | @import "pagetemplates/phone/phone-page-dashboard"; 41 | @import "pagetemplates/phone/phone-page-form"; 42 | @import "pagetemplates/phone/phone-page-listview"; 43 | @import "pagetemplates/phone/phone-page-wizard"; 44 | @import "pagetemplates/tablet/tablet-page-dashboard"; 45 | @import "pagetemplates/tablet/tablet-page-form"; 46 | @import "pagetemplates/tablet/tablet-page-masterdetail"; 47 | @import "pagetemplates/tablet/tablet-page-wizard"; 48 | 49 | // Building Blocks 50 | @import "buildingblocks/actionblock"; 51 | @import "buildingblocks/card"; 52 | @import "buildingblocks/dashboardcard"; 53 | @import "buildingblocks/dashboardstat"; 54 | @import "buildingblocks/form"; 55 | @import "buildingblocks/formblock"; 56 | @import "buildingblocks/masterdetail"; 57 | @import "buildingblocks/multilevel"; 58 | @import "buildingblocks/pageheader"; 59 | @import "buildingblocks/sectionheader"; 60 | @import "buildingblocks/profilecard"; 61 | @import "buildingblocks/profileheader"; 62 | @import "buildingblocks/products"; 63 | @import "buildingblocks/sidebarheader"; 64 | @import "buildingblocks/tabsfullwidth"; 65 | @import "buildingblocks/wizard"; 66 | @import "buildingblocks/templategrid/templategrid-profilecard"; 67 | 68 | // Mobile 69 | @import "mobile/layouts/base"; 70 | 71 | @import "mobile/components/listview"; 72 | @import "mobile/components/loader"; 73 | @import "mobile/components/mx-header"; 74 | @import "mobile/components/tabcontainer"; 75 | 76 | //layouts 77 | @import "layouts/base"; 78 | @import "layouts/navlayout-content"; 79 | @import "layouts/navlayout-sidebar"; 80 | @import "layouts/navlayout-topbar"; 81 | -------------------------------------------------------------------------------- /mobile/components/_listview.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Mendix Documentation 3 | * Special styles for presenting mobile components 4 | */ 5 | 6 | 7 | /* 8 | * Listview 9 | * 10 | * Default Mendix Listview 11 | */ 12 | 13 | .profile-phone, 14 | .profile-tablet { 15 | .mx-listview { 16 | .mx-listview-searchbar { 17 | padding: 10px; 18 | margin-bottom: 0; 19 | position: relative; 20 | 21 | /* Reset Search Button */ 22 | button { 23 | //display: none; 24 | position: absolute; 25 | right: 10px; 26 | background: none; 27 | } 28 | /* Search Field */ 29 | .mx-listview-search-input { 30 | input { 31 | box-shadow: none; 32 | border-style: none; 33 | background-color: $gray-lighter; 34 | text-align: center; 35 | } 36 | } 37 | } 38 | .mx-list { 39 | .mx-listview-item { 40 | &:active { 41 | background-color: $grid-bg-hover; 42 | } 43 | &:first-child { 44 | border-radius: 0; 45 | } 46 | &:last-child { 47 | border-radius: 0; 48 | } 49 | } 50 | } 51 | } 52 | label { 53 | overflow: hidden; 54 | text-overflow: ellipsis; 55 | } 56 | /* Listview Load More button */ 57 | .mx-listview-loadMore { 58 | margin: 20px auto; 59 | width: 95%; 60 | display: block; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /mobile/components/_loader.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Mendix Documentation 3 | * Special styles for presenting mobile components 4 | */ 5 | 6 | 7 | /* 8 | * Loader 9 | * 10 | * Default Mendix Loader 11 | */ 12 | 13 | .profile-phone { 14 | .mx-progress { 15 | width: 100%; 16 | height: 100%; 17 | max-width: 100%; 18 | top: 0; 19 | .modal-content { 20 | border-radius: 0; 21 | box-shadow: none; 22 | height: 100%; 23 | border-style: none; 24 | background: none; 25 | } 26 | .modal-header { 27 | display: none; 28 | } 29 | .mx-dialog-body { 30 | height: 100% !important; 31 | width: 100%; 32 | } 33 | .mx-progress-list { 34 | height: 100%; 35 | width: 100%; 36 | margin: 0; 37 | } 38 | .mx-progress-item { 39 | border-radius: 12px; 40 | position: relative; 41 | padding: 0; 42 | width: 12px; 43 | height: 12px; 44 | top: 50%; 45 | left: 50%; 46 | -webkit-animation: loader10m 1.5s ease-in-out infinite; 47 | animation: loader10m 1.5s ease-in-out infinite; 48 | text-indent: -9999px; 49 | background: none; 50 | 51 | &:before { 52 | border-radius: 12px; 53 | content: ""; 54 | position: absolute; 55 | top: 0px; 56 | left: -25px; 57 | height: 12px; 58 | width: 12px; 59 | -webkit-animation: loader10g 1.5s ease-in-out infinite; 60 | animation: loader10g 1.5s ease-in-out infinite; 61 | } 62 | &:after { 63 | border-radius: 12px; 64 | content: ""; 65 | position: absolute; 66 | top: 0px; 67 | left: 25px; 68 | height: 12px; 69 | width: 12px; 70 | -webkit-animation: loader10d 1.5s ease-in-out infinite; 71 | animation: loader10d 1.5s ease-in-out infinite; 72 | } 73 | } 74 | } 75 | } 76 | 77 | @-webkit-keyframes loader10g { 78 | 0% { background-color: rgba(255, 255, 255, .2); } 79 | 25% { background-color: rgba(255, 255, 255, 1); } 80 | 50% { background-color: rgba(255, 255, 255, .2); } 81 | 75% { background-color: rgba(255, 255, 255, .2); } 82 | 100% { background-color: rgba(255, 255, 255, .2); } 83 | } 84 | @keyframes loader10g { 85 | 0% { background-color: rgba(255, 255, 255, .2); } 86 | 25% { background-color: rgba(255, 255, 255, 1); } 87 | 50% { background-color: rgba(255, 255, 255, .2); } 88 | 75% { background-color: rgba(255, 255, 255, .2); } 89 | 100% { background-color: rgba(255, 255, 255, .2); } 90 | } 91 | 92 | @-webkit-keyframes loader10m { 93 | 0% { background-color: rgba(255, 255, 255, .2); } 94 | 25% { background-color: rgba(255, 255, 255, .2); } 95 | 50% { background-color: rgba(255, 255, 255, 1); } 96 | 75% { background-color: rgba(255, 255, 255, .2); } 97 | 100% { background-color: rgba(255, 255, 255, .2); } 98 | } 99 | @keyframes loader10m { 100 | 0% { background-color: rgba(255, 255, 255, .2); } 101 | 25% { background-color: rgba(255, 255, 255, .2); } 102 | 50% { background-color: rgba(255, 255, 255, 1); } 103 | 75% { background-color: rgba(255, 255, 255, .2); } 104 | 100% { background-color: rgba(255, 255, 255, .2); } 105 | } 106 | 107 | @-webkit-keyframes loader10d { 108 | 0% { background-color: rgba(255, 255, 255, .2); } 109 | 25% { background-color: rgba(255, 255, 255, .2); } 110 | 50% { background-color: rgba(255, 255, 255, .2); } 111 | 75% { background-color: rgba(255, 255, 255, 1); } 112 | 100% { background-color: rgba(255, 255, 255, .2); } 113 | } 114 | @keyframes loader10d { 115 | 0% { background-color: rgba(255, 255, 255, .2); } 116 | 25% { background-color: rgba(255, 255, 255, .2); } 117 | 50% { background-color: rgba(255, 255, 255, .2); } 118 | 75% { background-color: rgba(255, 255, 255, 1); } 119 | 100% { background-color: rgba(255, 255, 255, .2); } 120 | } 121 | -------------------------------------------------------------------------------- /mobile/components/_mx-header.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Mendix Documentation 3 | * Special styles for presenting mobile components 4 | */ 5 | 6 | 7 | /* 8 | * Header 9 | * 10 | * Default Mendix Header for Mobile 11 | */ 12 | 13 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 14 | .mx-header .mx-header-right { right: 63px !important; } 15 | } 16 | 17 | body .mx-header { 18 | padding: 0; 19 | height: $m-header-height; 20 | color: $m-header-color; 21 | border-bottom: 1px solid $default-border-color; 22 | background-color: $m-header-bg; 23 | display: table; 24 | width: 100%; 25 | 26 | .mx-header-center { 27 | display: table-cell; 28 | width: 100%; 29 | text-align: center; 30 | } 31 | .mx-header-left, 32 | .mx-header-right { 33 | display: table; 34 | width: 25%; 35 | top: 0; 36 | position: absolute; 37 | height: $m-header-height; 38 | .mx-placeholder { 39 | display: table-cell; 40 | vertical-align: middle; 41 | line-height: $m-header-height; 42 | } 43 | } 44 | .mx-link { 45 | color: $m-header-link-color; 46 | a { 47 | text-decoration: none; 48 | } 49 | } 50 | .mx-link, 51 | .btn { 52 | padding: 0 8px; 53 | } 54 | .mx-sidebartoggle { 55 | font-size: 24px; 56 | line-height: $m-header-height; 57 | } 58 | 59 | // Header Title 60 | .mx-title { 61 | margin: 0; 62 | color: $m-header-color; 63 | font-size: 16px; 64 | line-height: 44px; 65 | 66 | overflow: hidden; 67 | text-overflow: ellipsis; 68 | } 69 | 70 | .btn-image.glyphicon { 71 | font-size: 21px; 72 | } 73 | } 74 | 75 | body[dir="ltr"] .mx-header-left, 76 | body[dir="rtl"] .mx-header-right { 77 | left: 0; 78 | text-align: left; 79 | } 80 | body[dir="rtl"] .mx-header-left, 81 | body[dir="ltr"] .mx-header-right { 82 | right: 0; 83 | text-align: right; 84 | } 85 | -------------------------------------------------------------------------------- /mobile/components/_tabcontainer.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Tabcontainer 3 | 4 | Default Mendix Tabcontainer for Mobile 5 | ========================================================================== */ 6 | .profile-phone { 7 | .mx-tabcontainer { 8 | .mx-tabcontainer-tabs { 9 | margin: 10px; 10 | } 11 | } 12 | } 13 | 14 | .profile-phone, 15 | .profile-tablet { 16 | .mx-tabcontainer { 17 | .mx-listview .mx-listview-searchbar { 18 | padding-top: 0; 19 | } 20 | } 21 | 22 | .tab-pills.mx-tabcontainer { 23 | .mx-tabcontainer-tabs { 24 | > li { 25 | display: table-cell; 26 | float: none; 27 | margin: 0; 28 | width: 1%; 29 | text-align: center; 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /mobile/layouts/_base.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Layout 3 | 4 | Default Mendix Layout 5 | ========================================================================== */ 6 | .profile-phone { 7 | .region-topbar { 8 | min-height: $m-header-height; 9 | background-color: $m-header-bg; 10 | border: 0; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /pagetemplates/phone/_phone-page-dashboard.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Phone 3 | ========================================================================== */ 4 | .phone-page-dashboard { 5 | background-color: $bg-color-secondary; 6 | } 7 | .phone-page-dashboard-default { 8 | /* Styles here */ 9 | } 10 | -------------------------------------------------------------------------------- /pagetemplates/phone/_phone-page-form.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Phone Form 3 | ========================================================================== */ 4 | .phone-page-form { 5 | /* Styles here */ 6 | } 7 | .phone-page-form-default { 8 | /* Styles here */ 9 | } 10 | .phone-page-form-edit { 11 | /* Styles here */ 12 | } 13 | -------------------------------------------------------------------------------- /pagetemplates/phone/_phone-page-listview.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Phone Listview 3 | ========================================================================== */ 4 | .phone-page-listview { 5 | /* Styles here */ 6 | } 7 | .phone-page-listview-default { 8 | /* Styles here */ 9 | } 10 | -------------------------------------------------------------------------------- /pagetemplates/phone/_phone-page-wizard.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Phone Wizard 3 | ========================================================================== */ 4 | .phone-page-wizard { 5 | /* Styles here */ 6 | } 7 | .phone-page-wizard-default { 8 | /* Styles here */ 9 | } 10 | -------------------------------------------------------------------------------- /pagetemplates/responsive/_page-dashboard.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Dashboard 3 | ========================================================================== */ 4 | .page-dashboard { 5 | background-color: $bg-color-secondary; 6 | .chartjs-node { 7 | margin-top: 30px; 8 | } 9 | } 10 | .page-dashboard-default { 11 | .card { 12 | min-height: 345px; 13 | } 14 | } 15 | .page-dashboard-mytasks { 16 | .card { 17 | min-height: 320px; 18 | } 19 | } 20 | .page-dashboard-actions { 21 | 22 | } 23 | .page-dashboard-actions-tasks { 24 | 25 | } 26 | -------------------------------------------------------------------------------- /pagetemplates/responsive/_page-form.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Form 3 | ========================================================================== */ 4 | .page-form { 5 | /* Styles here */ 6 | } 7 | .page-form-default { 8 | /* Styles here */ 9 | } 10 | .page-form-imagemap { 11 | /* Styles here */ 12 | } 13 | .page-form-tabs { 14 | /* Styles here */ 15 | } 16 | -------------------------------------------------------------------------------- /pagetemplates/responsive/_page-login.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Login 3 | ========================================================================== */ 4 | .page-login { 5 | 6 | } 7 | .page-login-users { 8 | 9 | .profilecard { 10 | &:hover, 11 | &:focus { 12 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 13 | opacity: 0.8; 14 | } 15 | } 16 | .mx-navigationlist { 17 | .mx-navigationlist-item { 18 | padding: 0; 19 | border-style: none; 20 | background-color: transparent 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pagetemplates/responsive/_page-masterdetail.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Master Detail 3 | ========================================================================== */ 4 | .page-masterdetail { 5 | /* Styles here */ 6 | } 7 | .page-masterdetail-basic { 8 | /* Styles here */ 9 | } 10 | .page-masterdetail-big { 11 | /* Styles here */ 12 | } 13 | .page-masterdetail-imagemap { 14 | /* Styles here */ 15 | } 16 | .page-masterdetail-multilevel { 17 | /* Styles here */ 18 | } 19 | -------------------------------------------------------------------------------- /pagetemplates/responsive/_page-tabs.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Tabs 3 | ========================================================================== */ 4 | .page-tabs { 5 | /* Styles here */ 6 | .tabsfullwidth { 7 | background-color: $bg-color-secondary; 8 | } 9 | } 10 | .page-tabs-default { 11 | /* Styles here */ 12 | } 13 | .page-tabs-fullwidth { 14 | /* Styles here */ 15 | .pageheader.pageheader-fullwidth { 16 | border-style: none; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /pagetemplates/responsive/_page-website.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Website 3 | ========================================================================== */ 4 | .page-website { 5 | /* Styles here */ 6 | } 7 | .page-website-actions { 8 | /* Styles here */ 9 | } 10 | .page-website-items { 11 | /* Styles here */ 12 | } 13 | .page-website-items-detail { 14 | /* Styles here */ 15 | } 16 | .page-website-presentation { 17 | /* Styles here */ 18 | } 19 | -------------------------------------------------------------------------------- /pagetemplates/responsive/_page-wizard.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Wizard 3 | ========================================================================== */ 4 | .page-wizard { 5 | /* Styles here */ 6 | } 7 | .page-wizard-default { 8 | /* Styles here */ 9 | } 10 | .page-wizard-titlecentered { 11 | /* Styles here */ 12 | } 13 | -------------------------------------------------------------------------------- /pagetemplates/tablet/_tablet-page-dashboard.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Tablet Dashboard 3 | ========================================================================== */ 4 | .tablet-page-dashboard { 5 | background-color: $bg-color-secondary; 6 | } 7 | .tablet-page-dashboard-default { 8 | /* Styles here */ 9 | } 10 | .tablet-page-dashboard-big { 11 | /* Styles here */ 12 | } 13 | .tablet-page-dashboard-mytasks { 14 | /* Styles here */ 15 | } 16 | -------------------------------------------------------------------------------- /pagetemplates/tablet/_tablet-page-form.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Tablet Form 3 | ========================================================================== */ 4 | .tablet-page-form { 5 | /* Styles here */ 6 | } 7 | .tablet-page-form-default { 8 | /* Styles here */ 9 | } 10 | .tablet-page-form-edit { 11 | /* Styles here */ 12 | } 13 | -------------------------------------------------------------------------------- /pagetemplates/tablet/_tablet-page-masterdetail.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Tablet Master Detail 3 | ========================================================================== */ 4 | .tablet-page-masterdetail { 5 | /* Styles here */ 6 | } 7 | .tablet-page-masterdetail-default { 8 | /* Styles here */ 9 | } 10 | .tablet-page-masterdetail-leftright { 11 | /* Styles here */ 12 | } 13 | -------------------------------------------------------------------------------- /pagetemplates/tablet/_tablet-page-tabs.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Tablet Tabs 3 | ========================================================================== */ 4 | .tablet-page-tabs { 5 | /* Styles here */ 6 | } 7 | .tablet-page-tabs-default { 8 | /* Styles here */ 9 | } 10 | -------------------------------------------------------------------------------- /pagetemplates/tablet/_tablet-page-wizard.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Special styles for presenting Page Template Tablet Wizard 3 | ========================================================================== */ 4 | .tablet-page-wizard { 5 | /* Styles here */ 6 | } 7 | .tablet-page-wizard-default { 8 | /* Styles here */ 9 | } 10 | --------------------------------------------------------------------------------