gradle module and build
This commit is contained in:
		
							
								
								
									
										170
									
								
								webapp/app/styles/app-theme.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										170
									
								
								webapp/app/styles/app-theme.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,170 @@
 | 
			
		||||
<!-- Palette generated by Material Palette - materialpalette.com/amber/blue-grey -->
 | 
			
		||||
<!-- Replace the one that comes in their starter kit -->
 | 
			
		||||
<!--
 | 
			
		||||
@license
 | 
			
		||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 | 
			
		||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 | 
			
		||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 | 
			
		||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 | 
			
		||||
Code distributed by Google as part of the polymer project is also
 | 
			
		||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<style is="custom-style">
 | 
			
		||||
 | 
			
		||||
  /*
 | 
			
		||||
   Polymer includes a shim for CSS Custom Properties that we can use for application theming.
 | 
			
		||||
   Below, you'll find the default palette for the Polymer Starter Kit layout. Feel free to play
 | 
			
		||||
   with changing the colors used or generate your own palette of colours at MaterialPalette.com.
 | 
			
		||||
 | 
			
		||||
   See https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details
 | 
			
		||||
   for further information on custom CSS properties.
 | 
			
		||||
   */
 | 
			
		||||
 | 
			
		||||
  /* Application theme */
 | 
			
		||||
 | 
			
		||||
  :root {
 | 
			
		||||
    --dark-primary-color:       #FFA000;
 | 
			
		||||
    --default-primary-color:    #FFC107;
 | 
			
		||||
    --light-primary-color:      #FFECB3;
 | 
			
		||||
    --text-primary-color:       #FFFFFF;
 | 
			
		||||
    --accent-color:             #607D8B;
 | 
			
		||||
    --primary-background-color: #FFECB3;
 | 
			
		||||
    --primary-text-color:       #212121;
 | 
			
		||||
    --secondary-text-color:     #727272;
 | 
			
		||||
    --disabled-text-color:      #BDBDBD;
 | 
			
		||||
    --divider-color:            #B6B6B6;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    /* Components */
 | 
			
		||||
 | 
			
		||||
    /* paper-drawer-panel */
 | 
			
		||||
    --drawer-menu-color:           #ffffff;
 | 
			
		||||
    --drawer-border-color:         1px solid #ccc;
 | 
			
		||||
    --drawer-toolbar-border-color: 1px solid rgba(0, 0, 0, 0.22);
 | 
			
		||||
 | 
			
		||||
    /* paper-menu */
 | 
			
		||||
    --paper-menu-background-color: #fff;
 | 
			
		||||
    --menu-link-color:             #111111;
 | 
			
		||||
 | 
			
		||||
    /* paper-input */
 | 
			
		||||
   --paper-input-container-color:       rgba(255, 255, 255, 0.64);
 | 
			
		||||
   --paper-input-container-focus-color: rgba(255, 255, 255, 1);
 | 
			
		||||
   --paper-input-container-input-color: #fff;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /* General styles */
 | 
			
		||||
 | 
			
		||||
  #drawerToolbar {
 | 
			
		||||
    color: var(--secondary-text-color);
 | 
			
		||||
    background-color: var(--drawer-menu-color);
 | 
			
		||||
    border-bottom: var(--drawer-toolbar-border-color);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  paper-scroll-header-panel {
 | 
			
		||||
    height: 100%;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  paper-menu iron-icon {
 | 
			
		||||
    margin-right: 33px;
 | 
			
		||||
    opacity: 0.54;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .paper-menu > .iron-selected {
 | 
			
		||||
    color: var(--default-primary-color);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  paper-menu a {
 | 
			
		||||
    text-decoration: none;
 | 
			
		||||
    color: var(--menu-link-color);
 | 
			
		||||
    display: -ms-flexbox;
 | 
			
		||||
    display: -webkit-flex;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    -ms-flex-direction: row;
 | 
			
		||||
    -webkit-flex-direction: row;
 | 
			
		||||
    flex-direction: row;
 | 
			
		||||
    -ms-flex-align: center;
 | 
			
		||||
    -webkit-align-items: center;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    font-family: 'Roboto', 'Noto', sans-serif;
 | 
			
		||||
    -webkit-font-smoothing: antialiased;
 | 
			
		||||
    text-rendering: optimizeLegibility;
 | 
			
		||||
    font-size: 14px;
 | 
			
		||||
    font-weight: 400;
 | 
			
		||||
    line-height: 24px;
 | 
			
		||||
    min-height: 48px;
 | 
			
		||||
    padding: 0 16px;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  paper-toolbar.tall .app-name {
 | 
			
		||||
    font-size: 40px;
 | 
			
		||||
    font-weight: 300;
 | 
			
		||||
    /* Required for main area's paper-scroll-header-panel custom condensing transformation */
 | 
			
		||||
    -webkit-transform-origin: left center;
 | 
			
		||||
    transform-origin: left center;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  #mainToolbar .middle-container  {
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    margin-left: 48px;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  #mainToolbar:not(.tall) .middle {
 | 
			
		||||
    font-size: 18px;
 | 
			
		||||
    padding-bottom: 0;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  #mainToolbar .bottom {
 | 
			
		||||
    margin-left: 48px;
 | 
			
		||||
    /* Required for main area's paper-scroll-header-panel custom condensing transformation */
 | 
			
		||||
    -webkit-transform-origin: left center;
 | 
			
		||||
    transform-origin: left center;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /* Height of the scroll area */
 | 
			
		||||
  .content {
 | 
			
		||||
    height: 900px;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  /* Material Design Adaptive Breakpoints */
 | 
			
		||||
  /*
 | 
			
		||||
  Below you'll find CSS media queries based on the breakpoint guidance
 | 
			
		||||
  published by the Material Design team. You can choose to use, customise
 | 
			
		||||
  or remove these breakpoints based on your needs.
 | 
			
		||||
 | 
			
		||||
  http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
 | 
			
		||||
  */
 | 
			
		||||
 | 
			
		||||
  /* mobile-small */
 | 
			
		||||
  @media all and (min-width: 0) and (max-width: 360px) and (orientation: portrait) { }
 | 
			
		||||
  /* mobile-large */
 | 
			
		||||
  @media all and (min-width: 361px) and (orientation: portrait) { }
 | 
			
		||||
  /* mobile-small-landscape */
 | 
			
		||||
  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
 | 
			
		||||
  /* mobile-large-landscape */
 | 
			
		||||
  @media all and (min-width: 481px) and (orientation: landscape) { }
 | 
			
		||||
  /* tablet-small-landscape */
 | 
			
		||||
  @media all and (min-width: 600px) and (max-width: 960px) and (orientation: landscape) { }
 | 
			
		||||
  /* tablet-large-landscape */
 | 
			
		||||
  @media all and (min-width: 961px) and (orientation: landscape) { }
 | 
			
		||||
  /* tablet-small */
 | 
			
		||||
  @media all and (min-width: 600px) and (orientation: portrait) { }
 | 
			
		||||
  /* tablet-large */
 | 
			
		||||
  @media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { }
 | 
			
		||||
  /* desktop-x-small-landscape */
 | 
			
		||||
  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
 | 
			
		||||
  /* desktop-x-small */
 | 
			
		||||
  @media all and (min-width: 0) and (max-width: 480px) and (max-aspect-ratio: 4/3) { }
 | 
			
		||||
  /* desktop-small-landscape */
 | 
			
		||||
  @media all and (min-width: 481px) and (max-width: 840px) and (orientation: landscape) { }
 | 
			
		||||
  /* desktop-small */
 | 
			
		||||
  @media all and (min-width: 481px) and (max-width: 840px) and (max-aspect-ratio: 4/3) { }
 | 
			
		||||
  /* desktop-medium-landscape */
 | 
			
		||||
  @media all and (min-width: 841px) and (max-width: 1280px) and (orientation: landscape) { }
 | 
			
		||||
  /* desktop-medium */
 | 
			
		||||
  @media all and (min-width: 841px) and (max-width: 1280px) and (max-aspect-ratio: 4/3) { }
 | 
			
		||||
  /* desktop-large */
 | 
			
		||||
  @media all and (min-width: 1281px) and (max-width: 1600px) { }
 | 
			
		||||
  /* desktop-xlarge */
 | 
			
		||||
  @media all and (min-width: 1601px) and (max-width: 1920px) { }
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										14
									
								
								webapp/app/styles/main.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										14
									
								
								webapp/app/styles/main.css
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,14 @@
 | 
			
		||||
/*
 | 
			
		||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 | 
			
		||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 | 
			
		||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 | 
			
		||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 | 
			
		||||
Code distributed by Google as part of the polymer project is also
 | 
			
		||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
body {
 | 
			
		||||
  background: #fafafa;
 | 
			
		||||
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 | 
			
		||||
  color: #333;
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										76
									
								
								webapp/app/styles/shared-styles.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										76
									
								
								webapp/app/styles/shared-styles.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,76 @@
 | 
			
		||||
<!-- shared styles for all elements and index.html -->
 | 
			
		||||
<dom-module id="shared-styles">
 | 
			
		||||
  <template>
 | 
			
		||||
    <style>
 | 
			
		||||
      .page-title {
 | 
			
		||||
        @apply(--paper-font-display2);
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      @media (max-width: 600px) {
 | 
			
		||||
        .page-title {
 | 
			
		||||
          font-size: 24px!important;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      paper-material {
 | 
			
		||||
        border-radius: 2px;
 | 
			
		||||
        height: 100%;
 | 
			
		||||
        padding: 16px 0 16px 0;
 | 
			
		||||
        width: calc(98.66% - 16px);
 | 
			
		||||
        margin: 16px auto;
 | 
			
		||||
        background: white;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      /* Breakpoints */
 | 
			
		||||
 | 
			
		||||
      /* Small */
 | 
			
		||||
      @media (max-width: 600px) {
 | 
			
		||||
 | 
			
		||||
      paper-material {
 | 
			
		||||
      --menu-container-display: none;
 | 
			
		||||
      width: calc(97.33% - 32px);
 | 
			
		||||
      padding-left: 16px;
 | 
			
		||||
      padding-right: 16px;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      paper-toolbar.tall .app-name {
 | 
			
		||||
      font-size: 24px;
 | 
			
		||||
      font-weight: 400;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      #drawer .paper-toolbar {
 | 
			
		||||
      margin-left: 16px;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      #overlay {
 | 
			
		||||
      min-width: 360px;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .bg {
 | 
			
		||||
      background: white;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      /* Tablet+ */
 | 
			
		||||
      @media (min-width: 601px) {
 | 
			
		||||
 | 
			
		||||
      paper-material {
 | 
			
		||||
      width: calc(98% - 46px);
 | 
			
		||||
      margin-bottom: 32px;
 | 
			
		||||
      padding-left: 30px;
 | 
			
		||||
      padding-right: 30px;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      #drawer.paper-drawer-panel > [drawer] {
 | 
			
		||||
      border-right: 1px solid rgba(0, 0, 0, 0.14);
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      iron-pages {
 | 
			
		||||
      padding: 48px 62px;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      }
 | 
			
		||||
    </style>
 | 
			
		||||
  </template>
 | 
			
		||||
</dom-module>
 | 
			
		||||
		Reference in New Issue
	
	Block a user