Skip to content

Commit

Permalink
Merge pull request #22 from mendix/previews
Browse files Browse the repository at this point in the history 
Updated previews
  • Loading branch information
@Remcovh
Remcovh authored Nov 12, 2018
2 parents 14bf711 + c0a5a23 commit 5f25130
Show file tree
Hide file tree
Showing 7 changed files with 74 additions and 87 deletions.
5 changes: 1 addition & 4 deletions index-phone-preview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,7 @@
<body>
<div class="content">
<div class="devicephone">
<div class="deviceshadowwrapper">
<iframe id="frame" class="deviceframe"></iframe>
<div class="deviceshadow"></div>
</div>
<iframe id="frame" class="deviceframe"></iframe>
<div class="devicedisclaimer">
This is not a simulator but just a resized view surrounded with an image to give an impression of what the app might look like on a phone.
</div>
Expand Down
Binary file modified resources/phone.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/tablet.png
100644 → 100755
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/work-do-more.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion styles/css/lib/lib.css
View file

Large diffs are not rendered by default.

111 changes: 56 additions & 55 deletions styles/sass/lib/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
//
// ██████╗ █████╗ ███████╗██╗ ██████╗
// ██╔══██╗██╔══██╗██╔════╝██║██╔════╝
// ██████╔╝███████║███████╗██║██║
// ██╔══██╗██╔══██║╚════██║██║██║
// ██████╔╝███████║███████╗██║██║
// ██╔══██╗██╔══██║╚════██║██║██║
// ██████╔╝██║ ██║███████║██║╚██████╗
// ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═════╝
//
Expand All @@ -19,9 +19,9 @@ $gray-lighter: #eee !default;


//== Step 1: Brand Colors
$brand-default: #DDDDDD !default;
$brand-primary: #0595DB !default;
$brand-inverse: #252C36 !default;
$brand-default: #DDDDDD !default;
$brand-primary: #0595DB !default;
$brand-inverse: #252C36 !default;
$brand-info: #48B0F7 !default;
$brand-success: #76CA02 !default;
$brand-warning: #f99b1d !default;
Expand All @@ -35,6 +35,7 @@ $brand-logo-width: 26px !default; // Only used for CSS brand logo




//== Step 2: UI Customization

// Default Font Size & Color
Expand Down Expand Up @@ -76,12 +77,12 @@ $link-hover-color: darken($link-color, 15%) !default;


//
// █████╗ ██████╗ ██╗ ██╗ █████╗ ███╗ ██╗ ██████╗███████╗██████╗
// █████╗ ██████╗ ██╗ ██╗ █████╗ ███╗ ██╗ ██████╗███████╗██████╗
// ██╔══██╗██╔══██╗██║ ██║██╔══██╗████╗ ██║██╔════╝██╔════╝██╔══██╗
// ███████║██║ ██║██║ ██║███████║██╔██╗ ██║██║ █████╗ ██║ ██║
// ██╔══██║██║ ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║ ██╔══╝ ██║ ██║
// ██║ ██║██████╔╝ ╚████╔╝ ██║ ██║██║ ╚████║╚██████╗███████╗██████╔╝
// ╚═╝ ╚═╝╚═════╝ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝╚══════╝╚═════╝
// ╚═╝ ╚═╝╚═════╝ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝╚══════╝╚═════╝
//


Expand All @@ -103,9 +104,9 @@ $font-size-small: 12px !default;

// Font Weights
$font-weight-light: 100 !default;
$font-weight-normal: normal !default;
$font-weight-normal: normal !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: bold !default;
$font-weight-bold: bold !default;

// Font Size Headers
$font-size-h1: 31px !default;
Expand Down Expand Up @@ -208,13 +209,13 @@ $navtopbar-border-color: $topbar-border-color !default;
//== Form
//## Used in components/inputs

// Values that can be used default | lined
// Values that can be used default | lined
$form-input-style: default !default;

// Form Label
$form-label-color: #666 !default;
$form-label-size: $font-size-default !default;
$form-label-weight: $font-weight-semibold !default;
// Form Label
$form-label-color: #666 !default;
$form-label-size: $font-size-default !default;
$form-label-weight: $font-weight-semibold !default;

// Form Input dimensions
$form-input-height: auto !default;
Expand Down Expand Up @@ -248,10 +249,10 @@ $form-group-gutter: 15px !default;
//== Buttons
//## Define background-color, border-color and text. Used in components/buttons

// Default button style
// Default button style
$btn-font-size: 14px !default;
$btn-bordered: false !default; // Default value false, set to true if you want this effect
$btn-border-radius: $border-radius-default !default;
$btn-border-radius: $border-radius-default !default;

// Button Background Color
$btn-default-bg: #FFF !default;
Expand Down Expand Up @@ -295,7 +296,7 @@ $btn-link-bg-hover: $gray-lighter !default;

//== Header blocks
//## Define look and feel over multible building blocks that serve as header
$header-bg-color: $bg-color-secondary !default;
$header-bg-color: $bg-color-secondary !default;
$header-text-color: #FFF !default;
$header-text-color-detail: rgba(0,0,0, 0.2) !default;

