diff --git a/docs/.idea/workspace.xml b/docs/.idea/workspace.xml index ce056feae..879e0316a 100644 --- a/docs/.idea/workspace.xml +++ b/docs/.idea/workspace.xml @@ -23,16 +23,34 @@ - + - + - + + + + + + + + + + + + + + + + + + + @@ -41,18 +59,31 @@ - + + + + + - + + + + + + + + + + - + @@ -61,7 +92,7 @@ - + @@ -87,11 +118,15 @@ @@ -101,6 +136,28 @@ - + - - - - - - - - + - + + + + + - + - + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + diff --git a/docs/assets/css/font-awesome-ie7.css b/docs/assets/css/font-awesome-ie7.css index 7663f70ef..b0aec6c15 100644 --- a/docs/assets/css/font-awesome-ie7.css +++ b/docs/assets/css/font-awesome-ie7.css @@ -1,10 +1,6 @@ [class^="icon-"], [class*=" icon-"] { - font-family: FontAwesome; - font-style: normal; - font-weight: normal; padding-right: .3em; - text-decoration: inherit; } .icon-large { font-size: 1.3333333333333333em; @@ -18,10 +14,22 @@ .nav [class^="icon-"], .btn [class*=" icon-"], .nav [class*=" icon-"] { + vertical-align: inherit; margin-top: -4px; padding-top: 3px; margin-bottom: -4px; padding-bottom: 3px; + line-height: .9em; +} +.btn [class^="icon-"].icon-large, +.nav [class^="icon-"].icon-large, +.btn [class*=" icon-"].icon-large, +.nav [class*=" icon-"].icon-large { + line-height: .8em; +} +a [class^="icon-"], +a [class*=" icon-"] { + cursor: pointer; } .icon-glass { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); diff --git a/docs/assets/css/site.css b/docs/assets/css/site.css index c083c96ce..0c2d3d9b8 100644 --- a/docs/assets/css/site.css +++ b/docs/assets/css/site.css @@ -4726,16 +4726,17 @@ a.badge:hover { ------------------------------------------------------- */ [class^="icon-"]:before, [class*=" icon-"]:before { + text-decoration: inherit; + display: inline-block; + speak: none; +} +/* includes sprites.less reset */ +[class^="icon-"], +[class*=" icon-"] { font-family: FontAwesome; font-weight: normal; font-style: normal; - display: inline-block; text-decoration: inherit; - speak: none; -} -/* sprites.less reset */ -[class^="icon-"], -[class*=" icon-"] { display: inline; width: auto; height: auto; @@ -4749,7 +4750,6 @@ a.badge:hover { a [class^="icon-"], a [class*=" icon-"] { display: inline-block; - text-decoration: inherit; } /* makes the font 33% larger relative to the icon container */ .icon-large:before { @@ -4760,6 +4760,7 @@ a [class*=" icon-"] { .nav [class^="icon-"], .btn [class*=" icon-"], .nav [class*=" icon-"] { + display: inline; /* keeps button heights with and without icons the same */ line-height: .9em; @@ -5873,9 +5874,55 @@ section { content: "\f005"; color: #e3cf7a; } +#kyruus { + color: #555555; + font-size: 18px; +} +#kyruus, +#kyruus li { + line-height: 25px; +} +#kyruus p { + margin-bottom: 22px; +} +#kyruus p strong { + color: #222222; +} +#kyruus ul { + margin-top: 5px; + margin-bottom: 22px; +} +#kyruus ul li { + margin-top: 10px; +} +#kyruus ul i { + margin-top: 5px; + color: #007dbc; +} +#kyruus .border { + border: solid 10px #eeeeee; + padding: 1em 1.5em; + margin-left: .2em; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} +#kyruus .border .icon-medkit { + font-size: 224px; +} +#kyruus .border a:hover .icon-medkit { + text-decoration: none; +} +#kyruus a { + font-weight: bold; + color: #007dbc; +} +#kyruus a:hover { + color: #005f9b; +} .modal { width: 560px; - max-height: 600px; + max-height: 610px; } .modal .modal-body { *overflow: hidden; @@ -5889,7 +5936,7 @@ section { text-align: center; } .modal .modal-body div.thumbnail div { - margin-bottom: 5px; + margin: 8px; } .modal .modal-body .icon6 { width: 330px; diff --git a/docs/assets/less/font-awesome-ie7.less b/docs/assets/less/font-awesome-ie7.less index ba7f6a703..63cd6fd01 100644 --- a/docs/assets/less/font-awesome-ie7.less +++ b/docs/assets/less/font-awesome-ie7.less @@ -1,10 +1,6 @@ [class^="icon-"], [class*=" icon-"] { - font-family:FontAwesome; - font-style:normal; - font-weight:normal; padding-right:.3em; - text-decoration: inherit; } .icon-large { @@ -19,15 +15,22 @@ .btn, .nav { [class^="icon-"], [class*=" icon-"] { + vertical-align: inherit; margin-top: -4px; padding-top: 3px; margin-bottom: -4px; padding-bottom: 3px; + line-height: .9em; + &.icon-large { + line-height: .8em; + } } } - - +a [class^="icon-"], +a [class*=" icon-"] { + cursor: pointer; +} .ie7icon(@inner) { *zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '@{inner}')"; diff --git a/docs/assets/less/font-awesome.less b/docs/assets/less/font-awesome.less index c287789a1..c5f3609a5 100644 --- a/docs/assets/less/font-awesome.less +++ b/docs/assets/less/font-awesome.less @@ -44,17 +44,18 @@ ------------------------------------------------------- */ [class^="icon-"]:before, [class*=" icon-"]:before { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - display: inline-block; text-decoration: inherit; + display: inline-block; speak: none; } -/* sprites.less reset */ +/* includes sprites.less reset */ [class^="icon-"], [class*=" icon-"] { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + text-decoration: inherit; display: inline; width: auto; height: auto; @@ -66,10 +67,11 @@ } /* makes sure icons active on rollover in links */ -a [class^="icon-"], -a [class*=" icon-"] { - display: inline-block; - text-decoration: inherit; +a { + [class^="icon-"], + [class*=" icon-"] { + display: inline-block; + } } /* makes the font 33% larger relative to the icon container */ @@ -81,7 +83,8 @@ a [class*=" icon-"] { .btn, .nav { [class^="icon-"], [class*=" icon-"] { - /* keeps button heights with and without icons the same */ + display: inline; + /* keeps button heights with and without icons the same */ line-height: .9em; &.icon-large { line-height: .8em; diff --git a/docs/assets/less/mixins.less b/docs/assets/less/mixins.less index 3a8f047b5..9266d52f7 100644 --- a/docs/assets/less/mixins.less +++ b/docs/assets/less/mixins.less @@ -35,7 +35,7 @@ } } -.icon-size (@size: 12px, @width-multiplier: .9, @height-multiplier: 1) { +.icon-size (@size: 14px, @width-multiplier: .9, @height-multiplier: 1) { i { font-size: @size; } line-height: @size * 1.1; height: @size * @height-multiplier * 1.05; diff --git a/docs/assets/less/site.less b/docs/assets/less/site.less index e35847093..84dc8b6cd 100644 --- a/docs/assets/less/site.less +++ b/docs/assets/less/site.less @@ -184,7 +184,6 @@ section { } } - .the-icons { list-style-type: none; margin: 0; @@ -275,10 +274,46 @@ section { } } +#kyruus { + color: @gray; + font-size: 18px; + &, li { line-height: 25px; } + p { + margin-bottom: 22px; + strong { color: @grayDarker; } + } + ul { + margin-top: 5px; + margin-bottom: 22px; + li { margin-top: 10px; } + i { + margin-top: 5px; +// margin-right: .4em; +// color: mix(@grayLight, @grayLighter, 50%); + color: mix(@blue, @blueDark, 50%); + } + } + .border { + .icon-medkit { font-size: 224px; } + border: solid 10px @grayLighter; + padding: 1em 1.5em; + margin-left: .2em; + .border-radius(10px); + a:hover .icon-medkit { text-decoration: none; } +// a:hover i { text-decoration: underline; } + } + a { + font-weight: bold; + color: mix(@blue, @blueDark, 50%); + &:hover { + color: @blueDark; + } + } +} .modal { width: 560px; - max-height: 600px; + max-height: 610px; .modal-body { *overflow: hidden; // ie7 fix max-height: none; @@ -286,7 +321,7 @@ section { .row { margin-bottom: 15px; } div.thumbnail { text-align: center; - div { margin-bottom: 5px; } + div { margin: 8px; } } .icon6 { width: 330px; diff --git a/docs/assets/less/variables.less b/docs/assets/less/variables.less index bb8d9bc4e..ea32d8a68 100755 --- a/docs/assets/less/variables.less +++ b/docs/assets/less/variables.less @@ -20,8 +20,8 @@ // Accent colors // ------------------------- -@blue: #049cdb; -@blueDark: #0064cd; +@blue: #009add; // Kyruus Light Blue +@blueDark: #005f9b; // Kyruus Blue @green: #46a546; @red: #9d261d; @yellow: #ffc40d; diff --git a/docs/design.html b/docs/design.html new file mode 100644 index 000000000..17a5cfc7a --- /dev/null +++ b/docs/design.html @@ -0,0 +1,321 @@ + + + + + + + + + Font Awesome Copy & Paste + + + + + + + + + + + + + + + + + +
+
+ +

Copy & Paste

+

+ Install FontAwesome.otf on your system. + Then, copy and paste any of these icons to use them in your mockups & designs. +

+ +
+
+ + +
+
+
+
+
    +
  • icon-glass ()
    • +
  • icon-music ()
    • +
  • icon-search ()
    • +
  • icon-envelope ()
    • +
  • icon-heart ()
    • +
  • icon-star ()
    • +
  • icon-star-empty ()
    • +
  • icon-user ()
    • +
  • icon-film ()
    • +
  • icon-th-large ()
    • +
  • icon-th ()
    • +
  • icon-th-list ()
    • +
  • icon-ok ()
    • +
  • icon-remove ()
    • +
  • icon-zoom-in ()
    • +
  • icon-zoom-out ()
    • +
  • icon-off ()
    • +
  • icon-signal ()
    • +
  • icon-cog ()
    • +
  • icon-trash ()
    • +
  • icon-home ()
    • +
  • icon-file ()
    • +
  • icon-time ()
    • +
  • icon-road ()
    • +
  • icon-download-alt ()
    • +
  • icon-download ()
    • +
  • icon-upload ()
    • +
  • icon-inbox ()
    • +
  • icon-play-circle ()
    • +
  • icon-repeat ()
    • +
  • icon-refresh ()
    • +
  • icon-list-alt ()
    • +
  • icon-lock ()
    • +
  • icon-flag ()
    • +
  • icon-headphones ()
    • +
  • icon-volume-off ()
    • +
  • icon-volume-down ()
    • +
  • icon-volume-up ()
    • +
  • icon-qrcode ()
    • +
  • icon-barcode ()
    • +
  • icon-tag ()
    • +
  • icon-tags ()
    • +
  • icon-book ()
    • +
  • icon-bookmark ()
    • +
  • icon-print ()
    • +
  • icon-camera ()
    • +
  • icon-font ()
    • +
  • icon-bold ()
    • +
  • icon-italic ()
    • +
  • icon-text-height ()
    • +
  • icon-text-width ()
    • +
  • icon-align-left ()
    • +
  • icon-align-center ()
    • +
  • icon-align-right ()
    • +
  • icon-align-justify ()
    • +
  • icon-list ()
    • +
  • icon-indent-left ()
    • +
  • icon-indent-right ()
    • +
  • icon-facetime-video ()
    • +
  • icon-picture ()
    • +
  • icon-pencil ()
    • +
  • icon-map-marker ()
    • +
  • icon-adjust ()
    • +
  • icon-tint ()
    • +
  • icon-edit ()
    • +
  • icon-share ()
    • +
  • icon-check ()
    • +
  • icon-move ()
    • +
  • icon-step-backward ()
    • +
  • icon-fast-backward ()
    • +
  • icon-backward ()
    • +
  • icon-play ()
    • +
  • icon-pause ()
    • +
  • icon-stop ()
    • +
  • icon-forward ()
    • +
  • icon-fast-forward ()
    • +
  • icon-step-forward ()
    • +
  • icon-eject ()
    • +
  • icon-chevron-left ()
    • +
  • icon-chevron-right ()
    • +
  • icon-plus-sign ()
    • +
  • icon-minus-sign ()
    • +
+
+
+
    +
  • icon-remove-sign ()
    • +
  • icon-ok-sign ()
    • +
  • icon-question-sign ()
    • +
  • icon-info-sign ()
    • +
  • icon-screenshot ()
    • +
  • icon-remove-circle ()
    • +
  • icon-ok-circle ()
    • +
  • icon-ban-circle ()
    • +
  • icon-arrow-left ()
    • +
  • icon-arrow-right ()
    • +
  • icon-arrow-up ()
    • +
  • icon-arrow-down ()
    • +
  • icon-share-alt ()
    • +
  • icon-resize-full ()
    • +
  • icon-resize-small ()
    • +
  • icon-plus ()
    • +
  • icon-minus ()
    • +
  • icon-asterisk ()
    • +
  • icon-exclamation-sign ()
    • +
  • icon-gift ()
    • +
  • icon-leaf ()
    • +
  • icon-fire ()
    • +
  • icon-eye-open ()
    • +
  • icon-eye-close ()
    • +
  • icon-warning-sign ()
    • +
  • icon-plane ()
    • +
  • icon-calendar ()
    • +
  • icon-random ()
    • +
  • icon-comment ()
    • +
  • icon-magnet ()
    • +
  • icon-chevron-up ()
    • +
  • icon-chevron-down ()
    • +
  • icon-retweet ()
    • +
  • icon-shopping-cart ()
    • +
  • icon-folder-close ()
    • +
  • icon-folder-open ()
    • +
  • icon-resize-vertical ()
    • +
  • icon-resize-horizontal ()
    • +
  • icon-bar-chart ()
    • +
  • icon-twitter-sign ()
    • +
  • icon-facebook-sign ()
    • +
  • icon-camera-retro ()
    • +
  • icon-key ()
    • +
  • icon-cogs ()
    • +
  • icon-comments ()
    • +
  • icon-thumbs-up ()
    • +
  • icon-thumbs-down ()
    • +
  • icon-star-half ()
    • +
  • icon-heart-empty ()
    • +
  • icon-signout ()
    • +
  • icon-linkedin-sign ()
    • +
  • icon-pushpin ()
    • +
  • icon-external-link ()
    • +
  • icon-signin ()
    • +
  • icon-trophy ()
    • +
  • icon-github-sign ()
    • +
  • icon-upload-alt ()
    • +
  • icon-lemon ()
    • +
  • icon-phone ()
    • +
  • icon-check-empty ()
    • +
  • icon-bookmark-empty ()
    • +
  • icon-phone-sign ()
    • +
  • icon-twitter ()
    • +
  • icon-facebook ()
    • +
  • icon-github ()
    • +
  • icon-unlock ()
    • +
  • icon-credit-card ()
    • +
  • icon-rss ()
    • +
  • icon-hdd ()
    • +
  • icon-bullhorn ()
    • +
  • icon-bell ()
    • +
  • icon-certificate ()
    • +
  • icon-hand-right ()
    • +
  • icon-hand-left ()
    • +
  • icon-hand-up ()
    • +
  • icon-hand-down ()
    • +
  • icon-circle-arrow-left ()
    • +
  • icon-circle-arrow-right ()
    • +
  • icon-circle-arrow-up ()
    • +
  • icon-circle-arrow-down ()
    • +
  • icon-globe ()
    • +
  • icon-wrench ()
    • +
+
+
+
    +
  • icon-tasks ()
    • +
  • icon-filter ()
    • +
  • icon-briefcase ()
    • +
  • icon-fullscreen ()
    • +
  • icon-group ()
    • +
  • icon-link ()
    • +
  • icon-cloud ()
    • +
  • icon-beaker ()
    • +
  • icon-cut ()
    • +
  • icon-copy ()
    • +
  • icon-paper-clip ()
    • +
  • icon-save ()
    • +
  • icon-sign-blank ()
    • +
  • icon-reorder ()
    • +
  • icon-list-ul ()
    • +
  • icon-list-ol ()
    • +
  • icon-strikethrough ()
    • +
  • icon-underline ()
    • +
  • icon-table ()
    • +
  • icon-magic ()
    • +
  • icon-truck ()
    • +
  • icon-pinterest ()
    • +
  • icon-pinterest-sign ()
    • +
  • icon-google-plus-sign ()
    • +
  • icon-google-plus ()
    • +
  • icon-money ()
    • +
  • icon-caret-down ()
    • +
  • icon-caret-up ()
    • +
  • icon-caret-left ()
    • +
  • icon-caret-right ()
    • +
  • icon-columns ()
    • +
  • icon-sort ()
    • +
  • icon-sort-down ()
    • +
  • icon-sort-up ()
    • +
  • icon-envelope-alt ()
    • +
  • icon-linkedin ()
    • +
  • icon-undo ()
    • +
  • icon-legal ()
    • +
  • icon-dashboard ()
    • +
  • icon-comment-alt ()
    • +
  • icon-comments-alt ()
    • +
  • icon-bolt ()
    • +
  • icon-sitemap ()
    • +
  • icon-umbrella ()
    • +
  • icon-paste ()
    • +
  • icon-lightbulb ()
    • +
  • icon-exchange ()
    • +
  • icon-cloud-download ()
    • +
  • icon-cloud-upload ()
    • +
  • icon-user-md ()
    • +
  • icon-stethoscope ()
    • +
  • icon-suitcase ()
    • +
  • icon-bell-alt ()
    • +
  • icon-coffee ()
    • +
  • icon-food ()
    • +
  • icon-file-alt ()
    • +
  • icon-building ()
    • +
  • icon-hospital ()
    • +
  • icon-ambulance ()
    • +
  • icon-medkit ()
    • +
  • icon-fighter-jet ()
    • +
  • icon-beer ()
    • +
  • icon-h-sign ()
    • +
  • icon-plus-sign-alt ()
    • +
  • icon-double-angle-left ()
    • +
  • icon-double-angle-right ()
    • +
  • icon-double-angle-up ()
    • +
  • icon-double-angle-down ()
    • +
  • icon-angle-left ()
    • +
  • icon-angle-right ()
    • +
  • icon-angle-up ()
    • +
  • icon-angle-down ()
    • +
  • icon-desktop ()
    • +
  • icon-laptop ()
    • +
  • icon-tablet ()
    • +
  • icon-mobile-phone ()
    • +
  • icon-circle-blank ()
    • +
  • icon-quote-left ()
    • +
  • icon-quote-right ()
    • +
  • icon-spinner ()
    • +
  • icon-circle ()
    • +
  • icon-reply ()
    • +
+
+
+
+ + + + + + +
+ + + + + + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 6363086d6..d035348b8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -68,6 +68,7 @@
  • Integration
  • Code
  • What's Next
    • +
  • Kyruus
    • Me
      • @@ -155,7 +156,7 @@
      -
      +

      One font, 236 icons

      @@ -607,7 +608,7 @@
      -

      Medical Icons Want to truly make healthcare better? Join me at Kyruus.

      +

      Medical Icons Want to truly make healthcare better? Join me at Kyruus.

        @@ -1029,6 +1030,44 @@
      +
      +

      Kyruus

      +
      +
      +

      + I'm the lead product designer at Kyruus. I wake up every single day excited about my job. + Why? Kyruus is going to change healthcare. No exaggeration. +

      + +

      + Kyruus is a well-funded, big data healthcare startup in Boston. We believe that the right data at the right time + can help doctors make better decisions. We believe data can save lives. +

      + + What I love about Kyruus: +
        +
      • Product design. From the top of the organization, Kyruus is committed to product design done right. It's awesome.
        • +
      • Purpose. Every day, I get to help make the world a better place – a little at a time.
        • +
      • People. I work with some of the best people I've ever met. More than just smart people. Good people.
        • +
      + +

      + Kyruus needs good people. Designers, app developers, big data masters, & interns that get real responsibility. +

      + + Interested? Email me. +
      +
      +
      + +
      + Work with me at Kyruus +       +
      +
      +
      +
      + @@ -1055,7 +1094,7 @@
      diff --git a/docs/test.html b/docs/test.html index 2268172f1..d17d1c19e 100644 --- a/docs/test.html +++ b/docs/test.html @@ -79,6 +79,7 @@
      Link Here Link Here + Link Here
      @@ -107,6 +108,7 @@

      Plain buttons next to icon buttons should be same height

      +

      Buttons

      @@ -158,6 +160,58 @@
      +

      Anchors

      +
      +
      +
      +
      + Button + Button + +
      +
      + Button + Button + +
      +
      + Button + Button + +
      +
      + Button + Button + +
      +
      +
      +
      +
      +
      + Button + Button + +
      +
      + Button + Button + +
      +
      + Button + Button + +
      +
      + Button + Button + +
      +
      +
      +
      +

      Buttons with pulled 2x, 3x, 4x should be same height, have correct line height