Jouni Koivuviita jouni

## custom-design-system.adoc

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                jouni
                / custom-design-system.adoc
            
            
              Last active
              August 6, 2020 14:00
            
              
                Prototype documentation how custom design systems might work in Vaadin
              
          
How to create a reusable design system


Create a new project with the following folder structure:


src/main
  java/org/your/name/components
    MyButton.java


## grid-demo.css
v-button:not([theme]){display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;font:300 18px/1.55 Source Sans Pro,sans-serif;position:relative;white-space:nowrap;outline:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;cursor:pointer;height:41px;padding:0 17px;color:#1a1a1a;font-weight:400;border-radius:0;border:0;background:#fff;box-shadow:none;text-shadow:0 1px 0 rgba(255,255,255,0.05);box-shadow:none}v-button:not([theme]):after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;transition:box-shadow 180ms,border 180ms}v-button:not([theme]):focus:after{transition:none}v-button:not([theme])[disabled]{opacity:0.5;pointer-events:none;cursor:default}v-button:not([theme])[disabled]:after{display:none}v-button:not([theme]):after{border:inherit;top:0;right:0;bottom:0;left:0}v-button