Permalink
Browse files

doc: index.html comes now with material-style

  • Loading branch information...
MikeMitterer committed Mar 6, 2015
1 parent 0723425 commit 710369dbada71069aee9932b23f216635f183c3f
View
@@ -5,6 +5,7 @@
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.pub" />
<excludeFolder url="file://$MODULE_DIR$/build" />
+ <excludeFolder url="file://$MODULE_DIR$/example/_images/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/accordion/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/accordion/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/animation/packages/wsk_material" />
View
@@ -0,0 +1,184 @@
+@import "packages/wsk_material/sass/palette/palette";
+
+/* ========== Color & Themes ========== */
+
+// Use color primarily for emphasis. Choose colors that fit with
+// your brand and provide good contrast between visual components.
+
+$palette-primary: $palette-indigo !default;
+$palette-accent: $palette-pink !default;
+$palette-secondary: $palette-grey !default;
+$palette-disabled: $palette-grey !default;
+$palette-page: $palette-grey !default;
+
+/* ========== Typography ========== */
+
+// We use the following default color styles: text-color-primary and
+// text-color-secondary. For light themes, use text-color-primary-inverse
+// and text-color-secondary-inverse.
+
+$text-color-primary: nth($palette-grey, 9) !default;
+$text-color-secondary: nth($palette-grey, 6) !default;
+$text-color-primary-inverse: invert($text-color-primary) !default;
+$text-color-secondary-inverse: invert($text-color-secondary) !default;
+
+/* ========== Components ========== */
+
+/* ========== Standard Buttons ========== */
+
+// Default button colors.
+$button-primary-color: rgba(#999999, 0.20) !default;
+$button-secondary-color: #000 !default;
+$button-hover-color: $button-primary-color !default;
+$button-active-color: rgba($button-primary-color, 0.40) !default;
+$button-focus-color: rgba(black, 0.12) !default;
+
+// Colored button colors.
+$button-primary-color-alt: nth($palette-primary, 6) !default;
+$button-secondary-color-alt: #fff !default;
+$button-hover-color-alt: nth($palette-primary, 7) !default;
+$button-active-color-alt: nth($palette-primary, 8) !default;
+$button-focus-color-alt: $button-focus-color !default;
+
+// Ripple color for colored raised buttons and FABs.
+$button-ripple-color-alt: white !default;
+
+// Disabled button colors.
+$button-primary-color-disabled: rgba(#000, 0.12) !default;
+$button-secondary-color-disabled: rgba(#000, 0.26) !default;
+
+// FAB colors and sizes.
+$button-fab-color-alt: nth($palette-accent, 5) !default;
+$button-fab-hover-color-alt: nth($palette-accent, 6) !default;
+$button-fab-active-color-alt: nth($palette-accent, 7) !default;
+
+// Icon button colors and sizes.
+$button-icon-color: nth($palette-grey, 8) !default;
+$button-icon-focus-color: $button-focus-color !default;
+
+/* ========== Icon Toggles ========== */
+
+$icon-toggle-color: nth($palette-grey, 8) !default;
+$icon-toggle-focus-color: $button-focus-color !default;
+$icon-toggle-checked-color: nth($palette-primary, 6) !default;
+$icon-toggle-disabled-color: rgba(#000, 0.26) !default;
+
+/* ========== Radio Buttons ========== */
+
+$radio-color: nth($palette-primary, 6) !default;
+$radio-off-color: rgba(0, 0, 0, 0.54) !default;
+$radio-disabled-color: rgba(0, 0, 0, 0.26) !default;
+
+/* ========== Ripple effect ========== */
+
+$ripple-bg-color: nth($palette-grey, 10) !default;
+
+/* ========== Layout ========== */
+
+// Drawer
+$layout-drawer-bg-color: nth($palette-page, 1) !default;
+$layout-drawer-border-color: nth($palette-page, 4) !default;
+$layout-text-color: nth($palette-page, 9) !default;
+
+// Header
+$layout-header-bg-color: nth($palette-primary, 6) !default;
+$layout-header-text-color: nth($palette-page, 3) !default;
+
+// Tabs
+$layout-header-tab-highlight: nth($palette-secondary, 4) !default;
+
+/* ========== Content Tabs ========== */
+
+$tab-highlight-color: nth($palette-primary, 6) !default;
+$tab-text-color: rgba(0, 0, 0, 0.6) !default;
+$tab-active-text-color: black !default;
+$tab-border-color: nth($palette-grey, 4) !default;
+
+/* ========== Checkboxes ========== */
+
+$checkbox-color: nth($palette-primary, 6) !default;
+$checkbox-off-color: rgba(0, 0, 0, 0.54) !default;
+$checkbox-disabled-color: rgba(0, 0, 0, 0.26) !default;
+
+/* ========== Switches ========== */
+
+$switch-color: nth($palette-primary, 6) !default;
+$switch-thumb-color: $switch-color !default;
+$switch-track-color: rgba($switch-color, 0.5) !default;
+
+$switch-off-thumb-color: nth($palette-grey, 1) !default;
+$switch-off-track-color: rgba(0, 0, 0, 0.26) !default;
+$switch-disabled-thumb-color: nth($palette-grey, 5) !default;
+$switch-disabled-track-color: rgba(0, 0, 0, 0.12) !default;
+
+/* ========== Spinner ========== */
+
+$spinner-color-1: #4285f4 !default;
+$spinner-color-2: #db4437 !default;
+$spinner-color-3: #f4b400 !default;
+$spinner-color-4: #0f9d58 !default;
+
+$spinner-single-color: nth($palette-primary, 6) !default;
+
+/* ========== Text fields ========== */
+
+$input-text-background-color: transparent !default;
+$input-text-label-color: rgba(0, 0, 0, 0.26) !default;
+$input-text-bottom-border-color: rgba(0, 0, 0, 0.12) !default;
+$input-text-highlight-color: nth($palette-primary, 6) !default;
+$input-text-disabled-color: $input-text-bottom-border-color !default;
+$input-text-error-color: nth($palette-red, 7) !default;
+
+/* ========== Card ========== */
+
+$card-background-color: white !default;
+$heading-color: white !default;
+$heading-back-color: white !default;
+$heading-back-bgcolor: nth($palette-primary, 8) !default;
+$action-link-color: nth($palette-primary, 10) !default;
+$caption-color: white !default;
+$caption-bgcolor: nth($palette-primary, 10) !default;
+$image-placeholder-color: nth($palette-accent, 5) !default;
+$lower-text-color: nth($palette-primary, 10) !default;
+
+/* Heading back */
+$heading-back-border: 0 none rgb(255, 255, 255) !default;
+
+/* ========== Sliders ========== */
+
+$range-bg-color: rgba(0, 0, 0, 0.26) !default;
+$range-color: nth($palette-primary, 6) !default;
+
+/* ========== List ========== */
+
+$list-container-item-border-color: #ddd !default;
+$list-container-view-background: rgba(255,255,255,1) !default;
+
+/* ========== Item ========== */
+
+// Default Item Colors
+$default-item-text-color: #000;
+$default-item-outline-color: nth($palette-secondary, 5) !default;
+$default-item-hover-bg-color: nth($palette-secondary, 3) !default;
+$default-item-focus-bg-color: nth($palette-secondary, 3) !default;
+$default-item-active-bg-color: nth($palette-secondary, 4) !default;
+
+// Disabled Button Colors
+$disabled-item-text-color: nth($palette-disabled, 5) !default;
+
+/* ========== Dropdown menu ========== */
+
+$default-dropdown-bg-color: #fff !default;
+
+/* ========== Tooltips ========== */
+
+$tooltip-text-color: #fff !default;
+$tooltip-background-color: nth($palette-accent, 7) !default;
+
+/* ========== Footer ========== */
+
+$footer-bg-color: #454545 !default;
+$footer-color: #A0A0A0 !default;
+$footer-heading-color: #E2E2E2 !default;
+$footer-button-fill-color: $footer-color !default;
+$footer-underline-color: $footer-color;
@@ -1,6 +1,11 @@
Basis für SS:
847 x 656 ( Dart-Playground settings)
+ 900 x 507
+
+wsk-card-img-container:
+ 330 x 186 (1,774)
+
ImageMagick
convert bottombar.png -resize 300x bottombar-300.png
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.

0 comments on commit 710369d

Please sign in to comment.