Expand All @@ -306,10 +307,10 @@ $header-text-color-detail: rgba(0,0,0, 0.2) !default;
//
// ███████╗██╗ ██╗██████╗ ███████╗██████╗ ████████╗
// ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝
// █████╗ ╚███╔╝ ██████╔╝█████╗ ██████╔╝ ██║
// ██╔══╝ ██╔██╗ ██╔═══╝ ██╔══╝ ██╔══██╗ ██║
// ███████╗██╔╝ ██╗██║ ███████╗██║ ██║ ██║
// ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝
// █████╗ ╚███╔╝ ██████╔╝█████╗ ██████╔╝ ██║
// ██╔══╝ ██╔██╗ ██╔═══╝ ██╔══╝ ██╔══██╗ ██║
// ███████╗██╔╝ ██╗██║ ███████╗██║ ██║ ██║
// ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝
//

//== Color variations
Expand All @@ -321,32 +322,32 @@ $color-default-dark: mix($brand-default, black, 70%) !default
$color-default-light: mix($brand-default, white, 60%) !default;
$color-default-lighter: mix($brand-default, white, 20%) !default;

$color-inverse-darker: mix($brand-inverse, black, 60%) !default;
$color-inverse-darker: mix($brand-inverse, black, 60%) !default;
$color-inverse-dark: mix($brand-inverse, black, 70%) !default;
$color-inverse-light: mix($brand-inverse, white, 60%) !default;
$color-inverse-lighter: mix($brand-inverse, white, 20%) !default;

$color-primary-darker: mix($brand-primary, black, 60%) !default;
$color-primary-darker: mix($brand-primary, black, 60%) !default;
$color-primary-dark: mix($brand-primary, black, 70%) !default;
$color-primary-light: mix($brand-primary, white, 60%) !default;
$color-primary-lighter: mix($brand-primary, white, 20%) !default;

$color-info-darker: mix($brand-info, black, 60%) !default;
$color-info-darker: mix($brand-info, black, 60%) !default;
$color-info-dark: mix($brand-info, black, 70%) !default;
$color-info-light: mix($brand-info, white, 60%) !default;
$color-info-lighter: mix($brand-info, white, 20%) !default;

$color-success-darker: mix($brand-success, black, 60%) !default;
$color-success-dark: mix($brand-success, black, 70%) !default;
$color-success-light: mix($brand-success, white, 60%) !default;
$color-success-lighter: mix($brand-success, white, 20%) !default;
$color-success-lighter: mix($brand-success, white, 20%) !default;

$color-warning-darker: mix($brand-warning, black, 60%) !default;
$color-warning-darker: mix($brand-warning, black, 60%) !default;
$color-warning-dark: mix($brand-warning, black, 70%) !default;
$color-warning-light: mix($brand-warning, white, 60%) !default;
$color-warning-lighter: mix($brand-warning, white, 20%) !default;

$color-danger-darker: mix($brand-danger, black, 60%) !default;
$color-danger-darker: mix($brand-danger, black, 60%) !default;
$color-danger-dark: mix($brand-danger, black, 70%) !default;
$color-danger-light: mix($brand-danger, white, 60%) !default;
$color-danger-lighter: mix($brand-danger, white, 20%) !default;
Expand All @@ -362,22 +363,22 @@ $grid-border-color: $border-color-default !default;

// Spacing
// Default
$grid-padding-top: 15px !default;
$grid-padding-right: 15px !default;
$grid-padding-bottom: 15px !default;
$grid-padding-left: 15px !default;
$grid-padding-top: 15px !default;
$grid-padding-right: 15px !default;
$grid-padding-bottom: 15px !default;
$grid-padding-left: 15px !default;

// Listview
$listview-padding-top: 15px !default;
$listview-padding-right: 15px !default;
$listview-padding-bottom: 15px !default;
$listview-padding-left: 15px !default;
$listview-padding-top: 15px !default;
$listview-padding-right: 15px !default;
$listview-padding-bottom: 15px !default;
$listview-padding-left: 15px !default;

