├── .gitignore ├── README.md ├── buttons.import.less ├── constants.import.less ├── containers.import.less ├── dapp-styles.less ├── dist ├── dapp-styles.css ├── fonts │ ├── Montserrat-Black.otf │ ├── Montserrat-Bold.otf │ ├── Montserrat-Hairline.otf │ ├── Montserrat-Light.otf │ ├── Montserrat-Regular.otf │ ├── SourceSansPro-Black.otf │ ├── SourceSansPro-BlackIt.otf │ ├── SourceSansPro-Bold.otf │ ├── SourceSansPro-BoldIt.otf │ ├── SourceSansPro-ExtraLight.otf │ ├── SourceSansPro-ExtraLightIt.otf │ ├── SourceSansPro-It.otf │ ├── SourceSansPro-Light.otf │ ├── SourceSansPro-LightIt.otf │ ├── SourceSansPro-Regular.otf │ ├── SourceSansPro-Semibold.otf │ └── SourceSansPro-SemiboldIt.otf └── icons │ ├── Simple-Line-Icons.dev.svg │ ├── Simple-Line-Icons.eot │ ├── Simple-Line-Icons.svg │ ├── Simple-Line-Icons.ttf │ └── Simple-Line-Icons.woff ├── elements.import.less ├── fonts.import.less ├── fonts ├── Montserrat-Black.otf ├── Montserrat-Bold.otf ├── Montserrat-Hairline.otf ├── Montserrat-Light.otf ├── Montserrat-Regular.otf ├── SIL Open Font License.txt ├── SourceSansPro-Black.otf ├── SourceSansPro-BlackIt.otf ├── SourceSansPro-Bold.otf ├── SourceSansPro-BoldIt.otf ├── SourceSansPro-ExtraLight.otf ├── SourceSansPro-ExtraLightIt.otf ├── SourceSansPro-It.otf ├── SourceSansPro-Light.otf ├── SourceSansPro-LightIt.otf ├── SourceSansPro-Regular.otf ├── SourceSansPro-Semibold.otf └── SourceSansPro-SemiboldIt.otf ├── gulpfile.js ├── hex-grid-tile.png ├── icons ├── License.txt ├── Readme.txt ├── Simple-Line-Icons.dev.svg ├── Simple-Line-Icons.eot ├── Simple-Line-Icons.svg ├── Simple-Line-Icons.ttf ├── Simple-Line-Icons.woff ├── index.html ├── simple-line-icons.css └── style.css ├── lib ├── base │ ├── _desktop-styles.import.less │ ├── _mobile-styles.import.less │ ├── _tablet-styles.import.less │ ├── base │ │ ├── _blockquotes.import.less │ │ ├── _buttons.import.less │ │ ├── _code.import.less │ │ ├── _forms.import.less │ │ ├── _global.import.less │ │ ├── _grid.import.less │ │ ├── _helpers.import.less │ │ ├── _lists.import.less │ │ ├── _mixins.import.less │ │ ├── _mobile-grid.import.less │ │ ├── _print.import.less │ │ ├── _resets.import.less │ │ ├── _tables.import.less │ │ ├── _tablet-grid.import.less │ │ └── _variables.import.less │ └── style.import.less ├── lesshat.import.less ├── normalize.import.less └── simple-line-icons.import.less ├── mixins.import.less ├── package.js ├── package.json ├── responsive.import.less └── screenshots └── dapp-account-list-small.png /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ðapp styles 2 | 3 | These styles give a simple basic layout for your Ðapps. 4 | 5 | **Note: This is a very early stage of the package, not all elements are explained, or ready to use. Use it just to try.** 6 | 7 | ## The Design 8 | 9 | The Ethereum Dapp design style is meant to ease the task of designing clear and good looking App interfaces. It uses as few images as possible for the UI and instead uses colors and icons for differentiating hierarchies. In order to make each Dapp unique and help the user quickly realize where he is even when navigating different instances of the same app, we use GeoPatterns in backgrounds when they refer to a unique instance of something. The fonts used are all open source, Source Sans, from Adobe which has a rich family and multiple styles and Montserrat for bold and strong titles. We also use a font for vector icons to ensure scalability and easy customization. 10 | 11 | Most apps are different variations of some simple elements: 12 | 13 | * Use the header on the top with tabs, when your Dapp uses a few constant sections (ie. send and receive) 14 | 15 | * Use the left sidebar when your Dapp has a large number of sources for content (ie. a list of chats) 16 | 17 | * Use the right action bar for actions to be done with the current content 18 | 19 | * Use Dapp-overflow if you want the sections to scroll independently and to remain fixed on the screen 20 | 21 | 22 | ## Setup 23 | 24 | 25 | ### CSS 26 | To use it as CSS file just link the css file from the `dist/` folder. **(No done yet.. sorry, compile yourself please)** 27 | 28 | 29 | ### LESS 30 | To use it as less file, which would allow you to overwrite all constants 31 | from the `constant.import.less` and use the mixins from `mixins.import.less`. 32 | Just link the `dapp-styles.less` in your apps main LESS file. 33 | 34 | ### Meteor 35 | To use it in a Meteor app add the `less` package: 36 | 37 | $ meteor add less 38 | $ meteor add ethereum:dapp-styles 39 | 40 | Adn add the following to your main less file: 41 | 42 | @import '{ethereum:dapp-styles}/dapp-styles.less'; 43 | 44 | 45 | 46 | ### Screenshots 47 | **These are early screenshots and many things are bound to change during development** 48 | 49 | ![Generic contract showing styles](https://cloud.githubusercontent.com/assets/112898/6045448/4eb71c24-ac81-11e4-8498-7a4153530841.png) 50 | 51 | ![Democracy DAO](https://cloud.githubusercontent.com/assets/112898/6045449/535c483a-ac81-11e4-8957-e2c1cb9af27d.png) 52 | 53 | ![Democracy DAO - Pink](https://cloud.githubusercontent.com/assets/112898/6045452/5a188a6c-ac81-11e4-9a8c-40eda1dc6faa.png) 54 | 55 | ![A custom currency contract](https://cloud.githubusercontent.com/assets/112898/6045454/5e2283f6-ac81-11e4-8bc3-727f6ac33b27.png) 56 | 57 | 58 | ![An Escrow contract](https://cloud.githubusercontent.com/assets/112898/6045463/6952295c-ac81-11e4-8e2b-76b7f7e38b3c.png) 59 | 60 | ![Chat Application](https://cloud.githubusercontent.com/assets/112898/6045468/6e9d2ee8-ac81-11e4-8d17-79762336ed4d.png) 61 | 62 | 63 | ![Chat application, profile view](https://cloud.githubusercontent.com/assets/112898/6045469/7316d3ca-ac81-11e4-8855-5a88fc0ac92e.png) 64 | 65 | 66 | 67 | 68 | ## Usage 69 | 70 | A full layout consists of the following HTML elements: 71 | 72 | ```html 73 | 74 |
75 | 76 |
77 | 78 |
79 | 80 | 81 | 84 | 85 | 86 |
87 | 88 |
89 | 90 | 91 | 94 | 95 |
96 | 97 | 98 | 101 | 102 | ``` 103 | 104 | This gives you a basic flex box layout with a fixed header height and footer height, and a growable content area. 105 | 106 | **Note: You can remove any part (header, footer, asides) of it and still have nice fitting containers.** 107 | 108 | ### Using overflow auto in containers 109 | 110 | If you want the apps area to be maximal the window size and the content of your containers to be `overflow: auto`, 111 | just add the `dapp-overflow` class to the `dapp-header`, `dapp-content`, `dapp-footer`, `dapp-actionbar` and/or `dapp-aside` containers and add the following to your main CSS file: 112 | 113 | ```css 114 | html, body { 115 | height: 100%; 116 | } 117 | ``` 118 | 119 | ### Development grid 120 | 121 | HEX Grid 122 | 123 | 124 | To show a HEX grid for element alignment just add the `
` element to your `` tag. 125 | 126 | ### Mixins 127 | 128 | When you use the less version of the framework you will be able 129 | to use all its LESS mixins including the LESSHAT mixins (https://github.com/madebysource/lesshat, which are used by the dapp-styles) in your own LESS files. 130 | 131 | 132 | ### Containers 133 | 134 | To limit the width of you content use the `.dapp-container` class, 135 | which will center your content and limit it to a max width tof 960px (You can overwrite that with the `@widthContainer` variable). 136 | 137 | ```html 138 |
139 | ... 140 |
141 | ``` 142 | 143 | ### Grids 144 | 145 | All paddings and margins are based on a 32px by 18.4px grid. You can overwrite this grid by chaging the: 146 | 147 | - `@gridWidth` 148 | - `@gridHeight` 149 | 150 | variables. 151 | 152 | Additionally dapp-styles uses a grid system from Matthew Hartman. For fluid column layouts. For a full documentation see http://matthewhartman.github.io/base/docs/grid.html 153 | The grid system is based on 12 columns and can be placed anywhere in you HTML. 154 | 155 | **Note** This grid system is not based on the `@gridWidth` and `@gridHeight`, as this are fluid columns. 156 | 157 | 158 | To create a simple grid use the `row`, `col` and `col-x` classes. 159 | 160 | ```html 161 |
162 |
163 | 1 164 | 11 165 | 1-2 166 |
167 |
168 | 11 169 | 1 170 | 1-2 171 |
172 |
173 | ``` 174 | 175 | To change the column size for mobile and tablets you can use the following classes: 176 | 177 | - `.mobile-full` sets column width to 100% and removes floats for mobile devices 178 | - `.tablet-full` sets column width to 100% and removes floats for tablet devices 179 | - `.col-1-2` sets column width to 50% for all devices 180 | - `.col-1-3` sets column width to 33% for all devices 181 | - `.col-1-4` sets column width to 25% for all devices 182 | - `.col-3-4` sets column width to 75% for all devices 183 | - `.tablet-col-1-2` sets column width to 50% for tablet devices 184 | - `.tablet-col-1-3` sets column width to 33% for tablet devices 185 | - `.tablet-col-1-4` sets column width to 25% for tablet devices 186 | - `.tablet-col-3-4` sets column width to 75% for tablet devices 187 | - `.mobile-col-1-2` sets column width to 50% for mobile devices 188 | - `.mobile-col-1-3` sets column width to 33% for mobile devices 189 | - `.mobile-col-1-4` sets column width to 25% for mobile devices 190 | - `.mobile-col-3-4` sets column width to 75% for mobile devices 191 | 192 | #### Breakpoints 193 | 194 | To change change the break points overwrite the following variables: 195 | 196 | - `@widthContainer` default: @gridWidth * 30; // 32px * 30 = 960px 197 | - `@widthTablet` default: @gridWidth * 20; // 32px * 20 = 640px 198 | - `@widthMobile` default: 100%; // mobile is everything below the `@widthTablet` breakpoint 199 | 200 | 201 | ### Elements 202 | 203 | TODO 204 | 205 | #### dapp-account-list 206 | 207 | ![dapp-account-list](/screenshots/dapp-account-list-small.png?raw=true) 208 | 209 | A list of accounts with name and address. Either clickable, with the ` 226 | 227 |
  • 228 | 234 |
    • 235 | 236 |
  • 237 | 238 |

    My unclickable account

    239 | 0x343c98e2b6e49bc0fed722c2a269f3814ddd1533 240 |
    • 241 |
  • 242 | 243 |

    My unclickable selected account

    244 | 0x343c98e2b6e49bc0fed722c2a269f3814ddd1533 245 |
    246 |
    • 247 | 248 | ``` 249 | 250 | #### Menus 251 | 252 | To add a header or aside menu just add the follwowing structure to your `.dapp-header` or `dapp-aside` container: 253 | 254 | ```html 255 | 269 | ``` 270 | 271 | 272 | 273 | ## Credits and ackowledgements 274 | 275 | 276 | * Simple Line Icon fonts by [Graphic Burguers](http://graphicburger.com/simple-line-icons-webfont/) 277 | 278 | 279 | 280 | -------------------------------------------------------------------------------- /buttons.import.less: -------------------------------------------------------------------------------- 1 | 2 | // buttons 3 | button { 4 | font-family: @fontFamily; 5 | } 6 | 7 | // TODO we could add a circle on hover 8 | .dapp-icon-button { 9 | .dapp-button-reset; 10 | display: inline-block; 11 | color: @colorBlack; 12 | 13 | // make smaller on click 14 | &:active { 15 | .scale(0.95); 16 | } 17 | &:hover { 18 | opacity: 0.9; 19 | } 20 | } 21 | 22 | .dapp-block-button, 23 | .dapp-block-button:visited { 24 | .dapp-button-reset; 25 | height: @gridHeight * 3; 26 | min-width: 140px; 27 | padding: @gridHeight/4 @gridWidth/3; 28 | background: @colorLink; 29 | color: @colorWhite; 30 | border-bottom: 3px solid darken(@colorLink, 5%); 31 | .box-sizing(border-box); 32 | .border-radius(2px); 33 | .dapp-shorten-text; 34 | 35 | font-family: @fontFamily; 36 | font-size: 1em; 37 | font-weight: 400; 38 | text-transform: uppercase; 39 | 40 | &.dapp-small { 41 | height: @gridHeight*1.7; 42 | min-width: 100px; 43 | font-size: 0.8em; 44 | border-bottom-width: 0; 45 | 46 | &:focus { 47 | border-bottom-width: 0; 48 | } 49 | } 50 | 51 | &:focus { 52 | border-bottom: 3px solid darken(@colorLink, 5%); 53 | .opacity(0.8); 54 | } 55 | &:active { 56 | border-bottom-width: 3px; 57 | } 58 | &:disabled { 59 | background-color: @colorGray; 60 | border-bottom-color: darken(@colorGray, 5%); 61 | } 62 | 63 | 64 | i { 65 | position: relative; 66 | top: 2px; 67 | } 68 | } 69 | 70 | 71 | .dapp-tag-button { 72 | .dapp-button-reset; 73 | padding: @gridHeight/4 @gridWidth/4; 74 | background: @colorGray; 75 | color: @colorTextPrimary; 76 | .border-radius(4px); 77 | .dapp-shorten-text; 78 | font-size: 0.7em; 79 | 80 | &.active { 81 | background: @colorLink; 82 | color: @colorWhite; 83 | } 84 | } -------------------------------------------------------------------------------- /constants.import.less: -------------------------------------------------------------------------------- 1 | // colors 2 | @colorWhite: #FAFAFA; 3 | @colorBlack: #111; 4 | @colorBlue: #0e73b8; 5 | @colorOrange: #ff9800; 6 | // @colorYellow: #ffc107; 7 | @colorGreen: #8bc34a; 8 | // @colorWhiteTransparent: rgba(255, 255, 255, 0.95); 9 | @colorGray: #CCC6C6; 10 | @colorGrayLight: lighten(#ecebe6, 4%); 11 | @colorGrayDark: darken(@colorGray, 40%); 12 | 13 | @colorError: #C20E25; 14 | 15 | @colorBackgroundOverlay: transparent; // will use blur in ethereum dapps 16 | @colorBackgroundHeader: lighten(#d9d0d0, 5%); 17 | //@colorBackgroundAside: #05669A; 18 | @colorBackgroundAside: @colorGray; 19 | @colorForegroundAside: @colorBlack; 20 | 21 | @colorBackgroundFooter: @colorGrayDark; 22 | 23 | @colorBackgroundMainButton: #665F5F; 24 | @colorForegroundMainButton: @colorWhite; 25 | 26 | 27 | 28 | @colorTextPrimary: @colorBlack; 29 | @colorTextSecondary: #827a7a; 30 | @colorTextTertiary: fadeout(#827a7a, 50%); 31 | 32 | @colorLink: #4A90E2; 33 | 34 | // defaults sizes 35 | @maxContentWidth: 980px; 36 | 37 | @gridWidth: 32px; 38 | @gridHeight: 18.4px; 39 | 40 | @lineHeight: @gridHeight*1.2; 41 | 42 | @defaultMargin: @gridWidth/2; 43 | @defaultPaddingVertical: @gridHeight/1.5; 44 | @defaultPaddingHorizontal: @gridWidth; 45 | 46 | // @circleSizeMedium: 40px; 47 | // @circleSizeLarge: 65px; 48 | 49 | @widthContainer: @gridWidth * 30; 50 | @widthTablet: @gridWidth * 20; 51 | @widthMobile: 100%; 52 | 53 | @heightHeader: @gridWidth * 2; 54 | @heightHeaderSmall: @gridWidth; 55 | 56 | @heightFooter: @gridWidth * 3; 57 | @heightFooterSmall: @gridWidth * 2; 58 | 59 | @widthSidebar: @gridWidth * 7; 60 | @widthSidebarSmall: @gridWidth * 2; 61 | 62 | @widthToolbar: @gridWidth * 2; 63 | @widthToolbarSmall: @gridWidth; 64 | 65 | // fonts 66 | @fontFamily: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; 67 | 68 | 69 | // animations 70 | @animationSpeed: 400ms; -------------------------------------------------------------------------------- /containers.import.less: -------------------------------------------------------------------------------- 1 | body { 2 | .display(flex); 3 | .flex-direction(column); 4 | min-height: 100vh; 5 | padding: 0; 6 | margin: 0; 7 | background-color: @colorWhite; 8 | font: 300 16px @fontFamily; 9 | color: @colorTextPrimary; 10 | 11 | // lock scroll and blur content 12 | &.disable-scroll { 13 | overflow: hidden; 14 | } 15 | &.blur { 16 | .dapp-flex-content, 17 | .dapp-footer, 18 | .dapp-header { 19 | .blur(4px); 20 | } 21 | } 22 | } 23 | // make font thiner on retina 24 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 25 | body { 26 | font: 100 16px @fontFamily; 27 | } 28 | } 29 | 30 | // Special cases on a full screen dapp in mist 31 | .ethereum-dapp-url-bar-style-transparent { 32 | .dapp-header { 33 | padding-top: 4 * @gridHeight; 34 | } 35 | } 36 | 37 | 38 | // DEBUG GRID 39 | .dapp-grid { 40 | z-index: 999; 41 | background: #FFF url('dapp-styles/hex-grid-tile.png'); 42 | background-size: 64px 111px; 43 | position: absolute; 44 | min-height: 100%; 45 | left: 0; 46 | right: 0; 47 | opacity: 0.05; 48 | pointer-events: none; 49 | } 50 | // body:hover .dapp-grid { 51 | // display: none; 52 | // } 53 | 54 | 55 | 56 | // CONTAINERS 57 | 58 | .dapp-container { 59 | display: block; 60 | position: relative; 61 | margin: 0 auto; 62 | max-width: @widthContainer; 63 | } 64 | 65 | // MAIN APP 66 | 67 | .dapp-header, 68 | .dapp-aside, 69 | .dapp-content, 70 | .dapp-footer { 71 | position: relative; 72 | padding: @defaultPaddingVertical @defaultPaddingHorizontal; 73 | .box-sizing(border-box); 74 | } 75 | 76 | .dapp-header { 77 | .display(flex); 78 | .align-items(flex-end); 79 | height: @heightHeader; 80 | z-index: 50; 81 | margin-top: -5px; // necessary to make sure, that its looks good, when blurred 82 | padding-top: @defaultPaddingVertical + 5px; 83 | padding-bottom: 0; 84 | .background-image(linear-gradient(to bottom, lighten(@colorBackgroundHeader, 15%) 0, @colorBackgroundHeader 90%)); 85 | .box-sizing(content-box); 86 | .user-select(none); 87 | 88 | &.dapp-small { 89 | height: @gridHeight * 1.5; 90 | 91 | nav li a i { 92 | .opacity(0); 93 | } 94 | } 95 | 96 | &> .dapp-flex-item { 97 | .flex(1); 98 | } 99 | 100 | // title 101 | .dapp-title { 102 | position: absolute; 103 | top: @defaultMargin/2; 104 | right: @defaultMargin; 105 | text-align: right; 106 | } 107 | hgroup.dapp-title { 108 | h1, h2 { 109 | margin: 0 110 | } 111 | h2 { 112 | padding: 0; 113 | background-color: transparent; 114 | color: @colorTextSecondary; 115 | text-transform: none; 116 | font-family: @fontFamily; 117 | font-weight: 300; 118 | } 119 | } 120 | h1.dapp-title { 121 | top: @defaultMargin*1.2; 122 | margin: 0; 123 | } 124 | 125 | // nav 126 | nav { 127 | width: 100%; 128 | 129 | &> ul { 130 | .dapp-horizontal-menu; 131 | .display(flex); 132 | .align-items(flex-end); 133 | 134 | &> li { 135 | flex: 0 1 auto; 136 | margin-bottom: 0; 137 | 138 | &> a { 139 | display: inline-block; 140 | } 141 | 142 | &.active a, 143 | &.active button, 144 | button.active, 145 | a.active { 146 | color: darken(@colorBackgroundHeader, 20%); 147 | border-bottom: 5px solid @colorWhite; 148 | } 149 | } 150 | 151 | 152 | a, 153 | a:visited, 154 | button { 155 | padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal; 156 | text-align: center; 157 | border-bottom: 5px solid transparent; 158 | color: darken(@colorLink, 10%); 159 | .transform-origin(50% 100%); 160 | 161 | text-transform: uppercase; 162 | font-weight: 400; 163 | 164 | &:focus { 165 | border-color: @colorWhite; 166 | } 167 | &:active { 168 | // border-bottom-color: transparent; 169 | } 170 | 171 | i { 172 | font-size: 1.5em; 173 | 174 | // ANIMATION 175 | .transition(opacity @animationSpeed / 2); 176 | } 177 | 178 | span { 179 | display: block; 180 | } 181 | 182 | } 183 | } 184 | } 185 | } 186 | 187 | .dapp-footer { 188 | height: @heightFooter; 189 | background-color: @colorBackgroundFooter; 190 | } 191 | 192 | // Makes the content with asides align in rows 193 | .dapp-flex-content { 194 | .display(flex); 195 | // .flex-direction(column); 196 | .flex(1); 197 | // max-height: 100vh;//85vh; 198 | background: @colorWhite; 199 | 200 | } 201 | 202 | .dapp-content { 203 | .flex(1); 204 | max-width: @maxContentWidth; 205 | margin: 0 auto; 206 | 207 | &.dapp-has-header { 208 | padding-top: 120px + 3 * @defaultPaddingVertical; 209 | } 210 | 211 | .dapp-content-header { 212 | position: fixed; 213 | top: 0; 214 | width: 80%; 215 | min-height: @gridHeight * 2; 216 | padding: @defaultPaddingVertical @gridWidth / 2; 217 | margin-left: -@defaultPaddingHorizontal; 218 | background: fadeout(@colorGrayLight, 20%); 219 | z-index: 10; 220 | line-height: @gridHeight * 2; 221 | .dapp-shadow-medium; 222 | .box-sizing(border-box); 223 | } 224 | 225 | .row { 226 | margin-left: -10px; 227 | margin-right: -10px; 228 | } 229 | } 230 | 231 | 232 | .dapp-aside { 233 | .flex(0 0 @widthSidebar); 234 | padding-right: 0; 235 | background-color: @colorBackgroundAside; 236 | 237 | 238 | // ANIMATION 239 | .transition(flex @animationSpeed); 240 | 241 | nav { 242 | ul { 243 | .dapp-vertical-menu; 244 | padding-top: @gridHeight*1; 245 | 246 | li { 247 | 248 | 249 | &.active a, 250 | &.active button, 251 | a.active, 252 | button.active { 253 | background-color: @colorWhite; 254 | border-top: none; 255 | color: @colorBlack; 256 | font-weight: 500; 257 | 258 | &:focus { 259 | background-color: fadeout(@colorWhite, 10%); 260 | } 261 | } 262 | 263 | // remove the top border 264 | &:first-child a, 265 | &:first-child button, 266 | &.active + li > a, 267 | &.active + li > button, 268 | + li > a.active, 269 | + li > button.active, 270 | &.dapp-main-button + li { 271 | border-top: 0; 272 | } 273 | 274 | a, 275 | a:visited, 276 | button { 277 | .display(flex); 278 | .align-items(center); 279 | position: relative; 280 | width: 100%; 281 | min-height: @gridHeight*4; 282 | max-height: @gridHeight*5; 283 | padding: @defaultPaddingVertical @defaultPaddingHorizontal; 284 | padding-left: @gridWidth / 3; 285 | overflow: hidden; 286 | border-top: darken(@colorBackgroundAside, 8%) solid 1px; 287 | .border-radius(3px 0 0 3px); 288 | .box-sizing(border-box); // align button and links properties 289 | color: @colorForegroundAside; 290 | 291 | 292 | // .dapp-shorten-text; 293 | font-weight: 300; 294 | line-height: 20px; 295 | 296 | &:focus { 297 | background-color: fadeout(@colorWhite, 90%); 298 | border-bottom: 0; 299 | } 300 | &:active { 301 | .transform-origin(100% 50%); 302 | .scale(0.98); 303 | } 304 | 305 | > i { 306 | margin-right: 4px; 307 | } 308 | 309 | // elipsis span 310 | > span { 311 | max-width: 115px; 312 | display: -webkit-box; 313 | -webkit-line-clamp: 3; 314 | -webkit-box-orient: vertical; 315 | overflow: hidden; 316 | text-overflow: ellipsis; 317 | } 318 | 319 | } 320 | .dapp-main-button { 321 | position: relative; 322 | width: 100%; 323 | margin-bottom: 4*@gridHeight; 324 | .border-radius(3px 0 0 3px); 325 | background: @colorBackgroundMainButton; 326 | color: @colorForegroundMainButton; 327 | border-top: none; 328 | 329 | 330 | i { 331 | position: absolute; 332 | right: @gridWidth / 4; 333 | top: @gridHeight * 1.5; 334 | } 335 | } 336 | } 337 | } 338 | } 339 | } 340 | 341 | .dapp-actionbar { 342 | z-index: 20; 343 | .flex(0 0 @widthToolbar); 344 | background: @colorWhite; 345 | margin-left: @gridWidth/2; 346 | 347 | nav { 348 | ul { 349 | .dapp-vertical-menu; 350 | 351 | li { 352 | margin: @defaultMargin 0;// thats what I always use, so we can better control the the spacing, without comming back here. @gridHeight*2 2px 0; 353 | color: @colorLink; 354 | position: relative; 355 | text-align: center; 356 | 357 | // ANIMATION 358 | .transition(height @animationSpeed); 359 | 360 | // give every button the icon style 361 | button, 362 | a, a:visited { 363 | .dapp-icon-button; 364 | color: @colorBlue; 365 | font-size: 0.8em; 366 | font-weight: 400; 367 | 368 | i { 369 | font-size: 2em; 370 | display: block; // makes sure the text is below 371 | } 372 | } 373 | } 374 | } 375 | } 376 | } 377 | 378 | 379 | .dapp-box { 380 | display: inline-block; 381 | float: left; 382 | width: @gridWidth * 6; 383 | height: @gridHeight * 12; 384 | padding-top: @gridHeight; 385 | padding-left: @gridWidth/2; 386 | padding-bottom: @gridHeight/2; 387 | padding-right: @gridWidth/2; 388 | 389 | margin-bottom: @gridHeight/2; 390 | margin-right: @gridWidth/2; 391 | background-color: @colorWhite; 392 | // border: 1px solid @colorGrayDark; 393 | .dapp-shadow-medium; 394 | 395 | h2 { 396 | margin: 0; 397 | padding: 0; 398 | background-color: transparent; 399 | color: @colorTextSecondary; 400 | font-family: @fontFamily; 401 | text-transform: none; 402 | font-size: 1.5em; 403 | font-weight: 100; 404 | } 405 | } 406 | 407 | 408 | // MODAL the full styles are in the ethereum:elements package 409 | .dapp-modal-overlay { 410 | background: fadeout(@colorBackgroundOverlay, 50%); 411 | } 412 | .dapp-modal-container { 413 | background: @colorWhite; 414 | } 415 | -------------------------------------------------------------------------------- /dapp-styles.less: -------------------------------------------------------------------------------- 1 | // thirdparty 2 | @import 'lib/simple-line-icons.import.less'; 3 | @import 'lib/normalize.import.less'; 4 | @import 'lib/lesshat.import.less'; 5 | @import 'lib/base/style.import.less'; 6 | 7 | // constants, mixins 8 | @import 'fonts.import.less'; 9 | @import 'constants.import.less'; 10 | @import 'mixins.import.less'; 11 | 12 | // containers, elements 13 | @import 'elements.import.less'; 14 | @import 'containers.import.less'; 15 | @import 'buttons.import.less'; 16 | 17 | // responsive 18 | @import 'responsive.import.less'; 19 | 20 | -------------------------------------------------------------------------------- /dist/fonts/Montserrat-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/Montserrat-Black.otf -------------------------------------------------------------------------------- /dist/fonts/Montserrat-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/Montserrat-Bold.otf -------------------------------------------------------------------------------- /dist/fonts/Montserrat-Hairline.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/Montserrat-Hairline.otf -------------------------------------------------------------------------------- /dist/fonts/Montserrat-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/Montserrat-Light.otf -------------------------------------------------------------------------------- /dist/fonts/Montserrat-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/Montserrat-Regular.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-Black.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-BlackIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-BlackIt.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-Bold.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-BoldIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-BoldIt.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-ExtraLight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-ExtraLight.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-ExtraLightIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-ExtraLightIt.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-It.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-It.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-Light.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-LightIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-LightIt.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-Regular.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-Semibold.otf -------------------------------------------------------------------------------- /dist/fonts/SourceSansPro-SemiboldIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/fonts/SourceSansPro-SemiboldIt.otf -------------------------------------------------------------------------------- /dist/icons/Simple-Line-Icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/icons/Simple-Line-Icons.eot -------------------------------------------------------------------------------- /dist/icons/Simple-Line-Icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/icons/Simple-Line-Icons.ttf -------------------------------------------------------------------------------- /dist/icons/Simple-Line-Icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/dist/icons/Simple-Line-Icons.woff -------------------------------------------------------------------------------- /elements.import.less: -------------------------------------------------------------------------------- 1 | #dapp-form-helper-iframe { 2 | display: none; 3 | } 4 | 5 | /* PROGRESSBAR */ 6 | progress { 7 | -webkit-appearance: none; 8 | appearance: none; 9 | height: @gridHeight/2; 10 | margin: @gridHeight/4; 11 | color: @colorBlue; 12 | 13 | @shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); 14 | @radius: 2px; 15 | 16 | // bar 17 | &::-webkit-progress-bar { 18 | background-color: fadeout(@colorGrayLight, 10%); 19 | border-radius: @radius; 20 | box-shadow: @shadow 21 | } 22 | &::-moz-progress-bar { 23 | background-color: fadeout(@colorGrayLight, 10%); 24 | border-radius: @radius; 25 | box-shadow: @shadow 26 | } 27 | &::progress-bar { 28 | background-color: fadeout(@colorGrayLight, 10%); 29 | border-radius: @radius; 30 | box-shadow: @shadow 31 | } 32 | 33 | // value 34 | &::-webkit-progress-value { 35 | background-color: @colorBlue; 36 | opacity: 0.8; 37 | border-radius: @radius; 38 | } 39 | &::-moz-progress-value { 40 | background-color: @colorBlue; 41 | opacity: 0.8; 42 | border-radius: @radius; 43 | } 44 | &::progress-value { 45 | background-color: @colorBlue; 46 | opacity: 0.8; 47 | border-radius: @radius; 48 | } 49 | } 50 | 51 | .dapp-progress { 52 | position: relative; 53 | width: 100%; 54 | height: @gridHeight; 55 | border-bottom: 1px solid @colorBlue; 56 | 57 | > span { 58 | display: block; 59 | position: absolute; 60 | top: 0; 61 | bottom: 0; 62 | left: 0; 63 | right: 0; 64 | line-height: @gridHeight; 65 | text-align: center; 66 | font-size: 0.7em; 67 | } 68 | 69 | .dapp-bar { 70 | height: 100%; 71 | .background-image(linear-gradient(to top, @colorBlue 0%, lighten(@colorBlue, 20%) 100%)); 72 | 73 | // ANIMATION 74 | .transition(width @animationSpeed*26 linear); 75 | } 76 | } 77 | 78 | .dapp-message { 79 | position: relative; 80 | max-width: @gridWidth * 16; 81 | margin: @defaultMargin*3 0; 82 | font-size: 1.5em; 83 | font-weight: 100; 84 | line-height: 27pt; 85 | 86 | // input[type="text"] { 87 | // display: block; 88 | // width: @gridWidth * 10; 89 | // color: @colorLink; 90 | // margin-top: 1*@gridHeight; 91 | // background: lighten(@colorGrayLight, 4%); 92 | // border-bottom: solid 2px @colorGrayLight; 93 | // font-size: 1em; 94 | // } 95 | } 96 | 97 | 98 | .dapp-count { 99 | .display(flex); 100 | .align-items(center); 101 | position: absolute; 102 | top: 0; 103 | bottom: 0; 104 | right: 0; 105 | padding: 0 @gridWidth/4; 106 | color: @colorWhite; 107 | font-weight: 100; 108 | .opacity(0.7); 109 | 110 | // ANIMATION 111 | .transition(opacity @animationSpeed); 112 | &.animate { 113 | .opacity(0); 114 | } 115 | } 116 | .active .dapp-count { 117 | background-color: @colorGrayLight; 118 | color: darken(@colorBackgroundAside, 20%); 119 | } 120 | 121 | .dapp-url-bar { 122 | display: block; 123 | text-align: center; 124 | width: 100%; 125 | // .calc(width, ~'100% - 64px'); 126 | .border-radius(8px); 127 | } 128 | 129 | 130 | 131 | .dapp-account-list { 132 | @dappPaddingVertical: @gridHeight * 0.5; 133 | @dappPaddinghorizontal: @gridWidth * 1.5; 134 | 135 | // flex-grow: 2; 136 | list-style-type: none; 137 | overflow: auto; 138 | padding-left: 0; 139 | .dapp-vertical-menu; 140 | 141 | li { 142 | padding: @dappPaddingVertical/2 0; 143 | padding-left: @dappPaddinghorizontal; 144 | min-height: @gridHeight * 2.5; 145 | position: relative; 146 | overflow: hidden; 147 | font-family: @fontFamily; 148 | 149 | 150 | button.selected { 151 | min-height: @gridHeight * 2; 152 | border-left: 3px solid @colorLink; 153 | 154 | .dapp-identicon { 155 | margin-top: -2px; 156 | margin-left: -2px; 157 | border: 2px solid @colorGray; 158 | width: 36px; 159 | height: 36px; 160 | } 161 | 162 | figure { 163 | position: absolute; 164 | color: @colorWhite; 165 | right: 0; 166 | top: 0; 167 | font-size: 160%; 168 | z-index: 10; 169 | bottom: 0; 170 | text-align: center; 171 | padding-top: 4px; 172 | padding: 9px 10px; 173 | background: linear-gradient(to right, transparent, @colorLink 50%); 174 | } 175 | } 176 | 177 | button { 178 | position: relative; 179 | display: block; 180 | display: flex; 181 | flex-direction: column; 182 | justify-content: center; 183 | padding: @dappPaddingVertical/2 0; 184 | padding-left: @dappPaddinghorizontal; 185 | margin: -@dappPaddingVertical/2 0; 186 | margin-left: -@dappPaddinghorizontal; 187 | width: 100%; 188 | height: 100%; 189 | min-height: @gridHeight * 2; 190 | font-family: @fontFamily; 191 | text-align: left; 192 | border-left-color: @colorGray; 193 | border-left-style: solid; 194 | outline: none; 195 | .transition(border 0.25s); 196 | 197 | &:focus { 198 | border-bottom: none !important; 199 | } 200 | 201 | &:hover { 202 | border-left-width: 6px; 203 | border-bottom: none !important; 204 | } 205 | 206 | &:active { 207 | transform: scale(1) !important; 208 | } 209 | 210 | } 211 | 212 | .dapp-identicon { 213 | position: absolute; 214 | top: @gridHeight/3; 215 | left: @gridWidth/4; 216 | } 217 | 218 | h3 { 219 | .dapp-shorten-text; 220 | display: block; 221 | padding: 0; 222 | margin: 0; 223 | color: @colorLink; 224 | text-transform: none; 225 | font-weight: 400; 226 | font-size: 90%; 227 | text-shadow: #fff 0 1px 0; 228 | } 229 | 230 | h3 + span { 231 | // position: relative; 232 | // top: -0.25 * @gridHeight; 233 | white-space: nowrap; 234 | overflow: hidden; 235 | text-overflow: ellipsis; 236 | font-size: 75%; 237 | opacity: 0.5; 238 | color: @colorTextSecondary; 239 | } 240 | } 241 | } 242 | 243 | 244 | .dapp-modal-buttons { 245 | .display(flex); 246 | .justify-content(flex-end); 247 | 248 | margin: @gridHeight @gridWidth 0; 249 | 250 | button, a, a:visited { 251 | .flex(0 0 auto); 252 | font-size: 1.1em; 253 | max-width: none; 254 | margin: @defaultPaddingVertical @defaultPaddingHorizontal; 255 | font-weight: 300; 256 | 257 | &.dapp-primary-button { 258 | font-weight: 500; 259 | } 260 | 261 | &:last-child { 262 | margin-right: 0; 263 | } 264 | } 265 | } 266 | 267 | 268 | // default elements 269 | 270 | a, 271 | a:visited, 272 | button { 273 | text-decoration: none; 274 | color: @colorLink; 275 | 276 | outline: 0; 277 | 278 | &:hover, 279 | &:focus { 280 | outline: 0; 281 | } 282 | &:focus { 283 | border-bottom: 1px dotted @colorLink; 284 | } 285 | &:active { 286 | .scale(0.95); 287 | border-bottom: 0; 288 | } 289 | } 290 | button { 291 | .dapp-button-reset; 292 | font-weight: inherit; 293 | } 294 | 295 | hr { 296 | border: 0; 297 | height: 0; 298 | margin: @defaultMargin*2 0; 299 | background-color: transparent; 300 | border-bottom: 1px solid @colorGray; 301 | } 302 | 303 | h1, h2, h3, h4 { 304 | clear: both; 305 | } 306 | 307 | h1 { 308 | margin: @defaultMargin 0; 309 | margin-bottom: @defaultMargin*3; 310 | font-weight: 100; 311 | font-size: 2.2em; 312 | line-height: 1.4em; 313 | color: @colorTextSecondary; 314 | 315 | span { 316 | font-weight: 500; 317 | } 318 | 319 | + h2{ 320 | margin-top: 0; 321 | } 322 | + p { 323 | margin-top: -@defaultMargin*2; 324 | } 325 | 326 | strong { 327 | font-weight: 400; 328 | } 329 | } 330 | 331 | h2 { 332 | display: inline-block; 333 | padding: 0 @defaultPaddingHorizontal/4; 334 | padding-bottom: 1px; 335 | margin: @defaultMargin*3 0; 336 | font-size: 1em; 337 | text-transform: uppercase; 338 | background: @colorTextSecondary; 339 | color: @colorWhite; 340 | 341 | font-family: 'Montserrat'; 342 | font-weight: 400; 343 | 344 | + table { 345 | margin-top: 0; 346 | } 347 | } 348 | 349 | h3 { 350 | margin: @defaultMargin 0; 351 | padding: 0; 352 | color: fadeout(@colorTextSecondary, 30%); 353 | text-transform: uppercase; 354 | font-weight: 500; 355 | font-size: 1em; 356 | } 357 | 358 | h4 { 359 | margin: @defaultMargin 0; 360 | padding: 0; 361 | color: fadeout(@colorTextSecondary, 30%); 362 | font-weight: 500; 363 | font-size: 1em; 364 | } 365 | 366 | pre, 367 | code { 368 | .dapp-overflow; 369 | word-break: break-word; 370 | padding: @defaultPaddingVertical/2; 371 | background-color: @colorGrayLight; 372 | font-size: 0.8em; 373 | text-align: left; 374 | } 375 | 376 | 377 | table { 378 | width: 100%; 379 | margin: @defaultMargin 0; 380 | 381 | &.dapp-zebra { 382 | tbody { 383 | tr { 384 | &:nth-child(odd) { 385 | background-color: fadeout(@colorGray, 70%); 386 | } 387 | } 388 | } 389 | thead + tbody { 390 | tr { 391 | &:nth-child(even) { 392 | background-color: fadeout(@colorGray, 70%); 393 | } 394 | } 395 | } 396 | } 397 | 398 | &.dapp-small { 399 | td { 400 | padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/4; 401 | font-size: 0.8em; 402 | } 403 | } 404 | 405 | + h2, 406 | + h3 { 407 | margin-top: @defaultMargin*2; 408 | } 409 | 410 | td { 411 | padding: @defaultPaddingVertical @defaultPaddingHorizontal/2; 412 | 413 | h2 { 414 | margin: 0; 415 | padding: 0; 416 | background-color: transparent; 417 | color: @colorTextSecondary; 418 | text-transform: none; 419 | font-style: normal; 420 | } 421 | p { 422 | padding-top: @defaultMargin/2; 423 | margin: 0; 424 | font-size: 0.9em; 425 | } 426 | } 427 | 428 | thead { 429 | background-color: @colorTextSecondary; 430 | color: @colorWhite; 431 | text-transform: uppercase; 432 | } 433 | } 434 | 435 | 436 | // OVERWRITES for elements from the ethereum:elements package 437 | .dapp-input { 438 | border: 0; 439 | border-bottom: solid 2px @colorGray; 440 | background-color: @colorGrayLight; 441 | color: @colorLink; 442 | .transition(opacity 1s); 443 | 444 | .placeholder(@colorGray); 445 | 446 | &:disabled { 447 | color: @colorGrayDark; 448 | opacity: 0.25; 449 | } 450 | 451 | &.dapp-tiny { 452 | font-size: 0.6em; 453 | border-bottom-width: 1px; 454 | } 455 | &.dapp-small { 456 | font-size: 0.8em; 457 | } 458 | &.dapp-large { 459 | font-size: 1.5em; 460 | } 461 | 462 | &:invalid, 463 | &.dapp-error { 464 | color: @colorError; 465 | background: fadeout(@colorError, 90%); 466 | border-color: fadeout(@colorError, 85%); 467 | } 468 | } 469 | 470 | .dapp-address-input { 471 | input { 472 | .dapp-input; 473 | 474 | } 475 | } 476 | 477 | // forms 478 | input, 479 | select, 480 | textarea { 481 | .dapp-input; 482 | display: inline-block; 483 | width: 300px; 484 | max-width: 100%; 485 | margin-top: @gridHeight; 486 | padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/2; 487 | padding-bottom: @defaultPaddingVertical/3; 488 | .box-sizing(border-box); 489 | .border-radius(0); 490 | font-size: 1em; 491 | font-weight: 300; 492 | 493 | &:focus { 494 | outline: 0; 495 | border-color: @colorLink; 496 | } 497 | } 498 | 499 | h1 + input, 500 | h1 + select, 501 | h1 + textarea, 502 | h2 + input, 503 | h2 + select, 504 | h2 + textarea, 505 | h3 + input, 506 | h3 + select, 507 | h3 + textarea, 508 | h4 + input, 509 | h4 + select, 510 | h4 + textarea { 511 | margin-top: 0; 512 | } 513 | 514 | :disabled { 515 | color: @colorGrayDark; 516 | // background-color: @colorGrayLight; 517 | } 518 | input[type="checkbox"], input[type="radio"] { 519 | display: inline-block; 520 | position: relative; 521 | margin: 0; 522 | outline: none !important; 523 | -webkit-appearance: none; 524 | 525 | width: auto; 526 | 527 | width: 24px; 528 | height: 24px; 529 | 530 | // Radio 531 | &::before { 532 | content: ''; 533 | position: relative; 534 | top: 0; 535 | left: 0; 536 | display: block; 537 | 538 | background: @colorGrayLight; 539 | border: 1px solid @colorGrayLight; 540 | .box-shadow(inset 0 0 2px rgba(0,0,0,0.2)); 541 | // .dapp-shadow-medium; 542 | 543 | width: 24px; 544 | height: 24px; 545 | } 546 | 547 | &:active::before { 548 | // .dapp-shadow-medium; 549 | } 550 | 551 | &:focus::before { 552 | border-color: fadeout(@colorLink, 60%); 553 | // .dapp-shadow-medium; 554 | } 555 | &:disabled::before { 556 | cursor: not-allowed; 557 | background-color: fadeout(@colorGrayLight, 20%); 558 | border-color: @colorGrayLight; 559 | } 560 | 561 | 562 | // Radio Pip 563 | &:after { 564 | content: ''; 565 | display: inline-block; 566 | position: absolute; 567 | top: 6px; 568 | left: 6px; 569 | 570 | background: @colorLink; 571 | .dapp-shadow-small; 572 | 573 | width: 12px; 574 | height: 12px; 575 | 576 | .transition(transform @animationSpeed); 577 | .scale(0); 578 | } 579 | 580 | &:checked:after { 581 | .scale(1); 582 | } 583 | 584 | &:disabled:after { 585 | background: fadeout(@colorLink, 60%); 586 | } 587 | } 588 | 589 | input[type="radio"] { 590 | .border-radius(50%); 591 | 592 | &:before { 593 | .border-radius(50%); 594 | } 595 | &:after { 596 | .border-radius(50%); 597 | } 598 | } 599 | input[type="range"] { 600 | -webkit-appearance: none; 601 | padding: 0; 602 | border: 0; 603 | background-color: transparent; 604 | 605 | &::-webkit-slider-runnable-track { 606 | height: 5px; 607 | background-color: @colorGray; 608 | border: none; 609 | .border-radius(3px); 610 | } 611 | 612 | &::-webkit-slider-thumb { 613 | -webkit-appearance: none; 614 | border: none; 615 | height: 16px; 616 | width: 16px; 617 | border-radius: 50%; 618 | background-color: @colorGrayDark; 619 | margin-top: -6px; 620 | } 621 | 622 | &:focus { 623 | outline: none; 624 | } 625 | 626 | &:focus::-webkit-slider-thumb { 627 | background-color: @colorLink; 628 | } 629 | 630 | &::-moz-range-track { 631 | // width: 300px; 632 | height: 5px; 633 | background-color: @colorGray; 634 | border: none; 635 | .border-radius(3px); 636 | } 637 | 638 | &::-moz-range-thumb { 639 | -webkit-appearance: none; 640 | border: none; 641 | height: 16px; 642 | width: 16px; 643 | border-radius: 50%; 644 | background-color: @colorGrayDark; 645 | margin-top: -4px; 646 | } 647 | 648 | &:focus { 649 | outline: none; 650 | } 651 | 652 | &:focus::-moz-range-thumb { 653 | background-color: @colorLink; 654 | } 655 | } 656 | 657 | label { 658 | font-weight: 300; 659 | } 660 | fieldset { 661 | border: 0; 662 | padding: 0; 663 | margin: @defaultMargin; 664 | } 665 | select { 666 | height: 45px; 667 | } 668 | 669 | // turns radio buttons in segmented controls 670 | .dapp-segmented-control { 671 | .display(flex); 672 | 673 | &.dapp-small { 674 | label { 675 | padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/2; 676 | font-size: 0.8em; 677 | } 678 | } 679 | 680 | input { 681 | display: none; 682 | } 683 | 684 | label { 685 | .flex(1); 686 | color: @colorLink; 687 | background: @colorGrayLight; 688 | padding: @defaultPaddingVertical @defaultPaddingHorizontal; 689 | margin: 1px; 690 | text-align: center; 691 | text-transform: uppercase; 692 | font-weight: 400; 693 | border-right-width: 0; 694 | cursor: pointer; 695 | .transition(background-color @animationSpeed/2); 696 | 697 | &:nth-child(2) { 698 | .border-radius(4px 0 0 4px); 699 | } 700 | 701 | &:last-child { 702 | border-right-width: 1px; 703 | .border-radius(0 4px 4px 0); 704 | } 705 | } 706 | 707 | input:checked + label { 708 | background: @colorGray; 709 | border-color: @colorGray; 710 | color: @colorGrayDark; 711 | } 712 | 713 | 714 | } 715 | -------------------------------------------------------------------------------- /fonts.import.less: -------------------------------------------------------------------------------- 1 | //Fonts 2 | 3 | @font-face { 4 | font-family: 'Source Sans Pro'; 5 | src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-ExtraLight.otf'); 6 | font-weight: 100; 7 | font-style: normal; 8 | } 9 | //@font-face { 10 | // font-family: 'Source Sans Pro'; 11 | // src:url('packages/ethereum_dapp-styles/fonts/SS-ExtraLightIt.otf'); 12 | // font-weight: 100; 13 | // font-style: italic; 14 | // } 15 | 16 | @font-face { 17 | font-family: 'Source Sans Pro'; 18 | src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-Light.otf'); 19 | font-weight: 300; 20 | font-style: normal; 21 | } 22 | // @font-face { 23 | // font-family: 'Source Sans Pro'; 24 | // src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-LightIt.otf'); 25 | // font-weight: 300; 26 | // font-style: italic; 27 | // } 28 | 29 | @font-face { 30 | font-family: 'Source Sans Pro'; 31 | src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-Regular.otf'); 32 | font-weight: 400; 33 | font-style: normal; 34 | } 35 | // @font-face { 36 | // font-family: 'Source Sans Pro'; 37 | // src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-RegularIt.otf'); 38 | // font-weight: 400; 39 | // font-style: italic; 40 | // } 41 | @font-face { 42 | font-family: 'Source Sans Pro'; 43 | src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-Semibold.otf'); 44 | font-weight: 500; 45 | font-style: normal; 46 | } 47 | // @font-face { 48 | // font-family: 'Source Sans Pro'; 49 | // src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-SemiboldIt.otf'); 50 | // font-weight: 500; 51 | // font-style: italic; 52 | // } 53 | @font-face { 54 | font-family: 'Source Sans Pro'; 55 | src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-Bold.otf'); 56 | font-weight: 700; 57 | font-style: normal; 58 | } 59 | // @font-face { 60 | // font-family: 'Source Sans Pro'; 61 | // src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-BoldIt.otf'); 62 | // font-weight: 700; 63 | // font-style: italic; 64 | // } 65 | // @font-face { 66 | // font-family: 'Source Sans Pro'; 67 | // src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-Black.otf'); 68 | // font-weight: 900; 69 | // font-style: normal; 70 | // } 71 | // @font-face { 72 | // font-family: 'Source Sans Pro'; 73 | // src:url('packages/ethereum_dapp-styles/fonts/SourceSansPro-BlackIt.otf'); 74 | // font-weight: 900; 75 | // font-style: italic; 76 | // } 77 | 78 | @font-face { 79 | font-family: 'Montserrat'; 80 | src:url('packages/ethereum_dapp-styles/fonts/Montserrat-Regular.otf'); 81 | font-weight: 400; 82 | font-style: normal; 83 | } 84 | -------------------------------------------------------------------------------- /fonts/Montserrat-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/Montserrat-Black.otf -------------------------------------------------------------------------------- /fonts/Montserrat-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/Montserrat-Bold.otf -------------------------------------------------------------------------------- /fonts/Montserrat-Hairline.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/Montserrat-Hairline.otf -------------------------------------------------------------------------------- /fonts/Montserrat-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/Montserrat-Light.otf -------------------------------------------------------------------------------- /fonts/Montserrat-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/Montserrat-Regular.otf -------------------------------------------------------------------------------- /fonts/SIL Open Font License.txt: -------------------------------------------------------------------------------- 1 | Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL 5 | 6 | ----------------------------------------------------------- 7 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 8 | ----------------------------------------------------------- 9 | 10 | PREAMBLE 11 | The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. 12 | 13 | The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. 14 | 15 | DEFINITIONS 16 | "Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. 17 | 18 | "Reserved Font Name" refers to any names specified as such after the copyright statement(s). 19 | 20 | "Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s). 21 | 22 | "Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. 23 | 24 | "Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. 25 | 26 | PERMISSION & CONDITIONS 27 | Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: 28 | 29 | 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. 30 | 31 | 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. 32 | 33 | 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. 34 | 35 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. 36 | 37 | 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. 38 | 39 | TERMINATION 40 | This license becomes null and void if any of the above conditions are not met. 41 | 42 | DISCLAIMER 43 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. -------------------------------------------------------------------------------- /fonts/SourceSansPro-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-Black.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-BlackIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-BlackIt.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-Bold.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-BoldIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-BoldIt.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-ExtraLight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-ExtraLight.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-ExtraLightIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-ExtraLightIt.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-It.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-It.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-Light.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-LightIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-LightIt.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-Regular.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-Semibold.otf -------------------------------------------------------------------------------- /fonts/SourceSansPro-SemiboldIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/fonts/SourceSansPro-SemiboldIt.otf -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var less = require('gulp-less'); 3 | var replace = require('gulp-replace'); 4 | var path = require('path'); 5 | 6 | gulp.task('less', function () { 7 | return gulp.src('./dapp-styles.less') 8 | .pipe(less({ 9 | paths: [ path.join(__dirname, 'less', 'includes') ] 10 | })) 11 | .pipe(gulp.dest('./dist')); 12 | }); 13 | 14 | 15 | gulp.task('replaceUrl', ['less'],function(){ 16 | gulp.src(['./dist/dapp-styles.css']) 17 | .pipe(replace(/packages\/ethereum_dapp-styles\//g, '')) 18 | .pipe(gulp.dest('./dist')); 19 | }); 20 | 21 | gulp.task('copy-files', ['replaceUrl'], function() { 22 | return gulp.src([ 23 | './fonts/*.otf', 24 | './icons/Simple-Line-Icons.*', 25 | ], { base: './' }) 26 | .pipe(gulp.dest('./dist')); 27 | }); 28 | 29 | gulp.task('default', ['copy-files']); -------------------------------------------------------------------------------- /hex-grid-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/hex-grid-tile.png -------------------------------------------------------------------------------- /icons/License.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/icons/License.txt -------------------------------------------------------------------------------- /icons/Readme.txt: -------------------------------------------------------------------------------- 1 | SIMPLE LINE ICONS 2 | ====================================================================================== 3 | 4 | Simple Line Icons is 162 simple stroke icons that are great for mobile applications, 5 | websites, user interfaces, etc. All icons were converted from the same beautiful 6 | simple line icon sets released previously on GraphicBurger. 7 | 8 | You can checkout the vector PSD versions of these icons on the following links 9 | 10 | * http://graphicburger.com/simple-line-icons-set-vol-1/ 11 | * http://graphicburger.com/simple-line-icons-set-vol-2/ 12 | * http://graphicburger.com/simple-line-icons-set-vol-3/ 13 | * http://graphicburger.com/simple-line-icons-set-vol-4/ 14 | 15 | To modify your generated font, use the *dev.svg* file, located in the *fonts* folder in 16 | this package. You can import this dev.svg file to the IcoMoon app. All the tags (class 17 | names) and the Unicode points of your glyphs are saved in this file. 18 | 19 | These fonts converted to SVG using Illustrator, the SVG was then converted into a font 20 | using the awesome Icooon app (http://icomoon.io/app) 21 | -------------------------------------------------------------------------------- /icons/Simple-Line-Icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/icons/Simple-Line-Icons.eot -------------------------------------------------------------------------------- /icons/Simple-Line-Icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/icons/Simple-Line-Icons.ttf -------------------------------------------------------------------------------- /icons/Simple-Line-Icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/icons/Simple-Line-Icons.woff -------------------------------------------------------------------------------- /icons/simple-line-icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Simple-Line-Icons'; 3 | src:url('Simple-Line-Icons.eot'); 4 | src:url('Simple-Line-Icons.eot?#iefix') format('embedded-opentype'), 5 | url('Simple-Line-Icons.woff') format('woff'), 6 | url('Simple-Line-Icons.ttf') format('truetype'), 7 | url('Simple-Line-Icons.svg#Simple-Line-Icons') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | /* Use the following CSS code if you want to use data attributes for inserting your icons */ 13 | [data-icon]:before { 14 | font-family: 'Simple-Line-Icons'; 15 | content: attr(data-icon); 16 | speak: none; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | } 24 | 25 | /* Use the following CSS code if you want to have a class per icon */ 26 | /* 27 | Instead of a list of all class selectors, 28 | you can use the generic selector below, but it's slower: 29 | [class*="icon-"] { 30 | */ 31 | .icon-user-female, .icon-user-follow, .icon-user-following, .icon-user-unfollow, .icon-trophy, .icon-screen-smartphone, .icon-screen-desktop, .icon-plane, .icon-notebook, .icon-moustache, .icon-mouse, .icon-magnet, .icon-energy, .icon-emoticon-smile, .icon-disc, .icon-cursor-move, .icon-crop, .icon-credit-card, .icon-chemistry, .icon-user, .icon-speedometer, .icon-social-youtube, .icon-social-twitter, .icon-social-tumblr, .icon-social-facebook, .icon-social-dropbox, .icon-social-dribbble, .icon-shield, .icon-screen-tablet, .icon-magic-wand, .icon-hourglass, .icon-graduation, .icon-ghost, .icon-game-controller, .icon-fire, .icon-eyeglasses, .icon-envelope-open, .icon-envelope-letter, .icon-bell, .icon-badge, .icon-anchor, .icon-wallet, .icon-vector, .icon-speech, .icon-puzzle, .icon-printer, .icon-present, .icon-playlist, .icon-pin, .icon-picture, .icon-map, .icon-layers, .icon-handbag, .icon-globe-alt, .icon-globe, .icon-frame, .icon-folder-alt, .icon-film, .icon-feed, .icon-earphones-alt, .icon-earphones, .icon-drop, .icon-drawer, .icon-docs, .icon-directions, .icon-direction, .icon-diamond, .icon-cup, .icon-compass, .icon-call-out, .icon-call-in, .icon-call-end, .icon-calculator, .icon-bubbles, .icon-briefcase, .icon-book-open, .icon-basket-loaded, .icon-basket, .icon-bag, .icon-action-undo, .icon-action-redo, .icon-wrench, .icon-umbrella, .icon-trash, .icon-tag, .icon-support, .icon-size-fullscreen, .icon-size-actual, .icon-shuffle, .icon-share-alt, .icon-share, .icon-rocket, .icon-question, .icon-pie-chart, .icon-pencil, .icon-note, .icon-music-tone-alt, .icon-music-tone, .icon-microphone, .icon-loop, .icon-logout, .icon-login, .icon-list, .icon-like, .icon-home, .icon-grid, .icon-graph, .icon-equalizer, .icon-dislike, .icon-cursor, .icon-control-start, .icon-control-rewind, .icon-control-play, .icon-control-pause, .icon-control-forward, .icon-control-end, .icon-calendar, .icon-bulb, .icon-bar-chart, .icon-arrow-up, .icon-arrow-right, .icon-arrow-left, .icon-arrow-down, .icon-ban, .icon-bubble, .icon-camcorder, .icon-camera, .icon-check, .icon-clock, .icon-close, .icon-cloud-download, .icon-cloud-upload, .icon-doc, .icon-envelope, .icon-eye, .icon-flag, .icon-folder, .icon-heart, .icon-info, .icon-key, .icon-link, .icon-lock, .icon-lock-open, .icon-magnifier, .icon-magnifier-add, .icon-magnifier-remove, .icon-paper-clip, .icon-paper-plane, .icon-plus, .icon-pointer, .icon-power, .icon-refresh, .icon-reload, .icon-settings, .icon-star, .icon-symbol-female, .icon-symbol-male, .icon-target, .icon-volume-1, .icon-volume-2, .icon-volume-off, .icon-users { 32 | font-family: 'Simple-Line-Icons'; 33 | speak: none; 34 | font-style: normal; 35 | font-weight: normal; 36 | font-variant: normal; 37 | text-transform: none; 38 | line-height: 1; 39 | -webkit-font-smoothing: antialiased; 40 | } 41 | .icon-user-female:before { 42 | content: "\e000"; 43 | } 44 | .icon-user-follow:before { 45 | content: "\e002"; 46 | } 47 | .icon-user-following:before { 48 | content: "\e003"; 49 | } 50 | .icon-user-unfollow:before { 51 | content: "\e004"; 52 | } 53 | .icon-trophy:before { 54 | content: "\e006"; 55 | } 56 | .icon-screen-smartphone:before { 57 | content: "\e010"; 58 | } 59 | .icon-screen-desktop:before { 60 | content: "\e011"; 61 | } 62 | .icon-plane:before { 63 | content: "\e012"; 64 | } 65 | .icon-notebook:before { 66 | content: "\e013"; 67 | } 68 | .icon-moustache:before { 69 | content: "\e014"; 70 | } 71 | .icon-mouse:before { 72 | content: "\e015"; 73 | } 74 | .icon-magnet:before { 75 | content: "\e016"; 76 | } 77 | .icon-energy:before { 78 | content: "\e020"; 79 | } 80 | .icon-emoticon-smile:before { 81 | content: "\e021"; 82 | } 83 | .icon-disc:before { 84 | content: "\e022"; 85 | } 86 | .icon-cursor-move:before { 87 | content: "\e023"; 88 | } 89 | .icon-crop:before { 90 | content: "\e024"; 91 | } 92 | .icon-credit-card:before { 93 | content: "\e025"; 94 | } 95 | .icon-chemistry:before { 96 | content: "\e026"; 97 | } 98 | .icon-user:before { 99 | content: "\e005"; 100 | } 101 | .icon-speedometer:before { 102 | content: "\e007"; 103 | } 104 | .icon-social-youtube:before { 105 | content: "\e008"; 106 | } 107 | .icon-social-twitter:before { 108 | content: "\e009"; 109 | } 110 | .icon-social-tumblr:before { 111 | content: "\e00a"; 112 | } 113 | .icon-social-facebook:before { 114 | content: "\e00b"; 115 | } 116 | .icon-social-dropbox:before { 117 | content: "\e00c"; 118 | } 119 | .icon-social-dribbble:before { 120 | content: "\e00d"; 121 | } 122 | .icon-shield:before { 123 | content: "\e00e"; 124 | } 125 | .icon-screen-tablet:before { 126 | content: "\e00f"; 127 | } 128 | .icon-magic-wand:before { 129 | content: "\e017"; 130 | } 131 | .icon-hourglass:before { 132 | content: "\e018"; 133 | } 134 | .icon-graduation:before { 135 | content: "\e019"; 136 | } 137 | .icon-ghost:before { 138 | content: "\e01a"; 139 | } 140 | .icon-game-controller:before { 141 | content: "\e01b"; 142 | } 143 | .icon-fire:before { 144 | content: "\e01c"; 145 | } 146 | .icon-eyeglasses:before { 147 | content: "\e01d"; 148 | } 149 | .icon-envelope-open:before { 150 | content: "\e01e"; 151 | } 152 | .icon-envelope-letter:before { 153 | content: "\e01f"; 154 | } 155 | .icon-bell:before { 156 | content: "\e027"; 157 | } 158 | .icon-badge:before { 159 | content: "\e028"; 160 | } 161 | .icon-anchor:before { 162 | content: "\e029"; 163 | } 164 | .icon-wallet:before { 165 | content: "\e02a"; 166 | } 167 | .icon-vector:before { 168 | content: "\e02b"; 169 | } 170 | .icon-speech:before { 171 | content: "\e02c"; 172 | } 173 | .icon-puzzle:before { 174 | content: "\e02d"; 175 | } 176 | .icon-printer:before { 177 | content: "\e02e"; 178 | } 179 | .icon-present:before { 180 | content: "\e02f"; 181 | } 182 | .icon-playlist:before { 183 | content: "\e030"; 184 | } 185 | .icon-pin:before { 186 | content: "\e031"; 187 | } 188 | .icon-picture:before { 189 | content: "\e032"; 190 | } 191 | .icon-map:before { 192 | content: "\e033"; 193 | } 194 | .icon-layers:before { 195 | content: "\e034"; 196 | } 197 | .icon-handbag:before { 198 | content: "\e035"; 199 | } 200 | .icon-globe-alt:before { 201 | content: "\e036"; 202 | } 203 | .icon-globe:before { 204 | content: "\e037"; 205 | } 206 | .icon-frame:before { 207 | content: "\e038"; 208 | } 209 | .icon-folder-alt:before { 210 | content: "\e039"; 211 | } 212 | .icon-film:before { 213 | content: "\e03a"; 214 | } 215 | .icon-feed:before { 216 | content: "\e03b"; 217 | } 218 | .icon-earphones-alt:before { 219 | content: "\e03c"; 220 | } 221 | .icon-earphones:before { 222 | content: "\e03d"; 223 | } 224 | .icon-drop:before { 225 | content: "\e03e"; 226 | } 227 | .icon-drawer:before { 228 | content: "\e03f"; 229 | } 230 | .icon-docs:before { 231 | content: "\e040"; 232 | } 233 | .icon-directions:before { 234 | content: "\e041"; 235 | } 236 | .icon-direction:before { 237 | content: "\e042"; 238 | } 239 | .icon-diamond:before { 240 | content: "\e043"; 241 | } 242 | .icon-cup:before { 243 | content: "\e044"; 244 | } 245 | .icon-compass:before { 246 | content: "\e045"; 247 | } 248 | .icon-call-out:before { 249 | content: "\e046"; 250 | } 251 | .icon-call-in:before { 252 | content: "\e047"; 253 | } 254 | .icon-call-end:before { 255 | content: "\e048"; 256 | } 257 | .icon-calculator:before { 258 | content: "\e049"; 259 | } 260 | .icon-bubbles:before { 261 | content: "\e04a"; 262 | } 263 | .icon-briefcase:before { 264 | content: "\e04b"; 265 | } 266 | .icon-book-open:before { 267 | content: "\e04c"; 268 | } 269 | .icon-basket-loaded:before { 270 | content: "\e04d"; 271 | } 272 | .icon-basket:before { 273 | content: "\e04e"; 274 | } 275 | .icon-bag:before { 276 | content: "\e04f"; 277 | } 278 | .icon-action-undo:before { 279 | content: "\e050"; 280 | } 281 | .icon-action-redo:before { 282 | content: "\e051"; 283 | } 284 | .icon-wrench:before { 285 | content: "\e052"; 286 | } 287 | .icon-umbrella:before { 288 | content: "\e053"; 289 | } 290 | .icon-trash:before { 291 | content: "\e054"; 292 | } 293 | .icon-tag:before { 294 | content: "\e055"; 295 | } 296 | .icon-support:before { 297 | content: "\e056"; 298 | } 299 | .icon-size-fullscreen:before { 300 | content: "\e057"; 301 | } 302 | .icon-size-actual:before { 303 | content: "\e058"; 304 | } 305 | .icon-shuffle:before { 306 | content: "\e059"; 307 | } 308 | .icon-share-alt:before { 309 | content: "\e05a"; 310 | } 311 | .icon-share:before { 312 | content: "\e05b"; 313 | } 314 | .icon-rocket:before { 315 | content: "\e05c"; 316 | } 317 | .icon-question:before { 318 | content: "\e05d"; 319 | } 320 | .icon-pie-chart:before { 321 | content: "\e05e"; 322 | } 323 | .icon-pencil:before { 324 | content: "\e05f"; 325 | } 326 | .icon-note:before { 327 | content: "\e060"; 328 | } 329 | .icon-music-tone-alt:before { 330 | content: "\e061"; 331 | } 332 | .icon-music-tone:before { 333 | content: "\e062"; 334 | } 335 | .icon-microphone:before { 336 | content: "\e063"; 337 | } 338 | .icon-loop:before { 339 | content: "\e064"; 340 | } 341 | .icon-logout:before { 342 | content: "\e065"; 343 | } 344 | .icon-login:before { 345 | content: "\e066"; 346 | } 347 | .icon-list:before { 348 | content: "\e067"; 349 | } 350 | .icon-like:before { 351 | content: "\e068"; 352 | } 353 | .icon-home:before { 354 | content: "\e069"; 355 | } 356 | .icon-grid:before { 357 | content: "\e06a"; 358 | } 359 | .icon-graph:before { 360 | content: "\e06b"; 361 | } 362 | .icon-equalizer:before { 363 | content: "\e06c"; 364 | } 365 | .icon-dislike:before { 366 | content: "\e06d"; 367 | } 368 | .icon-cursor:before { 369 | content: "\e06e"; 370 | } 371 | .icon-control-start:before { 372 | content: "\e06f"; 373 | } 374 | .icon-control-rewind:before { 375 | content: "\e070"; 376 | } 377 | .icon-control-play:before { 378 | content: "\e071"; 379 | } 380 | .icon-control-pause:before { 381 | content: "\e072"; 382 | } 383 | .icon-control-forward:before { 384 | content: "\e073"; 385 | } 386 | .icon-control-end:before { 387 | content: "\e074"; 388 | } 389 | .icon-calendar:before { 390 | content: "\e075"; 391 | } 392 | .icon-bulb:before { 393 | content: "\e076"; 394 | } 395 | .icon-bar-chart:before { 396 | content: "\e077"; 397 | } 398 | .icon-arrow-up:before { 399 | content: "\e078"; 400 | } 401 | .icon-arrow-right:before { 402 | content: "\e079"; 403 | } 404 | .icon-arrow-left:before { 405 | content: "\e07a"; 406 | } 407 | .icon-arrow-down:before { 408 | content: "\e07b"; 409 | } 410 | .icon-ban:before { 411 | content: "\e07c"; 412 | } 413 | .icon-bubble:before { 414 | content: "\e07d"; 415 | } 416 | .icon-camcorder:before { 417 | content: "\e07e"; 418 | } 419 | .icon-camera:before { 420 | content: "\e07f"; 421 | } 422 | .icon-check:before { 423 | content: "\e080"; 424 | } 425 | .icon-clock:before { 426 | content: "\e081"; 427 | } 428 | .icon-close:before { 429 | content: "\e082"; 430 | } 431 | .icon-cloud-download:before { 432 | content: "\e083"; 433 | } 434 | .icon-cloud-upload:before { 435 | content: "\e084"; 436 | } 437 | .icon-doc:before { 438 | content: "\e085"; 439 | } 440 | .icon-envelope:before { 441 | content: "\e086"; 442 | } 443 | .icon-eye:before { 444 | content: "\e087"; 445 | } 446 | .icon-flag:before { 447 | content: "\e088"; 448 | } 449 | .icon-folder:before { 450 | content: "\e089"; 451 | } 452 | .icon-heart:before { 453 | content: "\e08a"; 454 | } 455 | .icon-info:before { 456 | content: "\e08b"; 457 | } 458 | .icon-key:before { 459 | content: "\e08c"; 460 | } 461 | .icon-link:before { 462 | content: "\e08d"; 463 | } 464 | .icon-lock:before { 465 | content: "\e08e"; 466 | } 467 | .icon-lock-open:before { 468 | content: "\e08f"; 469 | } 470 | .icon-magnifier:before { 471 | content: "\e090"; 472 | } 473 | .icon-magnifier-add:before { 474 | content: "\e091"; 475 | } 476 | .icon-magnifier-remove:before { 477 | content: "\e092"; 478 | } 479 | .icon-paper-clip:before { 480 | content: "\e093"; 481 | } 482 | .icon-paper-plane:before { 483 | content: "\e094"; 484 | } 485 | .icon-plus:before { 486 | content: "\e095"; 487 | } 488 | .icon-pointer:before { 489 | content: "\e096"; 490 | } 491 | .icon-power:before { 492 | content: "\e097"; 493 | } 494 | .icon-refresh:before { 495 | content: "\e098"; 496 | } 497 | .icon-reload:before { 498 | content: "\e099"; 499 | } 500 | .icon-settings:before { 501 | content: "\e09a"; 502 | } 503 | .icon-star:before { 504 | content: "\e09b"; 505 | } 506 | .icon-symbol-female:before { 507 | content: "\e09c"; 508 | } 509 | .icon-symbol-male:before { 510 | content: "\e09d"; 511 | } 512 | .icon-target:before { 513 | content: "\e09e"; 514 | } 515 | .icon-volume-1:before { 516 | content: "\e09f"; 517 | } 518 | .icon-volume-2:before { 519 | content: "\e0a0"; 520 | } 521 | .icon-volume-off:before { 522 | content: "\e0a1"; 523 | } 524 | .icon-users:before { 525 | content: "\e001"; 526 | } -------------------------------------------------------------------------------- /icons/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * PRESENTATION STYLESHEET 3 | * ---------------------------------------------------------------------------- 4 | */ 5 | 6 | /* 7 | 8 | 9 | PLEASE NOTE: 10 | ============ 11 | 12 | THIS FILE IS NOT PART OF THE *REQUIRED FONT ICON FILES* 13 | THIS FILE IS USED TO STYLE THE ICON DEMO TEMPLATE FOUND AT DEMO.HTML 14 | 15 | 16 | 17 | */ 18 | 19 | *, 20 | *:before, 21 | *:after { 22 | border: 0 none; 23 | margin: 0; 24 | padding: 0; 25 | font-size: 100%; 26 | 27 | -webkit-box-sizing: border-box; 28 | -moz-box-sizing: border-box; 29 | box-sizing: border-box; 30 | } 31 | 32 | ::-webkit-scrollbar { 33 | width: 12px; 34 | height: 12px; 35 | } 36 | ::-webkit-scrollbar-track { 37 | background-color: rgba(255, 255, 255, 0.1); 38 | -webkit-border-radius: 5px; 39 | } 40 | ::-webkit-scrollbar-thumb { 41 | background-color: rgba(0, 0, 0, 0.4); 42 | -webkit-border-radius: 6px; 43 | } 44 | ::-webkit-scrollbar-thumb:hover { 45 | background-color: rgba(0, 0, 0, 0.6); 46 | } 47 | 48 | section, 49 | header, 50 | footer { 51 | display: block; 52 | position: relative; 53 | } 54 | 55 | body { 56 | background-color: #fff; 57 | color: #0e8a65; 58 | font-family: "Helvetica Neue", Helvetica, "DejaVu Sans", Arial, sans-serif; 59 | line-height: 1.5; 60 | font-size: 1em; 61 | } 62 | 63 | 64 | section:after, 65 | .masthead:after { 66 | content: ''; 67 | pointer-events: none; 68 | position: absolute; 69 | bottom: -1.5em; 70 | left: 50%; 71 | z-index: 10; 72 | width: 3em; 73 | height: 3em; 74 | 75 | background: inherit; 76 | -webkit-transform: translateX(-50%) rotate(45deg); 77 | transform: translateX(-50%) rotate(45deg); 78 | } 79 | 80 | section header { 81 | position: relative; 82 | } 83 | 84 | section header:after { 85 | background-color: transparent; 86 | border-bottom-width: 1px; 87 | border-bottom-style: solid; 88 | border-bottom-color: inherit; 89 | content: ''; 90 | position: absolute; 91 | left: 40%; 92 | bottom: 0; 93 | width: 20%; 94 | height: 0; 95 | } 96 | 97 | .masthead { 98 | background-color: #fff; 99 | padding: 3em; 100 | position: relative; 101 | text-align: center; 102 | } 103 | 104 | .colophon { 105 | padding: 4.5em 3em; 106 | position: relative; 107 | } 108 | .colophon .group { 109 | padding: 3em; 110 | text-align: center; 111 | } 112 | 113 | .masthead hgroup, 114 | .colophon .group { 115 | margin: auto; 116 | padding: 0 10%; 117 | position: absolute; 118 | top: 50%; 119 | left: 0%; 120 | right: 0%; 121 | -webkit-transform: translate(0%,-50%); 122 | -ms-transform: translate(0%,-50%); 123 | transform: translate(0%,-50%); 124 | } 125 | 126 | .masthead h1 { 127 | font-size: 2.25em; 128 | font-weight: bolder; 129 | line-height: 1.5; 130 | margin-bottom: 1em; 131 | text-transform: uppercase; 132 | } 133 | 134 | .masthead h2 { 135 | font-size: 1em; 136 | font-weight: lighter; 137 | letter-spacing: 6px; 138 | text-transform: uppercase; 139 | } 140 | 141 | .glyphs, 142 | .classes { 143 | margin-left: -1.5em; 144 | padding: 4.5em 3em; 145 | } 146 | 147 | .glyphs header, 148 | .classes header { 149 | margin-bottom: 2.25em; 150 | padding-bottom: 2.25em; 151 | text-align: center; 152 | text-transform: uppercase; 153 | } 154 | 155 | .glyphs h1, 156 | .classes h1 { 157 | font-size: 2.25em; 158 | font-weight: bolder; 159 | line-height: 1.5; 160 | } 161 | 162 | .glyphs h2, 163 | .classes h2 { 164 | font-size: 1em; 165 | font-weight: normal; 166 | letter-spacing: 3px; 167 | text-transform: uppercase; 168 | } 169 | 170 | h2 code { 171 | text-transform: lowercase; 172 | } 173 | 174 | 175 | .glyphs { 176 | background-color: #74f3c8; 177 | color: #0e8a65; 178 | } 179 | 180 | .classes { 181 | background-color: #33383e; 182 | color: #fff; 183 | } 184 | 185 | .glyph { 186 | cursor: pointer; 187 | display: inline-block; 188 | font-size: 1em; 189 | margin: 0 -0.21em 3em 0; 190 | padding: 1.5em 0 0 1.5em; 191 | text-align: center; 192 | width: 50%; 193 | } 194 | 195 | .glyph-item { 196 | border-radius: 8px; 197 | display: inline-block; 198 | width: 1.5em; 199 | height: 1.5em; 200 | line-height: 1; 201 | padding: 0.25em; 202 | position: relative; 203 | } 204 | .glyph:hover .glyph-item { 205 | background-color: #0e8a65; 206 | color: #fff; 207 | } 208 | 209 | .mega { 210 | font-size: 3em; 211 | } 212 | 213 | a, 214 | a:visited { 215 | color: #74f3c8; 216 | text-decoration: none; 217 | } 218 | 219 | a:hover, 220 | a:focus { 221 | color: #0e8a65; 222 | } 223 | 224 | .item-box { 225 | display: inline-block; 226 | font-family: consolas, monospace; 227 | font-size: 1.2em; 228 | margin: 0 -0.22em 1em 0; 229 | padding-left: 1em; 230 | width: 100%; 231 | 232 | } 233 | 234 | .item { 235 | background-color: #fff; 236 | color: #33383e; 237 | border-radius: 8px; 238 | display: inline-block; 239 | padding: 0.5em; 240 | width: 100%; 241 | } 242 | 243 | 244 | .colophon .group { 245 | font-size: 1.5em; 246 | text-transform: uppercase; 247 | } 248 | 249 | .group em { 250 | font-weight: bold; 251 | font-style: normal; 252 | } 253 | 254 | 255 | #wH { 256 | width: 0; 257 | position: absolute; 258 | top: 0; 259 | bottom: 0; 260 | left: 0; 261 | } 262 | 263 | 264 | 265 | @media only screen and (min-width: 768px) { 266 | section:after, 267 | .masthead:after { 268 | bottom: -3em; 269 | width: 6em; 270 | height: 6em; 271 | } 272 | 273 | section header { 274 | position: relative; 275 | } 276 | 277 | .masthead { 278 | padding: 6em; 279 | } 280 | 281 | .colophon { 282 | padding: 9em 6em; 283 | } 284 | 285 | .masthead h1 { 286 | font-size: 4.5em; 287 | } 288 | 289 | .glyphs, 290 | .classes { 291 | padding: 9em 6em; 292 | } 293 | 294 | .glyphs header, 295 | .classes header { 296 | margin-bottom: 4.5em; 297 | padding-bottom: 4.5em; 298 | } 299 | 300 | .glyphs h1, 301 | .classes h1 { 302 | font-size: 4.5em; 303 | } 304 | 305 | 306 | .mega { 307 | font-size: 6em; 308 | } 309 | 310 | 311 | .glyph { 312 | width: 16.66666666666667%; 313 | } 314 | 315 | .item-box { 316 | width: 33.333%; 317 | } 318 | 319 | .colophon .group { 320 | padding: 6em; 321 | } 322 | } 323 | 324 | -------------------------------------------------------------------------------- /lib/base/_desktop-styles.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Desktop Custom Styles 3 | // ========================================================================== 4 | 5 | // your styles go here... -------------------------------------------------------------------------------- /lib/base/_mobile-styles.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Mobile Custom Styles 3 | // ========================================================================== 4 | 5 | // your styles go here... -------------------------------------------------------------------------------- /lib/base/_tablet-styles.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Tablet Custom Styles 3 | // ========================================================================== 4 | 5 | // your styles go here... -------------------------------------------------------------------------------- /lib/base/base/_blockquotes.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Blockquotes 3 | // ========================================================================== 4 | blockquote { 5 | .font-size(22); 6 | .line-height(32); 7 | color: #434343; 8 | margin: 1em 0; 9 | &:extend(.em); 10 | p { 11 | margin: 1em 0; 12 | } 13 | } 14 | cite { 15 | color: #434343; 16 | font-style: normal; 17 | &:extend(.font-normal); 18 | .font-size(16); 19 | line-height: normal; 20 | } 21 | 22 | q { 23 | &:extend(.em); 24 | quotes: none; 25 | } 26 | q:before, q:after { 27 | content: ''; 28 | content: none; 29 | } -------------------------------------------------------------------------------- /lib/base/base/_buttons.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Custom Buttons 3 | // ========================================================================== 4 | .button { 5 | border: 0; 6 | padding: 1em 3em; 7 | background-color: @default-button-color; 8 | color: #fff; 9 | text-decoration: none; 10 | &:extend(.text-center); 11 | &:extend(.inline-block); 12 | position: relative; 13 | } 14 | .button:hover { 15 | background-color: @default-button-hover-color; 16 | } 17 | .button:active { 18 | top: 1px; 19 | } 20 | 21 | .grey-button { 22 | background-color: #eee; 23 | color: #434343; 24 | } 25 | .grey-button:hover { 26 | background-color: #f1f1f1; 27 | } 28 | 29 | .button[disabled], 30 | .button.disabled { 31 | color: #999; 32 | background-color: #f1f1f1; 33 | } 34 | 35 | .button-unstyled { 36 | .font-size(@default-font-size); 37 | color: @default-link-color; 38 | text-decoration: underline; 39 | border: 0; 40 | background: transparent; 41 | height: auto; 42 | padding: 0; 43 | cursor: pointer; 44 | outline: 0; 45 | &:hover { 46 | text-decoration: none; 47 | } // end hover 48 | } 49 | .button-unstyled[disabled], 50 | .button-unstyled.disabled { 51 | text-decoration: none; 52 | color: #999; 53 | background-color: #ccc; 54 | } -------------------------------------------------------------------------------- /lib/base/base/_code.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Code 3 | // ========================================================================== 4 | code, kbd, pre, samp { 5 | word-wrap: break-word; 6 | font-family: @default-code-font-family; 7 | .font-size(13); 8 | line-height: normal; 9 | font-weight: normal; 10 | background-color: #f1f1f1; 11 | padding: 10px; 12 | } 13 | code { 14 | color: #111; 15 | } -------------------------------------------------------------------------------- /lib/base/base/_forms.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Forms 3 | // ========================================================================== 4 | fieldset { 5 | border: 0; 6 | padding: 0; 7 | } 8 | legend { 9 | border: 0; 10 | padding: 0; 11 | white-space: normal; 12 | *margin-left: -7px; 13 | &:extend(.font-normal); 14 | } 15 | label { 16 | margin: 0; 17 | cursor: pointer; 18 | } 19 | 20 | button, input, select, textarea { 21 | font-size: 100%; 22 | vertical-align: baseline; 23 | *vertical-align: middle; 24 | } 25 | 26 | input[type=text], 27 | input[type=password], 28 | input[type=email], 29 | input[type=search], 30 | input[type=tel], 31 | textarea { 32 | padding: 5px; 33 | -webkit-appearance: none; // Remove Default Browser Behaviour for Safari 34 | -moz-appearance: none; // Remove Default Browser Behaviour for Firefox 35 | &:extend(.font-normal); 36 | line-height: normal; 37 | background-color: #fff; 38 | border: 1px solid #ccc; 39 | color: #111; 40 | } 41 | input[type=checkbox], 42 | input[type=radio] { 43 | cursor: pointer; 44 | box-sizing: border-box; 45 | line-height: normal; 46 | margin: 0; 47 | padding: 0; 48 | *height: 13px; 49 | *width: 13px; 50 | } 51 | 52 | .checkbox { 53 | &:extend(.block); 54 | margin: 0.2em 0; 55 | input[type=checkbox], 56 | input[type=radio] { 57 | margin-top: 0.05em; 58 | &:extend(.left); 59 | } 60 | label { 61 | padding-left: 5px; 62 | overflow: hidden; 63 | display: table; 64 | *zoom: 1; 65 | } 66 | } 67 | 68 | button, input { line-height: normal; } 69 | button, select { text-transform: none; } 70 | 71 | textarea { 72 | overflow: auto; 73 | vertical-align: top; 74 | resize: none; 75 | } 76 | 77 | // Buttons 78 | button, 79 | html input[type="button"], 80 | input[type="reset"], 81 | input[type="submit"] { 82 | cursor: pointer; 83 | -webkit-appearance: button; 84 | *overflow: visible; 85 | } 86 | button[disabled], 87 | html input[disabled] { cursor: default; } 88 | 89 | input[type="search"] { 90 | -webkit-appearance: textfield; 91 | -moz-box-sizing: content-box; 92 | -webkit-box-sizing: content-box; 93 | box-sizing: content-box; 94 | } 95 | input[type="search"]::-webkit-search-cancel-button, 96 | input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 97 | button::-moz-focus-inner, 98 | input::-moz-focus-inner { 99 | border: 0; 100 | padding: 0; 101 | } -------------------------------------------------------------------------------- /lib/base/base/_global.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Global Typography 3 | // ========================================================================== 4 | body { 5 | font-family: @default-font-family; 6 | .font-size(@default-font-size); 7 | .line-height(@default-line-height); 8 | color: @default-font-color; 9 | background-color: #fff; 10 | -webkit-text-size-adjust: 100%; 11 | -ms-text-size-adjust: 100%; 12 | } 13 | 14 | // Clearfix 15 | .clear:before, .clear:after { 16 | content: ""; 17 | display: table; 18 | } 19 | .clear:after { clear: both; } 20 | .clear { zoom: 1; } // IE7 21 | 22 | // Font Style 23 | b, strong, .strong { &:extend(.font-bold); } 24 | i, em, .em { font-style: italic; } 25 | 26 | // Links 27 | a { color: @default-link-color; } 28 | a:hover { text-decoration: none; } 29 | a:focus { outline: thin dotted; } 30 | a:active, a:hover { outline: 0; } 31 | 32 | // Paragraph and Small 33 | p { margin: 0 0 1.6em 0; } 34 | pre { margin: 1em 0; } 35 | ul + p, ul + pre, ol + p, ol + pre { margin-top: 0; } 36 | 37 | // Abbreviations 38 | abbr[title] { border-bottom: 1px dotted; } 39 | 40 | // Mark 41 | mark { 42 | background: #ff0; 43 | color: #111; 44 | } 45 | 46 | // Audio 47 | audio, canvas, video { 48 | &:extend(.inline-block); 49 | } 50 | audio:not([controls]) { 51 | &:extend(.none); 52 | height: 0; 53 | } 54 | 55 | // Small, Sub and Sup 56 | small { font-size:80%; } 57 | sub, sup { 58 | font-size: 75%; 59 | line-height: 0; 60 | position: relative; 61 | vertical-align: baseline; 62 | } 63 | sup { top: -0.5em; } 64 | sub { bottom: -0.25em; } 65 | 66 | // Definition 67 | dfn { &:extend(.em); } 68 | 69 | // Images 70 | img { 71 | border: 0; 72 | -ms-interpolation-mode: bicubic; 73 | } 74 | svg:not(:root) { overflow: hidden; } 75 | figure { margin: 0; } 76 | 77 | // Horizontal Rule 78 | hr { 79 | border: 0; 80 | background: none; 81 | outline: 0; 82 | background-color: #ddd; 83 | margin: 2em 0; 84 | *margin: 1em 0; 85 | -moz-box-sizing: content-box; 86 | box-sizing: content-box; 87 | height: 1px; 88 | } 89 | 90 | // Headings 91 | h1, h2, h3, h4, h5, h6 { 92 | line-height: normal; 93 | font-weight: normal; 94 | margin: 0 0 0.33em 0; 95 | } 96 | h1, .h1 { 97 | .font-size(@h1); 98 | } 99 | h2, .h2 { 100 | .font-size(@h2); 101 | } 102 | h3, .h3 { 103 | .font-size(@h3); 104 | } 105 | h4, .h4 { 106 | .font-size(@h4); 107 | } 108 | h5, .h5 { 109 | .font-size(@h5); 110 | } 111 | h6, .h6 { 112 | .font-size(@h6); 113 | } 114 | // Remove Heading Styling 115 | .no-style-heading { 116 | &:extend(.no-margin); 117 | font-size: 100%; 118 | } -------------------------------------------------------------------------------- /lib/base/base/_grid.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Grid 3 | // ========================================================================== 4 | .section { position: relative; } 5 | 6 | .container { 7 | max-width: @desktop-container; 8 | margin-left: auto; 9 | margin-right: auto; 10 | padding-left: 10px; 11 | padding-right: 10px; 12 | } 13 | .container-full { 14 | max-width: @desktop-container; 15 | margin-left: auto; 16 | margin-right: auto; 17 | } 18 | 19 | // Columns 20 | .col { 21 | float: left; 22 | padding-left: 10px; 23 | padding-right: 10px; 24 | } 25 | [class*="pull-"], [class*="push-"] { position: relative; } 26 | 27 | .no-gutter { 28 | padding-left: 0; 29 | padding-right: 0; 30 | } 31 | 32 | .col-1 { 33 | width: 8.33333%; // Fallback if calc() is not supported 34 | width: calc(~'100% / 12 * 1'); 35 | width: -webkit-calc(~'100% / 12 * 1'); 36 | width: -moz-calc(~'100% / 12 * 1'); 37 | } 38 | .col-2 { 39 | width: 16.66667%; // Fallback if calc() is not supported 40 | width: calc(~'100% / 12 * 2'); 41 | width: -webkit-calc(~'100% / 12 * 2'); 42 | width: -moz-calc(~'100% / 12 * 2'); 43 | } 44 | .col-3 { 45 | width: 25%; // Fallback if calc() is not supported 46 | width: calc(~'100% / 12 * 3'); 47 | width: -webkit-calc(~'100% / 12 * 3'); 48 | width: -moz-calc(~'100% / 12 * 3'); 49 | } 50 | .col-4 { 51 | width: 33.33333%; // Fallback if calc() is not supported 52 | width: calc(~'100% / 12 * 4'); 53 | width: -webkit-calc(~'100% / 12 * 4'); 54 | width: -moz-calc(~'100% / 12 * 4'); 55 | } 56 | .col-5 { 57 | width: 41.66665%; // Fallback if calc() is not supported 58 | width: calc(~'100% / 12 * 5'); 59 | width: -webkit-calc(~'100% / 12 * 5'); 60 | width: -moz-calc(~'100% / 12 * 5'); 61 | } 62 | .col-6 { 63 | width: 50%; // Fallback if calc() is not supported 64 | width: calc(~'100% / 12 * 6'); 65 | width: -webkit-calc(~'100% / 12 * 6'); 66 | width: -moz-calc(~'100% / 12 * 6'); 67 | } 68 | .col-7 { 69 | width: 58.33333%; // Fallback if calc() is not supported 70 | width: calc(~'100% / 12 * 7'); 71 | width: -webkit-calc(~'100% / 12 * 7'); 72 | width: -moz-calc(~'100% / 12 * 7'); 73 | } 74 | .col-8 { 75 | width: 66.66666%; // Fallback if calc() is not supported 76 | width: calc(~'100% / 12 * 8'); 77 | width: -webkit-calc(~'100% / 12 * 8'); 78 | width: -moz-calc(~'100% / 12 * 8'); 79 | } 80 | .col-9 { 81 | width: 75%; // Fallback if calc() is not supported 82 | width: calc(~'100% / 12 * 9'); 83 | width: -webkit-calc(~'100% / 12 * 9'); 84 | width: -moz-calc(~'100% / 12 * 9'); 85 | } 86 | .col-10 { 87 | width: 83.33333%; // Fallback if calc() is not supported 88 | width: calc(~'100% / 12 * 10'); 89 | width: -webkit-calc(~'100% / 12 * 10'); 90 | width: -moz-calc(~'100% / 12 * 10'); 91 | } 92 | .col-11 { 93 | width: 91.66666%; // Fallback if calc() is not supported 94 | width: calc(~'100% / 12 * 11'); 95 | width: -webkit-calc(~'100% / 12 * 11'); 96 | width: -moz-calc(~'100% / 12 * 11'); 97 | } 98 | .col-12 { width: 100%; } 99 | 100 | .col-1-2 { &:extend(.col-6); } 101 | .col-1-3 { &:extend(.col-4); } 102 | .col-1-4 { &:extend(.col-3); } 103 | .col-3-4 { &:extend(.col-9); } 104 | 105 | // Push/Pull 106 | .push-1 { 107 | left: 8.33333%; // Fallback if calc() is not supported 108 | left: calc(~'100% / 12 * 1'); 109 | left: -webkit-calc(~'100% / 12 * 1'); 110 | left: -moz-calc(~'100% / 12 * 1'); 111 | } 112 | .pull-1 { 113 | left: -8.33333%; // Fallback if calc() is not supported 114 | left: calc(~'-100% / 12 * 1'); 115 | left: -webkit-calc(~'-100% / 12 * 1'); 116 | left: -moz-calc(~'-100% / 12 * 1'); 117 | } 118 | .push-2 { 119 | left: 16.66667%; // Fallback if calc() is not supported 120 | left: calc(~'100% / 12 * 2'); 121 | left: -webkit-calc(~'100% / 12 * 2'); 122 | left: -moz-calc(~'100% / 12 * 2'); 123 | } 124 | .pull-2 { 125 | left: -16.66667%; // Fallback if calc() is not supported 126 | left: calc(~'-100% / 12 * 2'); 127 | left: -webkit-calc(~'-100% / 12 * 2'); 128 | left: -moz-calc(~'-100% / 12 * 2'); 129 | } 130 | .push-3 { 131 | left: 25%; // Fallback if calc() is not supported 132 | left: calc(~'100% / 12 * 3'); 133 | left: -webkit-calc(~'100% / 12 * 3'); 134 | left: -moz-calc(~'100% / 12 * 3'); 135 | } 136 | .pull-3 { 137 | left: -25%; // Fallback if calc() is not supported 138 | left: calc(~'-100% / 12 * 3'); 139 | left: -webkit-calc(~'-100% / 12 * 3'); 140 | left: -moz-calc(~'-100% / 12 * 3'); 141 | } 142 | .push-4 { 143 | left: 33.33333%; // Fallback if calc() is not supported 144 | left: calc(~'100% / 12 * 4'); 145 | left: -webkit-calc(~'100% / 12 * 4'); 146 | left: -moz-calc(~'100% / 12 * 4'); 147 | } 148 | .pull-4 { 149 | left: -33.33333%; // Fallback if calc() is not supported 150 | left: calc(~'-100% / 12 * 4'); 151 | left: -webkit-calc(~'-100% / 12 * 4'); 152 | left: -moz-calc(~'-100% / 12 * 4'); 153 | } 154 | .push-5 { 155 | left: 41.66665%; // Fallback if calc() is not supported 156 | left: calc(~'100% / 12 * 5'); 157 | left: -webkit-calc(~'100% / 12 * 5'); 158 | left: -moz-calc(~'100% / 12 * 5'); 159 | } 160 | .pull-5 { 161 | left: -41.66665%; // Fallback if calc() is not supported 162 | left: calc(~'-100% / 12 * 5'); 163 | left: -webkit-calc(~'-100% / 12 * 5'); 164 | left: -moz-calc(~'-100% / 12 * 5'); 165 | } 166 | .push-6 { 167 | left: 50%; // Fallback if calc() is not supported 168 | left: calc(~'100% / 12 * 6'); 169 | left: -webkit-calc(~'100% / 12 * 6'); 170 | left: -moz-calc(~'100% / 12 * 6'); 171 | } 172 | .pull-6 { 173 | left: -50%; // Fallback if calc() is not supported 174 | left: calc(~'-100% / 12 * 6'); 175 | left: -webkit-calc(~'-100% / 12 * 6'); 176 | left: -moz-calc(~'-100% / 12 * 6'); 177 | } 178 | .push-7 { 179 | left: 58.33333%; // Fallback if calc() is not supported 180 | left: calc(~'100% / 12 * 7'); 181 | left: -webkit-calc(~'100% / 12 * 7'); 182 | left: -moz-calc(~'100% / 12 * 7'); 183 | } 184 | .pull-7 { 185 | left: -58.33333%; // Fallback if calc() is not supported 186 | left: calc(~'-100% / 12 * 7'); 187 | left: -webkit-calc(~'-100% / 12 * 7'); 188 | left: -moz-calc(~'-100% / 12 * 7'); 189 | } 190 | .push-8 { 191 | left: 66.66666%; // Fallback if calc() is not supported 192 | left: calc(~'100% / 12 * 8'); 193 | left: -webkit-calc(~'100% / 12 * 8'); 194 | left: -moz-calc(~'100% / 12 * 8'); 195 | } 196 | .pull-8 { 197 | left: -66.66666%; // Fallback if calc() is not supported 198 | left: calc(~'-100% / 12 * 8'); 199 | left: -webkit-calc(~'-100% / 12 * 8'); 200 | left: -moz-calc(~'-100% / 12 * 8'); 201 | } 202 | .push-9 { 203 | left: 75%; // Fallback if calc() is not supported 204 | left: calc(~'100% / 12 * 9'); 205 | left: -webkit-calc(~'100% / 12 * 9'); 206 | left: -moz-calc(~'100% / 12 * 9'); 207 | } 208 | .pull-9 { 209 | left: -75%; // Fallback if calc() is not supported 210 | left: calc(~'-100% / 12 * 9'); 211 | left: -webkit-calc(~'-100% / 12 * 9'); 212 | left: -moz-calc(~'-100% / 12 * 9'); 213 | } 214 | .push-10 { 215 | left: 83.33333%; // Fallback if calc() is not supported 216 | left: calc(~'100% / 12 * 10'); 217 | left: -webkit-calc(~'100% / 12 * 10'); 218 | left: -moz-calc(~'100% / 12 * 10'); 219 | } 220 | .pull-10 { 221 | left: -83.33333%; // Fallback if calc() is not supported 222 | left: calc(~'-100% / 12 * 10'); 223 | left: -webkit-calc(~'-100% / 12 * 10'); 224 | left: -moz-calc(~'-100% / 12 * 10'); 225 | } 226 | .push-11 { 227 | left: 91.66666%; // Fallback if calc() is not supported 228 | left: calc(~'100% / 12 * 11'); 229 | left: -webkit-calc(~'100% / 12 * 11'); 230 | left: -moz-calc(~'100% / 12 * 11'); 231 | } 232 | .pull-11 { 233 | left: -91.66666%; // Fallback if calc() is not supported 234 | left: calc(~'-100% / 12 * 11'); 235 | left: -webkit-calc(~'-100% / 12 * 11'); 236 | left: -moz-calc(~'-100% / 12 * 11'); 237 | } 238 | 239 | .push-1-2 { &:extend(.push-6); } 240 | .pull-1-2 { &:extend(.pull-6); } 241 | .push-1-3 { &:extend(.push-4); } 242 | .pull-1-3 { &:extend(.pull-4); } 243 | .push-1-4 { &:extend(.push-3); } 244 | .pull-1-4 { &:extend(.pull-3); } 245 | .push-3-4 { &:extend(.push-9); } 246 | .pull-3-4 { &:extend(.pull-9); } 247 | 248 | // Rows 249 | .row { 250 | padding-top: 1em; 251 | padding-bottom: 1em; 252 | } 253 | 254 | .no-desktop { display: none; } 255 | 256 | // Remove Margin / Padding 257 | .no-margin { margin: 0; } 258 | .no-padding { padding: 0; } 259 | 260 | @import "../_desktop-styles.import.less"; // Import Custom Desktop Styles -------------------------------------------------------------------------------- /lib/base/base/_helpers.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – CSS Helpers / Extras 3 | // ========================================================================== 4 | 5 | // Floats 6 | .left { float: left; } 7 | .right { float: right; } 8 | 9 | // Display 10 | .block { display: block; } 11 | .inline { display: inline; } 12 | .inline-block { 13 | display: inline-block; 14 | *zoom: 1; 15 | *display: inline; 16 | } 17 | .none, 18 | [hidden] { 19 | display: none; 20 | } 21 | 22 | // Font Weights 23 | .font-ultra-bold { font-weight: 900; } 24 | .font-bold { font-weight: 700; } 25 | .font-normal { font-weight: 500; } 26 | .font-light { font-weight: 300; } 27 | .font-thin { font-weight: 100; } 28 | 29 | // Font Styles 30 | .font-normal { font-style: normal; } 31 | .capitalize { text-transform: capitalize; } 32 | .uppercase { text-transform: uppercase; } 33 | 34 | // Text Position 35 | .text-left { text-align: left; } 36 | .text-right { text-align: right; } 37 | .text-center { text-align: center; } 38 | 39 | // Accessibility (offscreen text for screen readers) 40 | .visuallyhidden { 41 | border: 0; 42 | clip: rect(0 0 0 0); 43 | height: 1px; 44 | overflow: hidden; 45 | padding: 0; 46 | position: absolute; 47 | width: 1px; 48 | left: -9999em; 49 | } 50 | 51 | // Image Spacing 52 | .image-left { margin-right: 20px; } 53 | .image-right { margin-left: 20px; } -------------------------------------------------------------------------------- /lib/base/base/_lists.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Lists 3 | // ========================================================================== 4 | dl, menu, ol, ul { margin: 1em 0; } 5 | dd, 6 | ul ul, 7 | ol ol, 8 | ul ol, 9 | ol ul { 10 | margin: 0; 11 | } 12 | dt { &:extend(.font-normal); } 13 | dd { 14 | margin-bottom: 1em; 15 | } 16 | menu, ol, ul { padding: 0 0 0 22px; } 17 | nav ul, nav ol { 18 | list-style: none; 19 | list-style-image: none; 20 | } 21 | // Remove Styling from List 22 | .list-unstyled { 23 | list-style: none; 24 | padding: 0; 25 | margin: 0; 26 | li { 27 | margin-top: 0; 28 | margin-bottom: 0; 29 | } 30 | } 31 | .list-inline { 32 | &:extend(.list-unstyled); 33 | &:extend(.inline-block); 34 | li { 35 | &:extend(.list-unstyled li); 36 | &:extend(.inline-block); 37 | } 38 | } -------------------------------------------------------------------------------- /lib/base/base/_mixins.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Mixins 3 | // ========================================================================== 4 | 5 | // Font Sizes (REMs with PX fallback for older browsers) 6 | .font-size (@size) { 7 | @remValue: @size / @default-font-size; 8 | @pxValue: (@size); 9 | font-size: ~"@{pxValue}px"; 10 | font-size: ~"@{remValue}rem"; 11 | } 12 | 13 | // Line Height Sizes (REMs with PX fallback for older browsers) 14 | .line-height (@size) { 15 | @remValue: @size / @default-font-size; 16 | @pxValue: (@size); 17 | line-height: ~"@{pxValue}px"; 18 | line-height: ~"@{remValue}rem"; 19 | } 20 | 21 | // Rounded Corners 22 | .border-radius(@radius) { 23 | -webkit-border-radius: @radius; 24 | -moz-border-radius: @radius; 25 | border-radius: @radius; 26 | } -------------------------------------------------------------------------------- /lib/base/base/_mobile-grid.import.less: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: @mobile-breakpoint) { 2 | 3 | .container, .mobile-container { 4 | padding-left: 20px; 5 | padding-right: 20px; 6 | margin-left: auto; 7 | margin-right: auto; 8 | float: none; 9 | &:first-child { margin-left: auto; } 10 | } 11 | .mobile-container-full { 12 | padding-left: 0; 13 | padding-right: 0; 14 | margin-left: auto; 15 | margin-right: auto; 16 | float: none; 17 | &:first-child { margin-left: auto; } 18 | } 19 | 20 | .mobile-no-gutter { 21 | padding-left: 0; 22 | padding-right: 0; 23 | } 24 | 25 | // Mobile Grid 26 | .mobile-col-1-2 { 27 | width: 50%; // Fallback if calc() is not supported 28 | width: calc(~'100% / 12 * 6'); 29 | width: -webkit-calc(~'100% / 12 * 6'); 30 | width: -moz-calc(~'100% / 12 * 6'); 31 | } 32 | .mobile-col-1-3 { 33 | width: 33.33333%; // Fallback if calc() is not supported 34 | width: calc(~'100% / 12 * 4'); 35 | width: -webkit-calc(~'100% / 12 * 4'); 36 | width: -moz-calc(~'100% / 12 * 4'); 37 | } 38 | .mobile-col-1-4 { 39 | width: 25%; // Fallback if calc() is not supported 40 | width: calc(~'100% / 12 * 3'); 41 | width: -webkit-calc(~'100% / 12 * 3'); 42 | width: -moz-calc(~'100% / 12 * 3'); 43 | } 44 | .mobile-col-3-4 { 45 | width: 75%; // Fallback if calc() is not supported 46 | width: calc(~'100% / 12 * 9'); 47 | width: -webkit-calc(~'100% / 12 * 9'); 48 | width: -moz-calc(~'100% / 12 * 9'); 49 | } 50 | 51 | // Push/Pull 52 | .mobile-push-1-2 { 53 | left: 50%; // Fallback if calc() is not supported 54 | left: calc(~'100% / 12 * 6'); 55 | left: -webkit-calc(~'100% / 12 * 6'); 56 | left: -moz-calc(~'100% / 12 * 6'); 57 | } 58 | .mobile-pull-1-2 { 59 | left: -50%; // Fallback if calc() is not supported 60 | left: calc(~'-100% / 12 * 6'); 61 | left: -webkit-calc(~'-100% / 12 * 6'); 62 | left: -moz-calc(~'-100% / 12 * 6'); 63 | } 64 | .mobile-push-1-3 { 65 | left: 25%; // Fallback if calc() is not supported 66 | left: calc(~'100% / 12 * 3'); 67 | left: -webkit-calc(~'100% / 12 * 3'); 68 | left: -moz-calc(~'100% / 12 * 3'); 69 | } 70 | .mobile-pull-1-3 { 71 | left: -25%; // Fallback if calc() is not supported 72 | left: calc(~'-100% / 12 * 3'); 73 | left: -webkit-calc(~'-100% / 12 * 3'); 74 | left: -moz-calc(~'-100% / 12 * 3'); 75 | } 76 | .mobile-push-1-4 { 77 | left: 33.33333%; // Fallback if calc() is not supported 78 | left: calc(~'100% / 12 * 4'); 79 | left: -webkit-calc(~'100% / 12 * 4'); 80 | left: -moz-calc(~'100% / 12 * 4'); 81 | } 82 | .mobile-pull-1-4 { 83 | left: -33.33333%; // Fallback if calc() is not supported 84 | left: calc(~'-100% / 12 * 4'); 85 | left: -webkit-calc(~'-100% / 12 * 4'); 86 | left: -moz-calc(~'-100% / 12 * 4'); 87 | } 88 | .mobile-push-3-4 { 89 | left: 75%; // Fallback if calc() is not supported 90 | left: calc(~'100% / 12 * 9'); 91 | left: -webkit-calc(~'100% / 12 * 9'); 92 | left: -moz-calc(~'100% / 12 * 9'); 93 | } 94 | .mobile-pull-3-4 { 95 | left: -75%; // Fallback if calc() is not supported 96 | left: calc(~'-100% / 12 * 9'); 97 | left: -webkit-calc(~'-100% / 12 * 9'); 98 | left: -moz-calc(~'-100% / 12 * 9'); 99 | } 100 | 101 | .mobile-no-push, .mobile-no-pull { left: auto; } 102 | 103 | // Mobile Rows 104 | .mobile-row { 105 | padding-top: 1em; 106 | padding-bottom: 1em; 107 | } 108 | 109 | .mobile-full { 110 | left: auto; 111 | clear: both; 112 | float: none; 113 | width: 100%; 114 | margin: 0.2em 0 0 0; 115 | display: block; 116 | } 117 | .mobile-full:first-child { margin-top: 0; } 118 | 119 | .mobile-text-left { text-align: left; } 120 | .mobile-text-right { text-align: right; } 121 | .mobile-text-center { text-align: center; } 122 | 123 | .mobile-left { float: left; } 124 | .mobile-right { float: right; } 125 | .mobile-no-float { float: none; } 126 | 127 | // Remove Margin / Padding 128 | .mobile-no-margin { margin: 0; } 129 | .mobile-no-padding { padding: 0; } 130 | 131 | .no-mobile { display: none; } 132 | .show-mobile { display: block; } 133 | 134 | @import "../_mobile-styles.import.less"; // Import Custom Mobile Styles 135 | 136 | } // End Mobile Media Query -------------------------------------------------------------------------------- /lib/base/base/_print.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Print Styles 3 | // ========================================================================== 4 | @media print { 5 | 6 | * { background: transparent; } 7 | a, a:visited { text-decoration: underline; } 8 | 9 | abbr[title]:after { content: " (" attr(title) ")"; } 10 | 11 | pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 12 | thead { display: table-header-group; } 13 | tr, img { page-break-inside: avoid; } 14 | img { max-width: 100%; } 15 | @page { margin: 0.5cm; } 16 | p, h2, h3 { orphans: 3; widows: 3; } 17 | h2, h3 { page-break-after: avoid; } 18 | 19 | } // End Print Styles -------------------------------------------------------------------------------- /lib/base/base/_resets.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Global Resets 3 | // ========================================================================== 4 | *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 5 | article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } 6 | html, button, input, select, textarea { font-family: sans-serif; } 7 | body, form, fieldset, legend, input, select, textarea, button { margin: 0; } 8 | html { font-size: 100%; } -------------------------------------------------------------------------------- /lib/base/base/_tables.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Tables 3 | // ========================================================================== 4 | table { 5 | width: 100%; 6 | margin: 1em 0; 7 | table-layout: fixed; 8 | border-collapse: collapse; 9 | border-spacing: 0; 10 | border-right: 1px solid #f1f1f1; 11 | border-bottom: 1px solid #f1f1f1; 12 | word-wrap: break-word; // CSS3 Browsers 13 | -ms-word-wrap: break-word; // IE8 14 | *white-space: normal; // IE7 15 | } 16 | table th, 17 | table td { 18 | padding: 8px; 19 | text-align: left; 20 | vertical-align: top; 21 | border-top: 1px solid #eee; 22 | border-left: 1px solid #eee; 23 | } 24 | table thead th, 25 | table tfoot th { 26 | vertical-align: bottom; 27 | &:extend(.font-normal); 28 | background-color: #f1f1f1; 29 | color: #333; 30 | } 31 | table caption { 32 | padding: 8px; 33 | font-weight: normal; 34 | font-style: normal; 35 | &:extend(.text-left); 36 | &:extend(.font-normal); 37 | border-bottom: 0; 38 | } -------------------------------------------------------------------------------- /lib/base/base/_tablet-grid.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Tablet Grid 3 | // ========================================================================== 4 | @media only screen and (min-width: @tablet-breakpoint) and (max-width: (@desktop-breakpoint - 1px)) { 5 | 6 | .container, .tablet-container { 7 | max-width: @desktop-container; 8 | padding-left: 20px; 9 | padding-right: 20px; 10 | margin-left: auto; 11 | margin-right: auto; 12 | float: none; 13 | &:first-child { margin-left: auto; } 14 | } 15 | .tablet-container-full { 16 | padding-left: 0; 17 | padding-right: 0; 18 | margin-left: auto; 19 | margin-right: auto; 20 | float: none; 21 | &:first-child { margin-left: auto; } 22 | } 23 | 24 | .tablet-no-gutter { 25 | padding-left: 0; 26 | padding-right: 0; 27 | } 28 | 29 | // Tablet Grid 30 | .tablet-col-1 { 31 | width: 8.33333%; // Fallback if calc() is not supported 32 | width: calc(~'100% / 12 * 1'); 33 | width: -webkit-calc(~'100% / 12 * 1'); 34 | width: -moz-calc(~'100% / 12 * 1'); 35 | } 36 | .tablet-col-2 { 37 | width: 16.66667%; // Fallback if calc() is not supported 38 | width: calc(~'100% / 12 * 2'); 39 | width: -webkit-calc(~'100% / 12 * 2'); 40 | width: -moz-calc(~'100% / 12 * 2'); 41 | } 42 | .tablet-col-3 { 43 | width: 25%; // Fallback if calc() is not supported 44 | width: calc(~'100% / 12 * 3'); 45 | width: -webkit-calc(~'100% / 12 * 3'); 46 | width: -moz-calc(~'100% / 12 * 3'); 47 | } 48 | .tablet-col-4 { 49 | width: 33.33333%; // Fallback if calc() is not supported 50 | width: calc(~'100% / 12 * 4'); 51 | width: -webkit-calc(~'100% / 12 * 4'); 52 | width: -moz-calc(~'100% / 12 * 4'); 53 | } 54 | .tablet-col-5 { 55 | width: 41.66665%; // Fallback if calc() is not supported 56 | width: calc(~'100% / 12 * 5'); 57 | width: -webkit-calc(~'100% / 12 * 5'); 58 | width: -moz-calc(~'100% / 12 * 5'); 59 | } 60 | .tablet-col-6 { 61 | width: 50%; // Fallback if calc() is not supported 62 | width: calc(~'100% / 12 * 6'); 63 | width: -webkit-calc(~'100% / 12 * 6'); 64 | width: -moz-calc(~'100% / 12 * 6'); 65 | } 66 | .tablet-col-7 { 67 | width: 58.33333%; // Fallback if calc() is not supported 68 | width: calc(~'100% / 12 * 7'); 69 | width: -webkit-calc(~'100% / 12 * 7'); 70 | width: -moz-calc(~'100% / 12 * 7'); 71 | } 72 | .tablet-col-8 { 73 | width: 66.66666%; // Fallback if calc() is not supported 74 | width: calc(~'100% / 12 * 8'); 75 | width: -webkit-calc(~'100% / 12 * 8'); 76 | width: -moz-calc(~'100% / 12 * 8'); 77 | } 78 | .tablet-col-9 { 79 | width: 75%; // Fallback if calc() is not supported 80 | width: calc(~'100% / 12 * 9'); 81 | width: -webkit-calc(~'100% / 12 * 9'); 82 | width: -moz-calc(~'100% / 12 * 9'); 83 | } 84 | .tablet-col-10 { 85 | width: 83.33333%; // Fallback if calc() is not supported 86 | width: calc(~'100% / 12 * 10'); 87 | width: -webkit-calc(~'100% / 12 * 10'); 88 | width: -moz-calc(~'100% / 12 * 10'); 89 | } 90 | .tablet-col-11 { 91 | width: 91.66666%; // Fallback if calc() is not supported 92 | width: calc(~'100% / 12 * 11'); 93 | width: -webkit-calc(~'100% / 12 * 11'); 94 | width: -moz-calc(~'100% / 12 * 11'); 95 | } 96 | .tablet-col-12 { width: 100%; } 97 | 98 | .tablet-col-1-2 { &:extend(.tablet-col-6); } 99 | .tablet-col-1-3 { &:extend(.tablet-col-4); } 100 | .tablet-col-1-4 { &:extend(.tablet-col-3); } 101 | .tablet-col-3-4 { &:extend(.tablet-col-9); } 102 | 103 | // Tablet Push/Pull 104 | .tablet-push-1 { 105 | left: 8.33333%; // Fallback if calc() is not supported 106 | left: calc(~'100% / 12 * 1'); 107 | left: -webkit-calc(~'100% / 12 * 1'); 108 | left: -moz-calc(~'100% / 12 * 1'); 109 | } 110 | .tablet-pull-1 { 111 | left: -8.33333%; // Fallback if calc() is not supported 112 | left: calc(~'-100% / 12 * 1'); 113 | left: -webkit-calc(~'-100% / 12 * 1'); 114 | left: -moz-calc(~'-100% / 12 * 1'); 115 | } 116 | .tablet-push-2 { 117 | left: 16.66667%; // Fallback if calc() is not supported 118 | left: calc(~'100% / 12 * 2'); 119 | left: -webkit-calc(~'100% / 12 * 2'); 120 | left: -moz-calc(~'100% / 12 * 2'); 121 | } 122 | .tablet-pull-2 { 123 | left: -16.66667%; // Fallback if calc() is not supported 124 | left: calc(~'-100% / 12 * 2'); 125 | left: -webkit-calc(~'-100% / 12 * 2'); 126 | left: -moz-calc(~'-100% / 12 * 2'); 127 | } 128 | .tablet-push-3 { 129 | left: 25%; // Fallback if calc() is not supported 130 | left: calc(~'100% / 12 * 3'); 131 | left: -webkit-calc(~'100% / 12 * 3'); 132 | left: -moz-calc(~'100% / 12 * 3'); 133 | } 134 | .tablet-pull-3 { 135 | left: -25%; // Fallback if calc() is not supported 136 | left: calc(~'-100% / 12 * 3'); 137 | left: -webkit-calc(~'-100% / 12 * 3'); 138 | left: -moz-calc(~'-100% / 12 * 3'); 139 | } 140 | .tablet-push-4 { 141 | left: 33.33333%; // Fallback if calc() is not supported 142 | left: calc(~'100% / 12 * 4'); 143 | left: -webkit-calc(~'100% / 12 * 4'); 144 | left: -moz-calc(~'100% / 12 * 4'); 145 | } 146 | .tablet-pull-4 { 147 | left: -33.33333%; // Fallback if calc() is not supported 148 | left: calc(~'-100% / 12 * 4'); 149 | left: -webkit-calc(~'-100% / 12 * 4'); 150 | left: -moz-calc(~'-100% / 12 * 4'); 151 | } 152 | .tablet-push-5 { 153 | left: 41.66665%; // Fallback if calc() is not supported 154 | left: calc(~'100% / 12 * 5'); 155 | left: -webkit-calc(~'100% / 12 * 5'); 156 | left: -moz-calc(~'100% / 12 * 5'); 157 | } 158 | .tablet-pull-5 { 159 | left: -41.66665%; // Fallback if calc() is not supported 160 | left: calc(~'-100% / 12 * 5'); 161 | left: -webkit-calc(~'-100% / 12 * 5'); 162 | left: -moz-calc(~'-100% / 12 * 5'); 163 | } 164 | .tablet-push-6 { 165 | left: 50%; // Fallback if calc() is not supported 166 | left: calc(~'100% / 12 * 6'); 167 | left: -webkit-calc(~'100% / 12 * 6'); 168 | left: -moz-calc(~'100% / 12 * 6'); 169 | } 170 | .tablet-pull-6 { 171 | left: -50%; // Fallback if calc() is not supported 172 | left: calc(~'-100% / 12 * 6'); 173 | left: -webkit-calc(~'-100% / 12 * 6'); 174 | left: -moz-calc(~'-100% / 12 * 6'); 175 | } 176 | .tablet-push-7 { 177 | left: 58.33333%; // Fallback if calc() is not supported 178 | left: calc(~'100% / 12 * 7'); 179 | left: -webkit-calc(~'100% / 12 * 7'); 180 | left: -moz-calc(~'100% / 12 * 7'); 181 | } 182 | .tablet-pull-7 { 183 | left: -58.33333%; // Fallback if calc() is not supported 184 | left: calc(~'-100% / 12 * 7'); 185 | left: -webkit-calc(~'-100% / 12 * 7'); 186 | left: -moz-calc(~'-100% / 12 * 7'); 187 | } 188 | .tablet-push-8 { 189 | left: 66.66666%; // Fallback if calc() is not supported 190 | left: calc(~'100% / 12 * 8'); 191 | left: -webkit-calc(~'100% / 12 * 8'); 192 | left: -moz-calc(~'100% / 12 * 8'); 193 | } 194 | .tablet-pull-8 { 195 | left: -66.66666%; // Fallback if calc() is not supported 196 | left: calc(~'-100% / 12 * 8'); 197 | left: -webkit-calc(~'-100% / 12 * 8'); 198 | left: -moz-calc(~'-100% / 12 * 8'); 199 | } 200 | .tablet-push-9 { 201 | left: 75%; // Fallback if calc() is not supported 202 | left: calc(~'100% / 12 * 9'); 203 | left: -webkit-calc(~'100% / 12 * 9'); 204 | left: -moz-calc(~'100% / 12 * 9'); 205 | } 206 | .tablet-pull-9 { 207 | left: -75%; // Fallback if calc() is not supported 208 | left: calc(~'-100% / 12 * 9'); 209 | left: -webkit-calc(~'-100% / 12 * 9'); 210 | left: -moz-calc(~'-100% / 12 * 9'); 211 | } 212 | .tablet-push-10 { 213 | left: 83.33333%; // Fallback if calc() is not supported 214 | left: calc(~'100% / 12 * 10'); 215 | left: -webkit-calc(~'100% / 12 * 10'); 216 | left: -moz-calc(~'100% / 12 * 10'); 217 | } 218 | .tablet-pull-10 { 219 | left: -83.33333%; // Fallback if calc() is not supported 220 | left: calc(~'-100% / 12 * 10'); 221 | left: -webkit-calc(~'-100% / 12 * 10'); 222 | left: -moz-calc(~'-100% / 12 * 10'); 223 | } 224 | .tablet-push-11 { 225 | left: 91.66666%; // Fallback if calc() is not supported 226 | left: calc(~'100% / 12 * 11'); 227 | left: -webkit-calc(~'100% / 12 * 11'); 228 | left: -moz-calc(~'100% / 12 * 11'); 229 | } 230 | .tablet-pull-11 { 231 | left: -91.66666%; // Fallback if calc() is not supported 232 | left: calc(~'-100% / 12 * 11'); 233 | left: -webkit-calc(~'-100% / 12 * 11'); 234 | left: -moz-calc(~'-100% / 12 * 11'); 235 | } 236 | 237 | .tablet-push-1-2 { &:extend(.tablet-push-6); } 238 | .tablet-pull-1-2 { &:extend(.tablet-pull-6); } 239 | .tablet-push-1-3 { &:extend(.tablet-push-4); } 240 | .tablet-pull-1-3 { &:extend(.tablet-pull-4); } 241 | .tablet-push-1-4 { &:extend(.tablet-push-3); } 242 | .tablet-pull-1-4 { &:extend(.tablet-pull-3); } 243 | .tablet-push-3-4 { &:extend(.tablet-push-9); } 244 | .tablet-pull-3-4 { &:extend(.tablet-pull-9); } 245 | 246 | .tablet-no-push, .tablet-no-pull { left: auto; } 247 | 248 | // Tablet Rows 249 | .tablet-row { 250 | padding-top: 1em; 251 | padding-bottom: 1em; 252 | } 253 | 254 | .tablet-full { 255 | left: auto; 256 | clear: both; 257 | float: none; 258 | width: 100%; 259 | margin: 1em 0 0 0; 260 | display: block; 261 | } 262 | .tablet-full:first-child { margin-top: 0; } 263 | 264 | .tablet-text-left { text-align: left; } 265 | .tablet-text-right { text-align: right; } 266 | .tablet-text-center { text-align: center; } 267 | 268 | .tablet-left { float: left; } 269 | .tablet-right { float: right; } 270 | .tablet-no-float { float: none; } 271 | 272 | // Remove Margin / Padding 273 | .tablet-no-margin { margin: 0; } 274 | .tablet-no-padding { padding: 0; } 275 | 276 | .no-tablet { display: none; } 277 | .show-tablet { display: block; } 278 | 279 | @import "../_tablet-styles.import.less"; // Import Custom Tablet Styles 280 | 281 | } // End Tablet Media Query -------------------------------------------------------------------------------- /lib/base/base/_variables.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Global Variables 3 | // ========================================================================== 4 | 5 | // Container Defaults 6 | @mobile-container: @widthMobile; 7 | @tablet-container: @widthTablet; 8 | @desktop-container: @widthContainer; 9 | 10 | 11 | // Resonsive Design Break Points 12 | @mobile-breakpoint: (@tablet-container + 19px); 13 | @tablet-breakpoint: (@tablet-container + 20px); 14 | @desktop-breakpoint: (@desktop-container); 15 | 16 | // Default Fonts 17 | @default-font-family: sans-serif; 18 | @default-code-font-family: 'courier new', monospace, serif; 19 | 20 | // Font Size Defaults 21 | @h1: 40; 22 | @h2: 32; 23 | @h3: 26; 24 | @h4: 20; 25 | @h5: 18; 26 | @h6: 16; 27 | 28 | @default-font-size: 16; 29 | @default-line-height: 21; 30 | 31 | // Default Colours 32 | @default-font-color: #434343; 33 | @default-link-color: #27ae61; 34 | @default-button-color: #e74b3c; 35 | @default-button-hover-color: #f43f3f; -------------------------------------------------------------------------------- /lib/base/style.import.less: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | 3 | // Base Stylesheet - http://git.io/base 4 | // Author: Matthew Hartman - http://www.matthewhartman.com.au/ 5 | // Version: 1.8.5 - Last Updated: 25th of June, 2014 6 | 7 | // ========================================================================== 8 | 9 | @import "base/_variables.import.less"; // Global Variables 10 | 11 | @import "base/_mixins.import.less"; // Base Mixins 12 | @import "base/_resets.import.less"; // General Resets 13 | 14 | // @import "base/_global.import.less"; // Global Typography and Headings 15 | // @import "base/_lists.import.less"; // Unordered Lists, Ordered Lists and Navigation 16 | // @import "base/_blockquotes.import.less"; // Blockquotes 17 | // @import "base/_code.import.less"; // Code 18 | // @import "base/_tables.import.less"; // Tables 19 | // @import "base/_forms.import.less"; // Forms, Input Types and Buttons 20 | 21 | // @import "base/_buttons.import.less"; // Custom Base Buttons 22 | // @import "base/_helpers.import.less"; // Custom Base Helpers 23 | 24 | @import "base/_grid.import.less"; // Grid 25 | @import "base/_tablet-grid.import.less"; // Tablet Grid 26 | @import "base/_mobile-grid.import.less"; // Mobile Grid 27 | @import "base/_print.import.less"; // Print Page Styles -------------------------------------------------------------------------------- /lib/lesshat.import.less: -------------------------------------------------------------------------------- 1 | // * =========================================================== * 2 | // < LESSHat > 3 | // * =========================================================== * 4 | // 5 | // Made with Energy drinks in Prague, Czech Republic. 6 | // Handcrafted by Petr Brzek, lesshat.com 7 | // Works great with CSS Hat csshat.com 8 | 9 | // version: v3.0.2 (2014-06-17) 10 | 11 | // TABLE OF MIXINS: 12 | // align-content 13 | // align-items 14 | // align-self 15 | // animation 16 | // animation-delay 17 | // animation-direction 18 | // animation-duration 19 | // animation-fill-mode 20 | // animation-iteration-count 21 | // animation-name 22 | // animation-play-state 23 | // animation-timing-function 24 | // appearance 25 | // backface-visibility 26 | // background-clip 27 | // background-image 28 | // background-origin 29 | // background-size 30 | // blur 31 | // border-bottom-left-radius 32 | // border-bottom-right-radius 33 | // border-image 34 | // border-radius 35 | // border-top-left-radius 36 | // border-top-right-radius 37 | // box-shadow 38 | // box-sizing 39 | // brightness 40 | // calc 41 | // column-count 42 | // column-gap 43 | // column-rule 44 | // column-width 45 | // columns 46 | // contrast 47 | // display 48 | // drop-shadow 49 | // filter 50 | // flex 51 | // flex-basis 52 | // flex-direction 53 | // flex-grow 54 | // flex-shrink 55 | // flex-wrap 56 | // font-face 57 | // grayscale 58 | // hue-rotate 59 | // hyphens 60 | // invert 61 | // justify-content 62 | // keyframes 63 | // opacity 64 | // order 65 | // perspective 66 | // perspective-origin 67 | // placeholder 68 | // rotate 69 | // rotate3d 70 | // rotateX 71 | // rotateY 72 | // rotateZ 73 | // saturate 74 | // scale 75 | // scale3d 76 | // scaleX 77 | // scaleY 78 | // scaleZ 79 | // selection 80 | // sepia 81 | // size 82 | // skew 83 | // skewX 84 | // skewY 85 | // transform 86 | // transform-origin 87 | // transform-style 88 | // transition 89 | // transition-delay 90 | // transition-duration 91 | // transition-property 92 | // transition-timing-function 93 | // translate 94 | // translate3d 95 | // translateX 96 | // translateY 97 | // translateZ 98 | // user-select 99 | 100 | .align-content(...) { 101 | @process: ~`(function(r){return r=r||"stretch"})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 102 | @process_ms: ~`(function(t){return t=t||"stretch","flex-start"==t?t="start":"flex-end"==t?t="end":"space-between"==t?t="justify":"space-around"==t&&(t="distribute"),t})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 103 | -webkit-align-content: @process; 104 | -ms-flex-line-pack: @process_ms; 105 | align-content: @process; 106 | } 107 | 108 | .align-items(...) { 109 | @process_olderwebkit: ~`(function(t){return t=t||"stretch","flex-start"==t?t="start":"flex-end"==t&&(t="end"),t})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 110 | @process_moz: ~`(function(t){return t=t||"stretch","flex-start"==t?t="start":"flex-end"==t&&(t="end"),t})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`; 111 | @process: ~`(function(t){return t=t||"stretch"})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`; 112 | @process_ms: ~`(function(t){return t=t||"stretch","flex-start"==t?t="start":"flex-end"==t&&(t="end"),t})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`; 113 | -webkit-box-align: @process_olderwebkit; 114 | -moz-box-align: @process_moz; 115 | -webkit-align-items: @process; 116 | -ms-flex-align: @process_ms; 117 | align-items: @process; 118 | } 119 | 120 | .align-self(...) { 121 | @process: ~`(function(t){return t=t||"auto"})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`; 122 | @process_ms: ~`(function(t){return t=t||"auto","flex-start"==t?t="start":"flex-end"==t&&(t="end"),t})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`; 123 | -webkit-align-self: @process; 124 | -ms-flex-item-align: @process_ms; 125 | align-self: @process; 126 | } 127 | 128 | .animation(...) { 129 | @process: ~`(function(t){return t=t||"none",/^[^, ]*,/.test(t)&&(t=t.replace(/(?:,)(?![^(]*\))/g,"")),t})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`; 130 | -webkit-animation: @process; 131 | -moz-animation: @process; 132 | -o-animation: @process; 133 | animation: @process; 134 | } 135 | 136 | .animation-delay(...) { 137 | @process: ~`(function(t){t=t||"0";var r=/(?:\d)(?:ms|s)/gi,e=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(t)||"0"===t||(t=t.replace(e,function(t){return t+=parseFloat(t,10)>10?"ms":"s"})),t})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`; 138 | -webkit-animation-delay: @process; 139 | -moz-animation-delay: @process; 140 | -o-animation-delay: @process; 141 | animation-delay: @process; 142 | } 143 | 144 | .animation-direction(...) { 145 | @process: ~`(function(r){return r||"normal"})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 146 | -webkit-animation-direction: @process; 147 | -moz-animation-direction: @process; 148 | -o-animation-direction: @process; 149 | animation-direction: @process; 150 | } 151 | 152 | .animation-duration(...) { 153 | @process: ~`(function(r){r=r||"0";var t=/ms|s/gi,e=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return t.test(r)||"0"===r||(r=r.replace(e,function(r){return r+=parseFloat(r,10)>10?"ms":"s"})),r})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 154 | -webkit-animation-duration: @process; 155 | -moz-animation-duration: @process; 156 | -o-animation-duration: @process; 157 | animation-duration: @process; 158 | } 159 | 160 | .animation-fill-mode(...) { 161 | @process: ~`(function(r){return r||"none"})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 162 | -webkit-animation-fill-mode: @process; 163 | -moz-animation-fill-mode: @process; 164 | -o-animation-fill-mode: @process; 165 | animation-fill-mode: @process; 166 | } 167 | 168 | .animation-iteration-count(...) { 169 | @process: ~`(function(r){return r||"0"})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 170 | -webkit-animation-iteration-count: @process; 171 | -moz-animation-iteration-count: @process; 172 | -o-animation-iteration-count: @process; 173 | animation-iteration-count: @process; 174 | } 175 | 176 | .animation-name(...) { 177 | @process: ~`(function(r){return r||"none"})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 178 | -webkit-animation-name: @process; 179 | -moz-animation-name: @process; 180 | -o-animation-name: @process; 181 | animation-name: @process; 182 | } 183 | 184 | .animation-play-state(...) { 185 | @process: ~`(function(r){return r||"running"})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 186 | -webkit-animation-play-state: @process; 187 | -moz-animation-play-state: @process; 188 | -o-animation-play-state: @process; 189 | animation-play-state: @process; 190 | } 191 | 192 | .animation-timing-function(...) { 193 | @process: ~`(function(r){return r||"ease"})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 194 | -webkit-animation-timing-function: @process; 195 | -moz-animation-timing-function: @process; 196 | -o-animation-timing-function: @process; 197 | animation-timing-function: @process; 198 | } 199 | 200 | .appearance(...) { 201 | @process: ~`(function(r){return r||"none"})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 202 | -webkit-appearance: @process; 203 | -moz-appearance: @process; 204 | appearance: @process; 205 | } 206 | 207 | .backface-visibility(...) { 208 | @process: ~`(function(r){return r||"visible"})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 209 | -webkit-backface-visibility: @process; 210 | -moz-backface-visibility: @process; 211 | -o-backface-visibility: @process; 212 | -ms-backface-visibility: @process; 213 | backface-visibility: @process; 214 | } 215 | 216 | .background-clip(...) { 217 | @process: ~`(function(r){return r||"border-box"})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 218 | -webkit-background-clip: @process; 219 | -moz-background-clip: @process; 220 | background-clip: @process; 221 | } 222 | 223 | .background-image(...) { 224 | @process_ms: ~`(function(t){function e(t){var e,r,n,a,s,i,u,o,g="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",c=0,l=0,f="",d=[];if(!t)return t;do e=t.charCodeAt(c++),r=t.charCodeAt(c++),n=t.charCodeAt(c++),o=e<<16|r<<8|n,a=63&o>>18,s=63&o>>12,i=63&o>>6,u=63&o,d[l++]=g.charAt(a)+g.charAt(s)+g.charAt(i)+g.charAt(u);while(c',svg_start:'',linear_gradient_start:'",radial_gradient_end:"",rect_linear:'',rect_radial:'',svg_end:""};if(r.length){r.forEach(function(t){var e={};if(Object.keys(a).some(function(r){return t.indexOf(r)>=0?(e.svg_direction=a[r],!0):(e.svg_direction=!1,void 0)}),/linear/.test(t))e.svg_type="linear";else if(/radial/.test(t))e.svg_type="radial";else if(!/linear/.test(t)&&!/radial/.test(t))return e.url=t.trim(),e.svg_type="url",e.svg_direction=!0,n.push(e),!1;var r=t.match(/rgb|#[a-zA-Z0-9]|hsl/g).length;e.svg_stops=[],t=t.replace(/transparent/g,"rgba(0,0,0,0)"),t.match(/#[a-zA-Z0-9]/g)&&t.match(/(#[a-zA-Z0-9]+)\s*(\d+%)?/g).forEach(function(t){t=t.split(" "),e.svg_stops.push('')}),t.match(/rgba?\(\d+,\s*\d+,\s*\d+(?:,\s*(0|1|\.\d+|0\.\d+))?\)/g)&&t.replace(/rgba?\((\d+,\s*\d+,\s*\d+)(?:,\s*(0|1|\.\d+|0\.\d+))?\)\s*(\d+%)?/g,function(t,r,n,a){e.svg_stops.push('')}),t.match(/hsla?\((\d+,\s*\d+%,\s*\d+%),\s*(0|1|\.\d+|0\.\d+)\)/g)&&t.replace(/hsla?\((\d+,\s*\d+%,\s*\d+%),\s*(0|1|\.\d+|0\.\d+)\)\s*(\d+%)?/g,function(t,r,n,a){e.svg_stops.push('')});var s=Math.floor(100/(r-1));e.svg_stops.forEach(function(t,r){/offset="false"/.test(t)&&(e.svg_stops[r]=t.replace(/offset="false"/,'offset="'+s*r+'%"'))}),e.svg_stops.sort(function(t,e){return t=t.match(/offset="(\d+)%"/),e=e.match(/offset="(\d+)%"/),2==t.length&&2==e.length?t[1]-e[1]:void 0}),n.push(e)});var i=[],u=n.every(function(t){for(var e in t)if(0==t[e]||0==t[e].length)return!1;return!0});if(!u)return 8121991;n.forEach(function(t,e){("linear"==t.svg_type||"radial"==t.svg_type)&&(i[e]=s.xml+s.svg_start),"linear"==t.svg_type?(i[e]+=s.linear_gradient_start+" "+t.svg_direction+">",t.svg_stops.forEach(function(t){i[e]+=t}),i[e]+=s.linear_gradient_end,i[e]+=s.rect_linear,i[e]+=s.svg_end):"radial"==t.svg_type?(i[e]+=s.radial_gradient_start+" "+t.svg_direction+">",t.svg_stops.forEach(function(t){i[e]+=t}),i[e]+=s.radial_gradient_end,i[e]+=s.rect_radial,i[e]+=s.svg_end):"url"==t.svg_type&&(i[e]=t.url)}),i.forEach(function(t,r){/<\?xml version="1.0" \?>/g.test(t)&&(i[r]=s.uri_data+e(t)+")")}),t=i.join(",")}return t})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`; 225 | @process_webkit: ~`(function(t){if(t=t||8121991,8121991==t)return t;var e={"to bottom":"top","to left":"right","to top":"bottom","to right":"left","ellipse at center":"center, ellipse cover","circle closest-side":"center center, circle contain","circle farthest-corner":"center center, circle cover","circle farthest-side":"center center, circle cover","ellipse closest-side":"center center, ellipse contain","ellipse farthest-corner":"center center, ellipse cover","ellipse farthest-side":"center center, ellipse cover"},r=/(radial-gradient\()([a-z- ]+)at\s+(\w+%?)\s*(\w*%?)/g,n=Object.keys(e);return n.some(function(n){return t.indexOf(n)>=0?(t=t.replace(new RegExp(n+"(?![ a-z0-9])","g"),e[n]),!0):(r.test(t)&&(t=t.replace(r,function(t,e,r,n,a){return e.trim()+n.trim()+" "+a.trim()+","+r.replace(/closest-side/g,"contain").replace(/farthest-corner/g,"cover").trim()})),void 0)}),t=t.replace(/(\d+)\s*deg/g,function(t,e){return 90-e+"deg"}).replace(/(linear|radial)-gradient/g,"-webkit-$1-gradient")})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`; 226 | @process_moz: ~`(function(e){if(e=e||8121991,8121991==e)return e;var t={"to bottom":"top","to left":"right","to top":"bottom","to right":"left","ellipse at center":"center, ellipse cover","circle closest-side":"center center, circle contain","circle farthest-corner":"center center, circle cover","circle farthest-side":"center center, circle cover","ellipse closest-side":"center center, ellipse contain","ellipse farthest-corner":"center center, ellipse cover","ellipse farthest-side":"center center, ellipse cover"},r=/(radial-gradient\()([a-z- ]+)at\s+(\w+%?)\s*(\w*%?)/g,n=Object.keys(t);return n.some(function(n){return e.indexOf(n)>=0?(e=e.replace(new RegExp(n+"(?![ a-z0-9])","g"),t[n]),!0):(r.test(e)&&(e=e.replace(r,function(e,t,r,n,a){return t.trim()+n.trim()+" "+a.trim()+","+r.replace(/closest-side/g,"contain").replace(/farthest-corner/g,"cover").trim()})),void 0)}),e=e.replace(/(\d+)\s*deg/g,function(e,t){return 90-t+"deg"}).replace(/(linear|radial)-gradient/g,"-moz-$1-gradient")})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`; 227 | @process_opera: ~`(function(e){if(e=e||8121991,8121991==e)return e;var t={"to bottom":"top","to left":"right","to top":"bottom","to right":"left","ellipse at center":"center, ellipse cover","circle closest-side":"center center, circle contain","circle farthest-corner":"center center, circle cover","circle farthest-side":"center center, circle cover","ellipse closest-side":"center center, ellipse contain","ellipse farthest-corner":"center center, ellipse cover","ellipse farthest-side":"center center, ellipse cover"},r=/(radial-gradient\()([a-z- ]+)at\s+(\w+%?)\s*(\w*%?)/g,n=Object.keys(t);return n.some(function(n){return e.indexOf(n)>=0?(e=e.replace(new RegExp(n+"(?![ a-z0-9])","g"),t[n]),!0):(r.test(e)&&(e=e.replace(r,function(e,t,r,n,a){return t.trim()+n.trim()+" "+a.trim()+","+r.replace(/closest-side/g,"contain").replace(/farthest-corner/g,"cover").trim()})),void 0)}),e=e.replace(/(\d+)\s*deg/g,function(e,t){return 90-t+"deg"}).replace(/(linear|radial)-gradient/g,"-o-$1-gradient")})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 228 | @process: ~`(function(e){if(e=e||8121991,8121991==e)return e;var t={top:"to bottom",right:"to left",bottom:"to top",left:"to right"},r=Object.keys(t);return r.some(function(r){return e.indexOf(r)>=0&&!new RegExp("to\\s+"+r+"|at\\s+"+r,"g").test(e)?(e=e.replace(new RegExp(r),t[r]),!0):void 0}),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 229 | background-image: @process_ms; 230 | background-image: @process_webkit; 231 | background-image: @process_moz; 232 | background-image: @process_opera; 233 | background-image: @process; 234 | } 235 | 236 | .background-origin(...) { 237 | @process: ~`(function(e){return e||"padding-box"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 238 | -webkit-background-origin: @process; 239 | -moz-background-origin: @process; 240 | background-origin: @process; 241 | } 242 | 243 | .background-size(...) { 244 | @process: ~`(function(e){e=e||"auto auto";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 245 | -webkit-background-size: @process; 246 | -moz-background-size: @process; 247 | background-size: @process; 248 | } 249 | 250 | .blur(...) { 251 | @process: ~`(function(e){e=e||"0";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 252 | -webkit-filter: blur(@process); 253 | -moz-filter: blur(@process); 254 | -ms-filter: blur(@process); 255 | filter: blur(@process); 256 | } 257 | 258 | .border-bottom-left-radius(...) { 259 | @process: ~`(function(e){e=e||"0";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 260 | -webkit-border-bottom-left-radius: @process; -webkit-background-clip: padding-box; 261 | -moz-border-radius-bottomleft: @process; -moz-background-clip: padding; 262 | border-bottom-left-radius: @process; background-clip: padding-box; 263 | } 264 | 265 | .border-bottom-right-radius(...) { 266 | @process: ~`(function(e){e=e||"0";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 267 | -webkit-border-bottom-right-radius: @process; -webkit-background-clip: padding-box; 268 | -moz-border-radius-bottomright: @process; -moz-background-clip: padding; 269 | border-bottom-right-radius: @process; background-clip: padding-box; 270 | } 271 | 272 | .border-image(...) { 273 | @process: ~`(function(e){return e=e||8121991,/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 274 | -webkit-border-image: @process; 275 | -moz-border-image: @process; 276 | -o-border-image: @process; 277 | border-image: @process; 278 | } 279 | 280 | .border-radius(...) { 281 | @process: ~`(function(e){e=e||"0";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 282 | -webkit-border-radius: @process; -webkit-background-clip: padding-box; 283 | -moz-border-radius: @process; -moz-background-clip: padding; 284 | border-radius: @process; background-clip: padding-box; 285 | } 286 | 287 | .border-top-left-radius(...) { 288 | @process: ~`(function(e){e=e||"0";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 289 | -webkit-border-top-left-radius: @process; -webkit-background-clip: padding-box; 290 | -moz-border-radius-topleft: @process; -moz-background-clip: padding; 291 | border-top-left-radius: @process; background-clip: padding-box; 292 | } 293 | 294 | .border-top-right-radius(...) { 295 | @process: ~`(function(e){e=e||"0";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 296 | -webkit-border-top-right-radius: @process; -webkit-background-clip: padding-box; 297 | -moz-border-radius-topright: @process; -moz-background-clip: padding; 298 | border-top-right-radius: @process; background-clip: padding-box; 299 | } 300 | 301 | .box-shadow(...) { 302 | @process: ~`(function(e){e=e||"0";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 303 | -webkit-box-shadow: @process; 304 | -moz-box-shadow: @process; 305 | box-shadow: @process; 306 | } 307 | 308 | .box-sizing(...) { 309 | @process: ~`(function(e){return e=e||"content-box"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 310 | -webkit-box-sizing: @process; 311 | -moz-box-sizing: @process; 312 | box-sizing: @process; 313 | } 314 | 315 | .brightness(...) { 316 | @process: ~`(function(e){return e=e||"1"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 317 | -webkit-filter: brightness(@process); 318 | -moz-filter: brightness(@process); 319 | -ms-filter: brightness(@process); 320 | filter: brightness(@process); 321 | } 322 | 323 | .calc(...) { 324 | @process: ~`(function(e){function t(t,r){var a=");\n",c=n.split(","),i=c[0]+":"+t+"("+(c[1].trim()||0)+a;"start"==r?e="0;\n"+i:e+=i}e=e||8121991;var r="@{state}",n=e;if(8121991==e)return e;switch(r){case"1":t("-webkit-calc","start"),t("-moz-calc"),t("calc");break;case"2":t("-webkit-calc","start"),t("-moz-calc");break;case"3":t("-webkit-calc","start"),t("calc");break;case"4":t("-webkit-calc","start");break;case"5":t("-moz-calc","start"),t("calc");break;case"6":t("-moz-calc","start");break;case"7":t("calc","start")}return e=e.replace(/;$/g,"")})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 325 | @state: 1; -lh-property: @process; 326 | 327 | } 328 | 329 | .column-count(...) { 330 | @process: ~`(function(e){return e=e||"auto"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 331 | -webkit-column-count: @process; 332 | -moz-column-count: @process; 333 | column-count: @process; 334 | } 335 | 336 | .column-gap(...) { 337 | @process: ~`(function(e){e=e||"normal";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 338 | -webkit-column-gap: @process; 339 | -moz-column-gap: @process; 340 | column-gap: @process; 341 | } 342 | 343 | .column-rule(...) { 344 | @process: ~`(function(e){e=e||"medium none black";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 345 | -webkit-column-rule: @process; 346 | -moz-column-rule: @process; 347 | column-rule: @process; 348 | } 349 | 350 | .column-width(...) { 351 | @process: ~`(function(e){e=e||"auto";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 352 | -webkit-column-width: @process; 353 | -moz-column-width: @process; 354 | column-width: @process; 355 | } 356 | 357 | .columns(...) { 358 | @process: ~`(function(e){e=e||"auto auto";var t=/^\d+$/;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,""),e=e.split(" ")),t.test(e[0])&&(e[0]=e[0]+"px"),e.join(" ")})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 359 | -webkit-columns: @process; 360 | -moz-columns: @process; 361 | columns: @process; 362 | } 363 | 364 | .contrast(...) { 365 | @process: ~`(function(e){e=e||"100%";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"%"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 366 | -webkit-filter: ~"contrast(@{process})"; 367 | -moz-filter: ~"contrast(@{process})"; 368 | -ms-filter: ~"contrast(@{process})"; 369 | filter: ~"contrast(@{process})"; 370 | } 371 | 372 | .display(...) { 373 | @process_oldwebkit: ~`(function(e){return e="flex"==e||"inline-flex"==e?"-webkit-box":8121991})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 374 | @process_moz: ~`(function(e){return e="flex"==e||"inline-flex"==e?"-moz-box":8121991})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 375 | @process_webkit: ~`(function(e){return e="flex"==e||"inline-flex"==e?"-webkit-"+e:8121991})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 376 | @process_ms: ~`(function(e){return e="flex"==e?"-ms-flexbox":"inline-flex"==e?"-ms-inline-flexbox":8121991})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 377 | @process: ~`(function(e){return"flex"!=e&&"inline-flex"!=e&&(e=8121991),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 378 | display: @process_oldwebkit; 379 | display: @process_moz; 380 | display: @process_webkit; 381 | display: @process_ms; 382 | display: @process; 383 | } 384 | 385 | .drop-shadow(...) { 386 | @process: ~`(function(e){if(e=e||8121991,8121991==e)return e;var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 387 | -webkit-filter: drop-shadow(@process); 388 | -moz-filter: drop-shadow(@process); 389 | -ms-filter: drop-shadow(@process); 390 | filter: drop-shadow(@process); 391 | } 392 | 393 | .filter(...) { 394 | @process: ~`(function(e){return e=e||"none",/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 395 | -webkit-filter: @process; 396 | -moz-filter: @process; 397 | -ms-filter: @process; 398 | filter: @process; 399 | } 400 | 401 | .flex(...) { 402 | @process_olderwebkit: ~`(function(e){return/^\d+/.test(e)?e=e.match(/^\d+/)[0]:""==e&&(e="0"),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 403 | @process_moz: ~`(function(e){return/^\d+/.test(e)?e=e.match(/^\d+/)[0]:""==e&&(e="0"),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 404 | @process: ~`(function(e){return e=e||"0 1 auto",/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 405 | -webkit-box-flex: @process_olderwebkit; 406 | -moz-box-flex: @process_moz; 407 | -webkit-flex: @process; 408 | -ms-flex: @process; 409 | flex: @process; 410 | } 411 | 412 | .flex-basis(...) { 413 | @process: ~`(function(e){e=e||"auto";var t=/\d/gi,r=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return t.test(e)&&(e=e.replace(r,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 414 | -webkit-flex-basis: @process; 415 | flex-basis: @process; 416 | } 417 | 418 | .flex-direction(...) { 419 | @process_oldestwebkit: ~`(function(e){return e="row"==e||"column"==e?"normal":"row-reverse"==e||"column-reverse"==e?"reverse":8121991})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 420 | @process_oldermoz: ~`(function(e){return e="row"==e||"column"==e?"normal":"row-reverse"==e||"column-reverse"==e?"reverse":8121991})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 421 | @process_olderwebkit: ~`(function(e){return e="row"==e||"row-reverse"==e?"horizontal":"column"==e||"column-reverse"==e?"vertical":8121991})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 422 | @process_moz: ~`(function(e){return e="row"==e||"row-reverse"==e?"horizontal":"column"==e||"column-reverse"==e?"vertical":8121991})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 423 | @process: ~`(function(e){return e=e||"row"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 424 | -webkit-box-direction: @process_oldestwebkit; 425 | -moz-box-direction: @process_oldermoz; 426 | -webkit-box-orient: @process_olderwebkit; 427 | -moz-box-orient: @process_moz; 428 | -webkit-flex-direction: @process; 429 | -ms-flex-direction: @process; 430 | flex-direction: @process; 431 | } 432 | 433 | .flex-grow(...) { 434 | @process: ~`(function(e){return e=e||"0"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 435 | -webkit-flex-grow: @process; 436 | flex-grow: @process; 437 | } 438 | 439 | .flex-shrink(...) { 440 | @process: ~`(function(e){return e=e||"1"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 441 | -webkit-flex-shrink: @process; 442 | flex-shrink: @process; 443 | } 444 | 445 | .flex-wrap(...) { 446 | @process: ~`(function(e){return e=e||"nowrap"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 447 | -webkit-flex-wrap: @process; 448 | -ms-flex-wrap: @process; 449 | flex-wrap: @process; 450 | } 451 | 452 | .font-face(@fontname, @fontfile, @fontweight:normal, @fontstyle:normal) { 453 | font-family: "@{fontname}"; 454 | src: url("@{fontfile}.eot"); 455 | src: url("@{fontfile}.eot?#iefix") format("embedded-opentype"), 456 | url("@{fontfile}.woff") format("woff"), 457 | url("@{fontfile}.ttf") format("truetype"), 458 | url("@{fontfile}.svg#@{fontname}") format("svg"); 459 | font-weight: @fontweight; 460 | font-style: @fontstyle; 461 | } 462 | 463 | .grayscale(...) { 464 | @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"%"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 465 | -webkit-filter: grayscale(@process); 466 | -moz-filter: grayscale(@process); 467 | -ms-filter: grayscale(@process); 468 | filter: grayscale(@process); 469 | } 470 | 471 | .hue-rotate(...) { 472 | @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"deg"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 473 | -webkit-filter: hue-rotate(@process); 474 | -moz-filter: hue-rotate(@process); 475 | -ms-filter: hue-rotate(@process); 476 | filter: hue-rotate(@process); 477 | } 478 | 479 | .hyphens(...) { 480 | @process: ~`(function(e){return e=e||"manual"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 481 | -webkit-hyphens: @process; 482 | -moz-hyphens: @process; 483 | -ms-hyphens: @process; 484 | hyphens: @process; 485 | } 486 | 487 | .invert(...) { 488 | @process: ~`(function(e){e=e||"100%";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"%"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 489 | -webkit-filter: invert(@process); 490 | -moz-filter: invert(@process); 491 | -ms-filter: invert(@process); 492 | filter: invert(@process); 493 | } 494 | 495 | .justify-content(...) { 496 | @process_oldestWebkit: ~`(function(e){return e=e||"start","flex-start"==e?e="start":"flex-end"==e?e="end":("space-between"==e||"space-around"==e)&&(e="justify"),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 497 | @process_moz: ~`(function(e){return e=e||"start","flex-start"==e?e="start":"flex-end"==e?e="end":("space-between"==e||"space-around"==e)&&(e="justify"),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 498 | @process_ms: ~`(function(e){return e=e||"start","flex-start"==e?e="start":"flex-end"==e?e="end":"space-between"==e?e="justify":"space-around"==e&&(e="distribute"),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 499 | @process: ~`(function(e){return e=e||"flex-start"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 500 | -webkit-box-pack: @process_oldestWebkit; 501 | -moz-box-pack: @process_moz; 502 | -ms-flex-pack: @process_ms; 503 | -webkit-justify-content: @process; 504 | justify-content: @process; 505 | } 506 | 507 | .keyframes(...) { 508 | @process: ~`(function(e){function r(r,t,c){var i="}\n",u=n.split(/(^[a-zA-Z0-9-]+),/g),s=t+" "+u[1]+"{",o=["-webkit-","-moz-","-ms-",""];c?a.forEach(function(r){-1!==e.indexOf(r)&&(u[2]=u[2].replace(new RegExp(r,"g"),function(e){return c+e}))}):u[2]=u[2].replace(/{([^}]+)}/g,function(e,r){var t=r.split(";");t.forEach(function(e,r){a.forEach(function(n){-1!==e.indexOf(n)&&(t[r]="",o.forEach(function(a){t[r]+=e.trim().replace(new RegExp(n,"g"),function(e){return a+e})+";"}))})});var n=t.join(";").replace(/;;/g,";");return e.replace(r,n)}),s+=u[2]+i,"start"==r?e="0; } \n"+s:"startend"==r?e="0; } \n"+s.replace(i,""):e+="end"==r?s.replace(i,""):s}e=e||8121991;var t="@{state}",n=e;if(8121991==e)return e;var a=["animation","transform","filter"];switch(t){case"1":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-moz-keyframes","-moz-"),r(null,"@-o-keyframes","-o-"),r("end","@keyframes");break;case"2":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-moz-keyframes","-moz-"),r("end","@keyframes");break;case"3":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-moz-keyframes","-moz-"),r("end","@-o-keyframes","-o-");break;case"4":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-o-keyframes","-o-"),r("end","@keyframes");break;case"5":r("start","@-webkit-keyframes","-webkit-"),r("end","@-moz-keyframes","-moz-");break;case"6":r("start","@-webkit-keyframes","-webkit-"),r("end","@-o-keyframes","-o-");break;case"7":r("start","@-webkit-keyframes","-webkit-"),r("end","@keyframes");break;case"8":r("startend","@-webkit-keyframes","-webkit-");break;case"9":r("start","@-moz-keyframes","-moz-"),r(null,"@-o-keyframes","-o-"),r("end","@keyframes");break;case"10":r("start","@-moz-keyframes","-moz-"),r("end","@-o-keyframes","-o-");break;case"11":r("start","@-moz-keyframes","-moz-"),r("end","@keyframes");break;case"12":r("startend","@-moz-keyframes","-moz-");break;case"13":r("start","@-o-keyframes","-o-"),r("end","@keyframes");break;case"14":r("startend","@-o-keyframes","-o-");break;case"15":r("startend","@keyframes")}return e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 509 | @state: 1; lesshat-selector { -lh-property: @process; } 510 | 511 | 512 | 513 | } 514 | 515 | .opacity(...) { 516 | @process_ms: ~`(function(e){return e=e||"filter: alpha(opacity=100)","alpha(opacity="+Math.floor(100*e)+")"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 517 | @process: ~`(function(e){return e=e||"1"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 518 | zoom: 1; filter: @process_ms; 519 | -webkit-opacity: @process; 520 | -moz-opacity: @process; 521 | opacity: @process; 522 | } 523 | 524 | .order(...) { 525 | @process: ~`(function(e){return e=e||"0"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 526 | -webkit-box-ordinal-group: @process; 527 | -moz-box-ordinal-group: @process; 528 | -ms-flex-order: @process; 529 | -webkit-order: @process; 530 | order: @process; 531 | } 532 | 533 | .perspective(...) { 534 | @process: ~`(function(e){e=e||"none";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"px"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 535 | -webkit-perspective: @process; 536 | -moz-perspective: @process; 537 | perspective: @process; 538 | } 539 | 540 | .perspective-origin(...) { 541 | @process: ~`(function(e){e=e||"50% 50%";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"%"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 542 | -webkit-perspective-origin: @process; 543 | -moz-perspective-origin: @process; 544 | perspective-origin: @process; 545 | } 546 | 547 | .placeholder(@color:#aaa, @element: 08121991) { 548 | .inception (@arguments) when not (@element = 08121991) { 549 | @{element}::-webkit-input-placeholder { 550 | color: @color; 551 | } 552 | @{element}:-moz-placeholder { 553 | color: @color; 554 | } 555 | @{element}::-moz-placeholder { 556 | color: @color; 557 | } 558 | @{element}:-ms-input-placeholder { 559 | color: @color; 560 | } 561 | } 562 | .inception (@arguments) when (@element = 08121991) { 563 | &::-webkit-input-placeholder { 564 | color: @color; 565 | } 566 | &:-moz-placeholder { 567 | color: @color; 568 | } 569 | &::-moz-placeholder { 570 | color: @color; 571 | } 572 | &:-ms-input-placeholder { 573 | color: @color; 574 | } 575 | } 576 | .inception(@arguments); 577 | } 578 | 579 | .rotate(...) { 580 | @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"deg"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 581 | -webkit-transform: rotate(@process); 582 | -moz-transform: rotate(@process); 583 | -o-transform: rotate(@process); 584 | -ms-transform: rotate(@process); 585 | transform: rotate(@process); 586 | } 587 | 588 | .rotate3d(...) { 589 | @process: ~`(function(e){return e=e||"0, 0, 0, 0",e=e.replace(/,\s*\d+$/,function(e){return e+"deg"})})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 590 | -webkit-transform: rotate3d(@process); 591 | -moz-transform: rotate3d(@process); 592 | -o-transform: rotate3d(@process); 593 | -ms-transform: rotate3d(@process); 594 | transform: rotate3d(@process); 595 | } 596 | 597 | .rotateX(...) { 598 | @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"deg"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 599 | -webkit-transform: rotateX(@process); 600 | -moz-transform: rotateX(@process); 601 | -o-transform: rotateX(@process); 602 | -ms-transform: rotateX(@process); 603 | transform: rotateX(@process); 604 | } 605 | 606 | .rotateY(...) { 607 | @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"deg"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 608 | -webkit-transform: rotateY(@process); 609 | -moz-transform: rotateY(@process); 610 | -o-transform: rotateY(@process); 611 | -ms-transform: rotateY(@process); 612 | transform: rotateY(@process); 613 | } 614 | 615 | .rotateZ(...) { 616 | @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"deg"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 617 | -webkit-transform: rotateZ(@process); 618 | -moz-transform: rotateZ(@process); 619 | -o-transform: rotateZ(@process); 620 | -ms-transform: rotateZ(@process); 621 | transform: rotateZ(@process); 622 | } 623 | 624 | .saturate(...) { 625 | @process: ~`(function(e){e=e||"100%";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"%"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 626 | -webkit-filter: ~"saturate(@{process})"; 627 | -moz-filter: ~"saturate(@{process})"; 628 | -ms-filter: ~"saturate(@{process})"; 629 | filter: ~"saturate(@{process})"; 630 | } 631 | 632 | .scale(...) { 633 | @process: ~`(function(e){return e=e||"1"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 634 | -webkit-transform: scale(@process); 635 | -moz-transform: scale(@process); 636 | -o-transform: scale(@process); 637 | -ms-transform: scale(@process); 638 | transform: scale(@process); 639 | } 640 | 641 | .scale3d(...) { 642 | @process: ~`(function(e){return e=e||"1, 1, 1"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 643 | -webkit-transform: scale3d(@process); 644 | -moz-transform: scale3d(@process); 645 | -o-transform: scale3d(@process); 646 | -ms-transform: scale3d(@process); 647 | transform: scale3d(@process); 648 | } 649 | 650 | .scaleX(...) { 651 | @process: ~`(function(e){return e=e||"1"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 652 | -webkit-transform: scaleX(@process); 653 | -moz-transform: scaleX(@process); 654 | -o-transform: scaleX(@process); 655 | -ms-transform: scaleX(@process); 656 | transform: scaleX(@process); 657 | } 658 | 659 | .scaleY(...) { 660 | @process: ~`(function(e){return e=e||"1"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 661 | -webkit-transform: scaleY(@process); 662 | -moz-transform: scaleY(@process); 663 | -o-transform: scaleY(@process); 664 | -ms-transform: scaleY(@process); 665 | transform: scaleY(@process); 666 | } 667 | 668 | .scaleZ(...) { 669 | @process: ~`(function(e){return e=e||"1"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 670 | -webkit-transform: scaleZ(@process); 671 | -moz-transform: scaleZ(@process); 672 | -o-transform: scaleZ(@process); 673 | -ms-transform: scaleZ(@process); 674 | transform: scaleZ(@process); 675 | } 676 | 677 | .selection(...) { 678 | @process: ~`(function(e){function r(r,t){var a="}\n",c=n.split(","),u=(c[1]||"")+t+"{"+c[0]+a;"start"==r?e="0; } \n"+u:"startend"==r?e="0; } \n"+u.replace(a,""):e+="end"==r?u.replace(a,""):u}e=e||8121991;var t="@{state}",n=e;if(8121991==e)return e;switch(t){case"1":r("start","::selection"),r("end","::-moz-selection");break;case"2":r("startend","::selection");break;case"3":r("startend","::-moz-selection")}return e=e.replace(/;$/g,"")})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 679 | @state: 1; lesshat-selector { -lh-property: @process; } 680 | 681 | } 682 | 683 | .sepia(...) { 684 | @process: ~`(function(e){e=e||"100%";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"%"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 685 | -webkit-filter: sepia(@process); 686 | -moz-filter: sepia(@process); 687 | -ms-filter: sepia(@process); 688 | filter: sepia(@process); 689 | } 690 | 691 | .size(@square) { 692 | @unit: 'px'; 693 | .process(@square) when (ispixel(@square)), (isem(@square)), (ispercentage(@square)), (iskeyword(@square)) { 694 | width: @square; 695 | height: @square; 696 | } 697 | 698 | .process(@square) when not (ispixel(@square)) and not (isem(@square)) and not (ispercentage(@square)) and not (isstring(@square)) and not (iskeyword(@square)) { 699 | width: ~`@{square} + @{unit}`; 700 | height: ~`@{square} + @{unit}`; 701 | } 702 | 703 | .process(@square); 704 | 705 | } 706 | 707 | .size(@width, @height) { 708 | @unit: 'px'; 709 | .process(@width, @height) when (ispixel(@width)), (isem(@width)), (ispercentage(@width)), (iskeyword(@width)) { 710 | .kittens(@height) when (ispixel(@height)), (isem(@height)), (ispercentage(@height)), (iskeyword(@height)) { 711 | width: @width; 712 | height: @height; 713 | } 714 | .kittens(@height) when not (ispixel(@height)) and not (isem(@height)) and not (ispercentage(@height)) and not (iskeyword(@height)) { 715 | width: @width; 716 | height: ~`@{height} + @{unit}`; 717 | } 718 | .kittens(@height); 719 | } 720 | 721 | .process(@width, @height) when (ispixel(@height)), (isem(@height)), (ispercentage(@height)), (iskeyword(@height)) { 722 | .kittens(@width) when (ispixel(@width)), (isem(@width)), (ispercentage(@width)), (iskeyword(@width)) {} 723 | .kittens(@width) when not (ispixel(@width)) and not (isem(@width)) and not (ispercentage(@width)) and not (iskeyword(@width)) { 724 | width: ~`@{width} + @{unit}`; 725 | height: @height; 726 | } 727 | .kittens(@width); 728 | } 729 | 730 | .process(@width, @height) when not (ispixel(@width)) and not (isem(@width)) and not (ispercentage(@width)) and not (iskeyword(@width)) and not (ispixel(@height)) and not (isem(@height)) and not (ispercentage(@height)) and not (iskeyword(@height)) { 731 | width: ~`@{width} + @{unit}`; 732 | height: ~`@{height} + @{unit}`; 733 | } 734 | 735 | .process(@width, @height); 736 | 737 | } 738 | 739 | .skew(...) { 740 | @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"deg"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 741 | -webkit-transform: skew(@process); 742 | -moz-transform: skew(@process); 743 | -o-transform: skew(@process); 744 | -ms-transform: skew(@process); 745 | transform: skew(@process); 746 | } 747 | 748 | .skewX(...) { 749 | @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"deg"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 750 | -webkit-transform: skewX(@process); 751 | -moz-transform: skewX(@process); 752 | -o-transform: skewX(@process); 753 | -ms-transform: skewX(@process); 754 | transform: skewX(@process); 755 | } 756 | 757 | .skewY(...) { 758 | @process: ~`(function(e){e=e||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"deg"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 759 | -webkit-transform: skewY(@process); 760 | -moz-transform: skewY(@process); 761 | -o-transform: skewY(@process); 762 | -ms-transform: skewY(@process); 763 | transform: skewY(@process); 764 | } 765 | 766 | .transform(...) { 767 | @process: ~`(function(e){e=e||"none";var r={translate:"px",rotate:"deg",rotate3d:"deg",skew:"deg"};/^\w*\(?[a-z0-9.]*\)?/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,""));for(var t in r)e.indexOf(t)>=0&&(e=e.replace(new RegExp(t+"[\\w]?\\([a-z0-9, %]*\\)"),function(e){var n=/(\d+\.?\d*)(?!\w|%)/g;return"rotate3d"==t&&(n=/,\s*\d+$/),e.replace(n,function(e){return e+r[t]})}));return e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 768 | -webkit-transform: @process; 769 | -moz-transform: @process; 770 | -o-transform: @process; 771 | -ms-transform: @process; 772 | transform: @process; 773 | } 774 | 775 | .transform-origin(...) { 776 | @process: ~`(function(e){e=e||"50% 50% 0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),r.test(e)&&(e=e.replace(t,function(e){return 0==e&&e||e+"%"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 777 | -webkit-transform-origin: @process; 778 | -moz-transform-origin: @process; 779 | -o-transform-origin: @process; 780 | -ms-transform-origin: @process; 781 | transform-origin: @process; 782 | } 783 | 784 | .transform-style(...) { 785 | @process: ~`(function(e){return e=e||"flat"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 786 | -webkit-transform-style: @process; 787 | -moz-transform-style: @process; 788 | -o-transform-style: @process; 789 | -ms-transform-style: @process; 790 | transform-style: @process; 791 | } 792 | 793 | .transition(...) { 794 | @process_webkit: ~`(function(e){e=e||"all 0 ease 0";var r=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],t="-webkit-",n=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),r.forEach(function(r){-1!==e.indexOf(r)&&(e=e.replace(new RegExp(r,"g"),function(e){return t+e}))}),n.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 795 | @process_moz: ~`(function(e){e=e||"all 0 ease 0";var r=["background-size","box-shadow","column","transform","filter"],t="-moz-",n=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),r.forEach(function(r){-1!==e.indexOf(r)&&(e=e.replace(new RegExp(r,"g"),function(e){return t+e}))}),n.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 796 | @process_opera: ~`(function(e){e=e||"all 0 ease 0";var r=["transform"],t="-o-",n=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),r.forEach(function(r){-1!==e.indexOf(r)&&(e=e.replace(new RegExp(r,"g"),function(e){return t+e}))}),n.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 797 | @process: ~`(function(e){e=e||"all 0 ease 0";var r=["-webkit-","-moz-","-o-",""],t=["column","transform","filter"],n=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,""));var c=e.split(/(?:,)(?![^(]*\))/g);return c.forEach(function(e,n){t.forEach(function(t){-1!==e.indexOf(t)&&(c[n]="",r.forEach(function(a,u){c[n]+=e.trim().replace(new RegExp(t,"g"),function(e){return a+e}),u10?"ms":"s"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 798 | -webkit-transition: @process_webkit; 799 | -moz-transition: @process_moz; 800 | -o-transition: @process_opera; 801 | transition: @process; 802 | } 803 | 804 | .transition-delay(...) { 805 | @process: ~`(function(e){e=e||"0";var r=/(?:\d)(?:ms|s)/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)||"0"===e||(e=e.replace(t,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 806 | -webkit-transition-delay: @process; 807 | -moz-transition-delay: @process; 808 | -o-transition-delay: @process; 809 | transition-delay: @process; 810 | } 811 | 812 | .transition-duration(...) { 813 | @process: ~`(function(e){e=e||"0";var r=/ms|s/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(e)||"0"===e||(e=e.replace(t,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 814 | -webkit-transition-duration: @process; 815 | -moz-transition-duration: @process; 816 | -o-transition-duration: @process; 817 | transition-duration: @process; 818 | } 819 | 820 | .transition-property(...) { 821 | @process_webkit: ~`(function(e){e=e||"all";var r=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],t="-webkit-";return r.forEach(function(r){-1!==e.indexOf(r)&&(e=e.replace(new RegExp(r,"g"),function(e){return t+e}))}),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 822 | @process_moz: ~`(function(e){e=e||"all";var r=["background-size","box-shadow","column","transform","filter"],t="-moz-";return r.forEach(function(r){-1!==e.indexOf(r)&&(e=e.replace(new RegExp(r,"g"),function(e){return t+e}))}),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 823 | @process_opera: ~`(function(e){e=e||"all";var r=["transform"],t="-o-";return r.forEach(function(r){-1!==e.indexOf(r)&&(e=e.replace(new RegExp(r,"g"),function(e){return t+e}))}),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; 824 | @process: ~`(function(e){e=e||"all";var r=["-webkit-","-moz-","-o-",""],t=["column","transform","filter"],n=e.split(/(?:,)(?![^(]*\))/g);return n.forEach(function(e,a){t.forEach(function(t){-1!==e.indexOf(t)&&(n[a]="",r.forEach(function(c,u){n[a]+=e.trim().replace(new RegExp(t,"g"),function(e){return c+e}),u li { 81 | display: inline-block; 82 | padding: 0; 83 | margin: 0; 84 | } 85 | } 86 | .dapp-vertical-menu { 87 | > li { 88 | display: block; 89 | padding: 0; 90 | margin: 0; 91 | } 92 | } 93 | 94 | 95 | // ANIMATIONS 96 | .cubic-bezier { 97 | // .transition-timing-function(cubic-bezier(0,0,.58,1)); 98 | .transition-timing-function(cubic-bezier(.15,.3,.1,1)); 99 | 100 | &.animate { 101 | // .transition-timing-function(cubic-bezier(.42,0,1,1)); 102 | .transition-timing-function(cubic-bezier(.5,.1,0.2,1)); 103 | } 104 | } -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'ethereum:dapp-styles', 3 | summary: 'CSS/LESS framework for dapps', 4 | version: '0.5.8', 5 | git: 'http://github.com/ethereum/dapp-styles' 6 | }); 7 | 8 | Package.onUse(function(api) { 9 | api.versionsFrom('1.2'); 10 | api.use('less', 'client'); 11 | 12 | api.addAssets('icons/Simple-Line-Icons.svg', 'client'); 13 | api.addAssets('icons/Simple-Line-Icons.eot', 'client'); 14 | api.addAssets('icons/Simple-Line-Icons.ttf', 'client'); 15 | api.addAssets('icons/Simple-Line-Icons.woff', 'client'); 16 | 17 | api.addAssets('fonts/Montserrat-Black.otf', 'client'); 18 | api.addAssets('fonts/Montserrat-Bold.otf', 'client'); 19 | api.addAssets('fonts/Montserrat-Hairline.otf', 'client'); 20 | api.addAssets('fonts/Montserrat-Light.otf', 'client'); 21 | api.addAssets('fonts/Montserrat-Regular.otf', 'client'); 22 | api.addAssets('fonts/SourceSansPro-Black.otf', 'client'); 23 | // api.addAssets('fonts/SourceSansPro-Blacklt.otf', 'client'); 24 | api.addAssets('fonts/SourceSansPro-Bold.otf', 'client'); 25 | // api.addAssets('fonts/SourceSansPro-Boldlt.otf', 'client'); 26 | api.addAssets('fonts/SourceSansPro-Light.otf', 'client'); 27 | // api.addAssets('fonts/SourceSansPro-Lightlt.otf', 'client'); 28 | api.addAssets('fonts/SourceSansPro-ExtraLight.otf', 'client'); 29 | // api.addAssets('fonts/SourceSansPro-ExtraLightlt.otf', 'client'); 30 | api.addAssets('fonts/SourceSansPro-Regular.otf', 'client'); 31 | api.addAssets('fonts/SourceSansPro-Semibold.otf', 'client'); 32 | // api.addAssets('fonts/SourceSansPro-Semiboldlt.otf', 'client'); 33 | // api.addAssets('fonts/SourceSansPro-lt.otf', 'client'); 34 | 35 | api.addFiles('lib/base/base/_variables.import.less', 'client'); // Global Variables 36 | 37 | api.addFiles('lib/base/base/_mixins.import.less', 'client'); // Base Mixins 38 | api.addFiles('lib/base/base/_resets.import.less', 'client'); // General Resets 39 | 40 | // api.addFiles('lib/base/base/_global.import.less', 'client'); // Global Typography and Headings 41 | // api.addFiles('lib/base/base/_lists.import.less', 'client'); // Unordered Lists, Ordered Lists and Navigation 42 | // api.addFiles('lib/base/base/_blockquotes.import.less', 'client'); // Blockquotes 43 | // api.addFiles('lib/base/base/_code.import.less', 'client'); // Code 44 | // api.addFiles('lib/base/base/_tables.import.less', 'client'); // Tables 45 | // api.addFiles('lib/base/base/_forms.import.less', 'client'); // Forms, Input Types and Buttons 46 | 47 | // api.addFiles('lib/base/base/_buttons.import.less', 'client'); // Custom Base Buttons 48 | // api.addFiles('lib/base/base/_helpers.import.less', 'client'); // Custom Base Helpers 49 | 50 | api.addFiles('lib/base/base/_grid.import.less', 'client'); // Grid 51 | api.addFiles('lib/base/base/_tablet-grid.import.less', 'client'); // Tablet Grid 52 | api.addFiles('lib/base/base/_mobile-grid.import.less', 'client'); // Mobile Grid 53 | api.addFiles('lib/base/base/_print.import.less', 'client'); // Print Page Styles 54 | 55 | api.addFiles('lib/base/_desktop-styles.import.less', 'client'); 56 | api.addFiles('lib/base/_mobile-styles.import.less', 'client'); 57 | api.addFiles('lib/base/_tablet-styles.import.less', 'client'); 58 | 59 | api.addFiles('lib/base/style.import.less', 'client'); 60 | api.addFiles('lib/simple-line-icons.import.less', 'client'); 61 | api.addFiles('lib/normalize.import.less', 'client'); 62 | api.addFiles('lib/lesshat.import.less', 'client'); 63 | api.addFiles('fonts.import.less', 'client'); 64 | api.addFiles('constants.import.less', 'client'); 65 | api.addFiles('mixins.import.less', 'client'); 66 | api.addFiles('elements.import.less', 'client'); 67 | api.addFiles('containers.import.less', 'client'); 68 | api.addFiles('buttons.import.less', 'client'); 69 | api.addFiles('responsive.import.less', 'client'); 70 | 71 | api.addFiles('dapp-styles.less', 'client', {isImport: true}); 72 | }); 73 | 74 | // Package.onTest(function(api) { 75 | // api.use('tinytest'); 76 | // api.use('ethereum:blocks'); 77 | // api.addFiles('blocks-tests.js'); 78 | // }); 79 | 80 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dapp-styles", 3 | "namespace": "ethereum", 4 | "version": "0.5.6", 5 | "description": "CSS/LESS framework for dapps", 6 | "directories": { 7 | "lib": "./" 8 | }, 9 | "devDependencies": { 10 | "gulp": ">=3.9.0", 11 | "gulp-less": "^3.0.3", 12 | "gulp-replace": "^0.5.4" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/ethereum/dapp-styles.git" 17 | }, 18 | "homepage": "https://github.com/ethereum/dapp-styles", 19 | "bugs": { 20 | "url": "https://github.com/ethereum/dapp-styles/issues" 21 | }, 22 | "keywords": [ 23 | "ethereum", 24 | "dapp", 25 | "styles" 26 | ], 27 | "author": "ethdev.com", 28 | "authors": [ 29 | { 30 | "name": "Alex van de Sande", 31 | "email": "avsa@ethereum.org", 32 | "homepage": "https://github.com/alexvandesande" 33 | }, 34 | { 35 | "name": "Fabian Vogelsteller", 36 | "email": "fabian@ethdev.com", 37 | "homepage": "http://frozeman.de" 38 | } 39 | ], 40 | "license": "MIST" 41 | } 42 | -------------------------------------------------------------------------------- /responsive.import.less: -------------------------------------------------------------------------------- 1 | /* #### All small screens #### */ 2 | // @media screen and (min-width: 640px){ 3 | // .dapp-flex-content { 4 | // .flex-direction(row); 5 | // .flex(1); 6 | // } 7 | 8 | // main.dapp-content { 9 | // .flex(1); 10 | // } 11 | 12 | // aside.dapp-main { 13 | // .flex(0 0 200px); 14 | // } 15 | // } 16 | 17 | /* #### All small tablets screens #### */ 18 | @media screen and (max-width: 768px){ 19 | .dapp-actionbar { 20 | flex: 1 100%; 21 | nav ul { 22 | display: flex; 23 | li { 24 | flex: 1 25 | } 26 | } 27 | } 28 | } 29 | 30 | /* #### All small phone screens landscape #### */ 31 | @media screen and (max-width: 576px){ 32 | aside.dapp-main { 33 | .flex(0 0 @widthSidebarSmall); 34 | } 35 | 36 | .dapp-header { 37 | padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/2 0; 38 | 39 | nav ul a { 40 | padding: @defaultPaddingVertical/4 @defaultPaddingHorizontal/2; 41 | } 42 | } 43 | } 44 | 45 | @media screen and (max-width: 800px){ 46 | // aside.dapp-actions { 47 | // width: @widthToolbarSmall; 48 | // } 49 | } 50 | 51 | /* #### All small phone screens porttrait #### */ 52 | @media screen and (max-width: 480px){ 53 | 54 | } 55 | 56 | 57 | /* #### Mobile Phones Portrait #### */ 58 | @media screen and (max-device-width: 480px) and (orientation: portrait){ 59 | body { 60 | font-size: 14px; 61 | } 62 | } 63 | 64 | /* #### Mobile Phones Landscape #### */ 65 | @media screen and (max-device-width: 640px) and (orientation: landscape){ 66 | body { 67 | font-size: 15px; 68 | } 69 | } 70 | 71 | /* #### Mobile Phones Portrait or Landscape #### */ 72 | @media screen and (max-device-width: 640px){ 73 | 74 | } 75 | 76 | /* #### iPhone 4+ Portrait or Landscape #### */ 77 | @media screen and (max-device-width: 580px) and (-webkit-min-device-pixel-ratio: 2){ 78 | 79 | } 80 | 81 | /* #### Tablets Portrait #### */ 82 | @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){ 83 | 84 | } 85 | 86 | 87 | /* #### Tablets Landscape #### */ 88 | @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){ 89 | 90 | } 91 | 92 | 93 | /* #### Desktops #### */ 94 | @media screen and (min-width: 1024px){ 95 | 96 | } -------------------------------------------------------------------------------- /screenshots/dapp-account-list-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IDouble/dapp-styles/fed53b86f6675a7318aac020dc318b6a897a0465/screenshots/dapp-account-list-small.png --------------------------------------------------------------------------------