// Background Colors
$grid-bg: #FFF !default;
$grid-bg-header: transparent !default; // Grid Headers
$grid-bg-hover: mix($grid-border-color, #FFF, 20%) !default;
$grid-bg-selected: mix($grid-border-color, #FFF, 30%) !default;
$grid-bg-selected: mix($grid-border-color, #FFF, 30%) !default;
$grid-bg-selected-hover: mix($grid-border-color, #FFF, 50%) !default;

// Striped Background Color
Expand Down Expand Up @@ -409,8 +410,8 @@ $tabs-color-active: $font-color-default !default;
$tabs-lined-color-active: $brand-primary !default;

// Border Color
$tabs-border-color: $border-color-default !default;
$tabs-lined-border-color: $brand-primary !default;
$tabs-border-color: $border-color-default !default;
$tabs-lined-border-color: $brand-primary !default;

// Background Color
$tabs-bg: #FFF !default;
Expand Down Expand Up @@ -478,11 +479,11 @@ $alert-danger-border-color: $color-danger-dark !default;

// Background Color
$label-default-bg: $brand-default !default;
$label-primary-bg: $brand-primary !default;
$label-info-bg: $brand-info !default;
$label-success-bg: $brand-success !default;
$label-primary-bg: $brand-primary !default;
$label-info-bg: $brand-info !default;
$label-success-bg: $brand-success !default;
$label-warning-bg: $brand-warning !default;
$label-danger-bg: $brand-danger !default;
$label-danger-bg: $brand-danger !default;

// Border Color
$label-default-border-color: $brand-default !default;
Expand All @@ -508,12 +509,12 @@ $label-danger-color: #FFF !default;

// Background Color
$groupbox-default-bg: $brand-default !default;
$groupbox-inverse-bg: $brand-inverse !default;
$groupbox-primary-bg: $brand-primary !default;
$groupbox-inverse-bg: $brand-inverse !default;
$groupbox-primary-bg: $brand-primary !default;
$groupbox-info-bg: $brand-info !default;
$groupbox-success-bg: $brand-success !default;
$groupbox-success-bg: $brand-success !default;
$groupbox-warning-bg: $brand-warning !default;
$groupbox-danger-bg: $brand-danger !default;
$groupbox-danger-bg: $brand-danger !default;
$groupbox-white-bg: #FFF !default;

// Text Color
Expand All @@ -540,10 +541,10 @@ $callout-warning-color: $brand-warning !default;
$callout-danger-color: $brand-danger !default;

// Background Color
$callout-default-bg: $color-default-lighter!default;
$callout-info-bg: $color-info-lighter !default;
$callout-success-bg: $color-success-lighter !default;
$callout-warning-bg: $color-warning-lighter !default;
$callout-default-bg: $color-default-lighter!default;
$callout-info-bg: $color-info-lighter !default;
$callout-success-bg: $color-success-lighter !default;
$callout-warning-bg: $color-warning-lighter !default;
$callout-danger-bg: $color-danger-lighter !default;


Expand Down Expand Up @@ -582,7 +583,7 @@ $m-layout-spacing-right: 15px !default;
$m-layout-spacing-bottom: 15px !default;
$m-layout-spacing-left: 15px !default;

// Combined layout spacing
// Combined layout spacing
$layout-spacing: $layout-spacing-top $layout-spacing-right $layout-spacing-bottom $layout-spacing-left !default;
$m-layout-spacing: $m-layout-spacing-top $m-layout-spacing-right $m-layout-spacing-bottom $m-layout-spacing-left !default;
$t-layout-spacing: $t-layout-spacing-top $t-layout-spacing-right $t-layout-spacing-bottom $t-layout-spacing-left !default;
Expand All @@ -597,9 +598,9 @@ $gutter-size: 15px !default;
//== Tables
//## Table spacing options (used in components/tables)

$padding-table-cell-top: 8px !default;
$padding-table-cell-bottom: 8px !default;
$padding-table-cell-left: 8px !default;
$padding-table-cell-top: 8px !default;
$padding-table-cell-bottom: 8px !default;
$padding-table-cell-left: 8px !default;
$padding-table-cell-right: 8px !default;


Expand All @@ -623,4 +624,4 @@ $screen-lg: 1200px !default;
// So media queries don't overlap when required, provide a maximum (used for max-width)
$screen-xs-max: ($screen-sm - 1) !default;
$screen-sm-max: ($screen-md - 1) !default;
$screen-md-max: ($screen-lg - 1) !default;
$screen-md-max: ($screen-lg - 1) !default;
43 changes: 16 additions & 27 deletions styles/sass/lib/layouts/_layout-atlas-device-wrapper.scss
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,40 @@
.devicephone {
width: 375px;
height: 765px;
width: 340px;
height: 600px;
margin: auto;
padding: 120px 40px;
background: url(../../../resources/phone.png) no-repeat center center;

.deviceframe,
.deviceshadowwrapper {
border-radius: 28px;
}
}

.devicetablet {
width: 1005px;
height: 780px;
width: 1015px;
height: 765px;
margin: auto;
padding: 120px 100px;
padding: 80px 40px;
background: url(../../../resources/tablet.png) no-repeat center center;

.deviceframe {
border-radius: 20px;
}
}

.deviceframe {
width: 100%;
height: 100%;
border: none;
}
.deviceshadowwrapper {
position: relative;
width: 100%;
height: 100%;
}
.deviceshadow {
position: absolute;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
pointer-events: none;
box-shadow: inset 10px 0 10px -10px black, inset -10px 0 10px -10px black;
}

.devicedisclaimer {
margin-top: 80px;
padding: 10px;
text-align: center;
color: $gray-light;
border-top: 1px solid $border-color-default;
font-size: 12px;
line-height: 20px;
}
.devicephone .devicedisclaimer {
margin-top: 120px;
}
.devicetablet .devicedisclaimer {
margin-top: 80px;
}

0 comments on commit 5f25130

Please sign in to comment.