├── demo.png ├── logo.png ├── favicon.ico ├── profile.png ├── social.png ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── site.webmanifest ├── ridge-light.css ├── ridge-dark.css ├── themes ├── ridge-valentines-dark.css ├── ridge-watermelon-dark.css ├── ridge-valentines-light.css └── ridge-watermelon-light.css ├── atom-one-dark.css ├── atom-one-light.css ├── README.md ├── index.html ├── highlight.pack.js ├── examples.html ├── ridge.css └── alpine.js /demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swlkr/ridgecss/HEAD/demo.png -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swlkr/ridgecss/HEAD/logo.png -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swlkr/ridgecss/HEAD/favicon.ico -------------------------------------------------------------------------------- /profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swlkr/ridgecss/HEAD/profile.png -------------------------------------------------------------------------------- /social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swlkr/ridgecss/HEAD/social.png -------------------------------------------------------------------------------- /favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swlkr/ridgecss/HEAD/favicon-16x16.png -------------------------------------------------------------------------------- /favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swlkr/ridgecss/HEAD/favicon-32x32.png -------------------------------------------------------------------------------- /apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swlkr/ridgecss/HEAD/apple-touch-icon.png -------------------------------------------------------------------------------- /android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swlkr/ridgecss/HEAD/android-chrome-192x192.png -------------------------------------------------------------------------------- /android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swlkr/ridgecss/HEAD/android-chrome-512x512.png -------------------------------------------------------------------------------- /site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /ridge-light.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #fff; 3 | --background-alt: #efefef; 4 | --background-inverse: #313a46; 5 | 6 | --main: #363636; 7 | --bright: #333; 8 | --muted: #999999; 9 | 10 | --link: #0076d1; 11 | --focus: #0096bfab; 12 | --border: #dbdbdb; 13 | --code: var(--main); 14 | 15 | --animation-duration: 0.1s; 16 | --button: var(--link); 17 | --button-hover: #dddddd; 18 | 19 | --form-placeholder: #949494; 20 | --form-text: var(--main); 21 | 22 | --variable: #39a33c; 23 | --highlight: #ffff00; 24 | 25 | --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); 26 | 27 | --shadow: 1px 1px 4px var(#999); 28 | } 29 | -------------------------------------------------------------------------------- /ridge-dark.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #202b38; 3 | --background-alt: #161f27; 4 | --background-inverse: #f7f7f7; 5 | 6 | --main: #eee; 7 | --bright: #ffffff; 8 | --muted: #717880; 9 | 10 | --link: #41adff; 11 | --focus: #0096bfab; 12 | --border: #161f27; 13 | --code: var(--main); 14 | 15 | --animation-duration: 0.1s; 16 | --button: var(--link); 17 | --button-hover: #324759; 18 | 19 | --form-placeholder: #a9a9a9; 20 | --form-text: var(--bright); 21 | 22 | --variable: #d941e2; 23 | --highlight: #efdb43; 24 | 25 | --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); 26 | 27 | --shadow: 1px 1px 4px var(--background-alt); 28 | } 29 | -------------------------------------------------------------------------------- /themes/ridge-valentines-dark.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #2e3035; 3 | --background-alt: #383b44; 4 | --background-inverse: #ebebec; 5 | 6 | --main: #faf9f9; 7 | --bright: #fff; 8 | --muted: #afaeae; 9 | 10 | --link: #e78faf; 11 | --focus: #f29fbd; 12 | --border: #272930; 13 | --code: #afaeae; 14 | 15 | --animation-duration: 0.25s; 16 | --button: #e78faf; 17 | --button-hover: #eeb1c7; 18 | 19 | --form-placeholder: #818391; 20 | --form-text: #fcfbfb; 21 | 22 | --variable: #8eb05f; 23 | --highlight: #fbe2eb; 24 | 25 | --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); 26 | 27 | --shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.3), 0 4px 25px 0px rgba(0,0,0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); 28 | } 29 | -------------------------------------------------------------------------------- /themes/ridge-watermelon-dark.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #1f2232; 3 | --background-alt: #2d3047; 4 | --background-inverse: #faf9f9; 5 | 6 | --main: #faf9f9; 7 | --bright: #fcfbfb; 8 | --muted: #afaeae; 9 | 10 | --link: #d56166; 11 | --focus: #9698a3; 12 | --border: #171824; 13 | --code: #171824; 14 | 15 | --animation-duration: 0.25s; 16 | --button: #aa4e52; 17 | --button-hover: #803a3d; 18 | 19 | --form-placeholder: #818391; 20 | --form-text: #fcfbfb; 21 | 22 | --variable: #8e7d8c; 23 | --highlight: #8e7d8c; 24 | 25 | --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); 26 | 27 | --shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.3), 0 4px 25px 0px rgba(0,0,0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); 28 | } 29 | -------------------------------------------------------------------------------- /themes/ridge-valentines-light.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #fef5f8; 3 | --background-alt: #f9cfde; 4 | --background-inverse: #383b44; 5 | 6 | --main: #56527c; 7 | --bright: #f29fbd; 8 | --muted: #a2647a; 9 | 10 | --link: #aba3f7; 11 | --focus: #e78faf; 12 | --border: var(--background-alt); 13 | --code: #383b44; 14 | 15 | --animation-duration: 0.25s; 16 | --button: #aba3f7; 17 | --button-hover: #676294; 18 | 19 | --form-placeholder: #f6bcd1; 20 | --form-text: #383b44; 21 | 22 | --variable: #8eb05f; 23 | --highlight: #fbe2eb; 24 | 25 | --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); 26 | 27 | --shadow: 0 8px 20px -5px rgba(100, 100, 100, 0.3), 0 4px 25px 0px rgba(100,100,100, 0.12), 0 8px 10px -5px rgba(100, 100, 100, 0.2); 28 | } 29 | -------------------------------------------------------------------------------- /themes/ridge-watermelon-light.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #ffffff; 3 | --background-alt: #eaeaed; 4 | --background-inverse: #2d3047; 5 | 6 | --main: #363636; 7 | --bright: #2d3047; 8 | --muted: #afaeae; 9 | 10 | --link: #d56166; 11 | --focus: #afaeae; 12 | --border: var(--background-alt); 13 | --code: #171824; 14 | 15 | --animation-duration: 0.25s; 16 | --button: #d56166; 17 | --button-hover: #803a3d; 18 | 19 | --form-placeholder: #e8e5e8; 20 | --form-text: #323232; 21 | 22 | --variable: #8e7d8c; 23 | --highlight: #8e7d8c; 24 | 25 | --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); 26 | 27 | --shadow: 0 16px 38px -12px rgba(100, 100, 100, 0.3), 0 4px 25px 0px rgba(100,100,100, 0.12), 0 8px 10px -5px rgba(100, 100, 100, 0.2); 28 | } 29 | -------------------------------------------------------------------------------- /atom-one-dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Atom One Dark by Daniel Gamage 4 | Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax 5 | 6 | base: #282c34 7 | mono-1: #abb2bf 8 | mono-2: #818896 9 | mono-3: #5c6370 10 | hue-1: #56b6c2 11 | hue-2: #61aeee 12 | hue-3: #c678dd 13 | hue-4: #98c379 14 | hue-5: #e06c75 15 | hue-5-2: #be5046 16 | hue-6: #d19a66 17 | hue-6-2: #e6c07b 18 | 19 | */ 20 | 21 | .hljs { 22 | display: block; 23 | overflow-x: auto; 24 | padding: 0.5em; 25 | color: #abb2bf; 26 | background: #282c34; 27 | } 28 | 29 | .hljs-comment, 30 | .hljs-quote { 31 | color: #5c6370; 32 | font-style: italic; 33 | } 34 | 35 | .hljs-doctag, 36 | .hljs-keyword, 37 | .hljs-formula { 38 | color: #c678dd; 39 | } 40 | 41 | .hljs-section, 42 | .hljs-name, 43 | .hljs-selector-tag, 44 | .hljs-deletion, 45 | .hljs-subst { 46 | color: #e06c75; 47 | } 48 | 49 | .hljs-literal { 50 | color: #56b6c2; 51 | } 52 | 53 | .hljs-string, 54 | .hljs-regexp, 55 | .hljs-addition, 56 | .hljs-attribute, 57 | .hljs-meta-string { 58 | color: #98c379; 59 | } 60 | 61 | .hljs-built_in, 62 | .hljs-class .hljs-title { 63 | color: #e6c07b; 64 | } 65 | 66 | .hljs-attr, 67 | .hljs-variable, 68 | .hljs-template-variable, 69 | .hljs-type, 70 | .hljs-selector-class, 71 | .hljs-selector-attr, 72 | .hljs-selector-pseudo, 73 | .hljs-number { 74 | color: #d19a66; 75 | } 76 | 77 | .hljs-symbol, 78 | .hljs-bullet, 79 | .hljs-link, 80 | .hljs-meta, 81 | .hljs-selector-id, 82 | .hljs-title { 83 | color: #61aeee; 84 | } 85 | 86 | .hljs-emphasis { 87 | font-style: italic; 88 | } 89 | 90 | .hljs-strong { 91 | font-weight: bold; 92 | } 93 | 94 | .hljs-link { 95 | text-decoration: underline; 96 | } 97 | -------------------------------------------------------------------------------- /atom-one-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Atom One Light by Daniel Gamage 4 | Original One Light Syntax theme from https://github.com/atom/one-light-syntax 5 | 6 | base: #fafafa 7 | mono-1: #383a42 8 | mono-2: #686b77 9 | mono-3: #a0a1a7 10 | hue-1: #0184bb 11 | hue-2: #4078f2 12 | hue-3: #a626a4 13 | hue-4: #50a14f 14 | hue-5: #e45649 15 | hue-5-2: #c91243 16 | hue-6: #986801 17 | hue-6-2: #c18401 18 | 19 | */ 20 | 21 | .hljs { 22 | display: block; 23 | overflow-x: auto; 24 | padding: 0.5em; 25 | color: #383a42; 26 | background: #fafafa; 27 | } 28 | 29 | .hljs-comment, 30 | .hljs-quote { 31 | color: #a0a1a7; 32 | font-style: italic; 33 | } 34 | 35 | .hljs-doctag, 36 | .hljs-keyword, 37 | .hljs-formula { 38 | color: #a626a4; 39 | } 40 | 41 | .hljs-section, 42 | .hljs-name, 43 | .hljs-selector-tag, 44 | .hljs-deletion, 45 | .hljs-subst { 46 | color: #e45649; 47 | } 48 | 49 | .hljs-literal { 50 | color: #0184bb; 51 | } 52 | 53 | .hljs-string, 54 | .hljs-regexp, 55 | .hljs-addition, 56 | .hljs-attribute, 57 | .hljs-meta-string { 58 | color: #50a14f; 59 | } 60 | 61 | .hljs-built_in, 62 | .hljs-class .hljs-title { 63 | color: #c18401; 64 | } 65 | 66 | .hljs-attr, 67 | .hljs-variable, 68 | .hljs-template-variable, 69 | .hljs-type, 70 | .hljs-selector-class, 71 | .hljs-selector-attr, 72 | .hljs-selector-pseudo, 73 | .hljs-number { 74 | color: #986801; 75 | } 76 | 77 | .hljs-symbol, 78 | .hljs-bullet, 79 | .hljs-link, 80 | .hljs-meta, 81 | .hljs-selector-id, 82 | .hljs-title { 83 | color: #4078f2; 84 | } 85 | 86 | .hljs-emphasis { 87 | font-style: italic; 88 | } 89 | 90 | .hljs-strong { 91 | font-weight: bold; 92 | } 93 | 94 | .hljs-link { 95 | text-decoration: underline; 96 | } 97 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ridge.css 2 | 3 | > The clearest way into the Universe is through a forest wilderness. - John Muir 4 | 5 | ridge.css is a set of classless css themes, layout helpers via [pylon.css](https://github.com/almonk/pylon) and optional [alpine.js](https://github.com/alpinejs/alpine) code to help you write _fast web apps fast_ 6 | 7 | ## Usage 8 | Try before you buy! Here's how your html could look after applying ridge.css (with the default dark theme) 9 | 10 | ```html 11 | 12 | 13 | 14 | 15 | 16 | ridge.css 17 | 18 | 19 | 20 | 21 | 22 | 23 | Cool logo 24 | 25 | 26 | Pricing 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |

Welcome to ridge.css!

35 | 36 | 37 | 38 | 39 | ``` 40 | 41 | Here's a screenshot of how that looks: 42 | 43 | ![screenshot of default dark theme](demo.png) 44 | 45 | ## Install 46 | 47 | Download a theme, and add it to your html: 48 | 49 | ```html 50 | 51 | 52 | 53 | 54 | 55 | ``` 56 | 57 | The example above adds both light and dark default themes and switches depending on the OS's dark mode setting. 58 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ridge.css 15 | 18 | 21 | 24 | 27 | 30 | 33 | 36 | 37 | 38 | 39 | 40 |
41 | 42 | 43 | 44 | 45 | green blue gradient mountain icon 46 | ridge.css 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | Examples 62 |
63 | Themes 64 | 68 |
69 | Github 70 | 71 | 72 | 73 | 74 | 75 |

76 | Make web apps quickly without writing css 77 |

78 |

79 | Make web apps quickly without writing css 80 |

81 |

82 | classless css mixed with a dash of atomic css, swift ui inspired elements and alpine.js markup 83 |

84 | 85 | 86 | 87 |

Typography

88 | 89 |

h1

90 |

h2

91 |

h3

92 |

h4

93 |
h5
94 |
h6
95 | 96 |

97 | This is a short bit of text in a paragraph tag 98 |
99 | strong 100 | b 101 | em 102 | italic 103 | underline 104 | strikethrough 105 | mark 106 | l x w x h 107 | Cmd+P 108 |

109 | 110 |
111 | Climb the mountains and get their good tidings 112 |
113 | John Muir 114 |
115 |
116 | 117 | 118 | 119 |

Lists

120 | 124 | 125 |
    126 |
  1. Ordered list
    2. 127 |
  2. Ordered links
    3. 128 |
129 | 130 |
131 | 132 |
Description title
133 |
Description
134 | 135 |
136 | 137 | 138 | 139 |

Buttons

140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 |

Forms

152 | 153 | 154 | 155 | 156 | 157 | 158 | 162 | 163 | 167 | 168 | 172 | 173 | 174 | 175 | 176 | 177 | 182 | 183 | 184 | 185 |

Tables

186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 |
OneTwoThreeFourFiveSix
OneTwoThreeFourFiveSix
SevenEightNineTenElevenTwelve
ThirteenFourteenFifteenSixteenSeventeenEighteen
224 | 225 | 226 | 227 |

Cards

228 | 229 | 234 | 235 | 240 | 241 | 246 | 247 | 248 | 253 | 254 | 255 | 256 |

Details

257 |
258 | The deets 259 | Something small enough to escape casual notice 260 |
261 | 262 | 263 | 264 |

Code blocks

265 | 
266 |               
267 |   Code blocks look like this
268 |               
269 |
270 | 271 | 272 | 273 |

Footer

274 |
This is the footer
275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 |
283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | Home 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | Examples 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | Themes 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | Github 319 | 320 | 321 | 322 | 323 |
324 | 325 | 330 | 331 | 332 | -------------------------------------------------------------------------------- /highlight.pack.js: -------------------------------------------------------------------------------- 1 | /* 2 | Highlight.js 10.0.3 (a4b1bd2d) 3 | License: BSD-3-Clause 4 | Copyright (c) 2006-2020, Ivan Sagalaev 5 | */ 6 | var hljs=function(){"use strict";function e(n){Object.freeze(n);var t="function"==typeof n;return Object.getOwnPropertyNames(n).forEach((function(r){!n.hasOwnProperty(r)||null===n[r]||"object"!=typeof n[r]&&"function"!=typeof n[r]||t&&("caller"===r||"callee"===r||"arguments"===r)||Object.isFrozen(n[r])||e(n[r])})),n}function n(e){return e.replace(/&/g,"&").replace(//g,">")}function t(e){var n,t={},r=Array.prototype.slice.call(arguments,1);for(n in e)t[n]=e[n];return r.forEach((function(e){for(n in e)t[n]=e[n]})),t}function r(e){return e.nodeName.toLowerCase()}var a=Object.freeze({__proto__:null,escapeHTML:n,inherit:t,nodeStream:function(e){var n=[];return function e(t,a){for(var i=t.firstChild;i;i=i.nextSibling)3===i.nodeType?a+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=e(i,a),r(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n},mergeStreams:function(e,t,a){var i=0,s="",o=[];function l(){return e.length&&t.length?e[0].offset!==t[0].offset?e[0].offset"}function u(e){s+=""}function d(e){("start"===e.event?c:u)(e.node)}for(;e.length||t.length;){var g=l();if(s+=n(a.substring(i,g[0].offset)),i=g[0].offset,g===e){o.reverse().forEach(u);do{d(g.splice(0,1)[0]),g=l()}while(g===e&&g.length&&g[0].offset===i);o.reverse().forEach(c)}else"start"===g[0].event?o.push(g[0].node):o.pop(),d(g.splice(0,1)[0])}return s+n(a.substr(i))}});const i="",s=e=>!!e.kind;class o{constructor(e,n){this.buffer="",this.classPrefix=n.classPrefix,e.walk(this)}addText(e){this.buffer+=n(e)}openNode(e){if(!s(e))return;let n=e.kind;e.sublanguage||(n=`${this.classPrefix}${n}`),this.span(n)}closeNode(e){s(e)&&(this.buffer+=i)}span(e){this.buffer+=``}value(){return this.buffer}}class l{constructor(){this.rootNode={children:[]},this.stack=[this.rootNode]}get top(){return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){this.top.children.push(e)}openNode(e){let n={kind:e,children:[]};this.add(n),this.stack.push(n)}closeNode(){if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,n){return"string"==typeof n?e.addText(n):n.children&&(e.openNode(n),n.children.forEach(n=>this._walk(e,n)),e.closeNode(n)),e}static _collapse(e){e.children&&(e.children.every(e=>"string"==typeof e)?(e.text=e.children.join(""),delete e.children):e.children.forEach(e=>{"string"!=typeof e&&l._collapse(e)}))}}class c extends l{constructor(e){super(),this.options=e}addKeyword(e,n){""!==e&&(this.openNode(n),this.addText(e),this.closeNode())}addText(e){""!==e&&this.add(e)}addSublanguage(e,n){let t=e.root;t.kind=n,t.sublanguage=!0,this.add(t)}toHTML(){return new o(this,this.options).value()}finalize(){}}function u(e){return e&&e.source||e}const d="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",g={begin:"\\\\[\\s\\S]",relevance:0},h={className:"string",begin:"'",end:"'",illegal:"\\n",contains:[g]},f={className:"string",begin:'"',end:'"',illegal:"\\n",contains:[g]},p={begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},m=function(e,n,r){var a=t({className:"comment",begin:e,end:n,contains:[]},r||{});return a.contains.push(p),a.contains.push({className:"doctag",begin:"(?:TODO|FIXME|NOTE|BUG|XXX):",relevance:0}),a},b=m("//","$"),v=m("/\\*","\\*/"),x=m("#","$");var _=Object.freeze({__proto__:null,IDENT_RE:"[a-zA-Z]\\w*",UNDERSCORE_IDENT_RE:"[a-zA-Z_]\\w*",NUMBER_RE:"\\b\\d+(\\.\\d+)?",C_NUMBER_RE:d,BINARY_NUMBER_RE:"\\b(0b[01]+)",RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",BACKSLASH_ESCAPE:g,APOS_STRING_MODE:h,QUOTE_STRING_MODE:f,PHRASAL_WORDS_MODE:p,COMMENT:m,C_LINE_COMMENT_MODE:b,C_BLOCK_COMMENT_MODE:v,HASH_COMMENT_MODE:x,NUMBER_MODE:{className:"number",begin:"\\b\\d+(\\.\\d+)?",relevance:0},C_NUMBER_MODE:{className:"number",begin:d,relevance:0},BINARY_NUMBER_MODE:{className:"number",begin:"\\b(0b[01]+)",relevance:0},CSS_NUMBER_MODE:{className:"number",begin:"\\b\\d+(\\.\\d+)?(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",relevance:0},REGEXP_MODE:{begin:/(?=\/[^\/\n]*\/)/,contains:[{className:"regexp",begin:/\//,end:/\/[gimuy]*/,illegal:/\n/,contains:[g,{begin:/\[/,end:/\]/,relevance:0,contains:[g]}]}]},TITLE_MODE:{className:"title",begin:"[a-zA-Z]\\w*",relevance:0},UNDERSCORE_TITLE_MODE:{className:"title",begin:"[a-zA-Z_]\\w*",relevance:0},METHOD_GUARD:{begin:"\\.\\s*[a-zA-Z_]\\w*",relevance:0}}),E="of and for in not or if then".split(" ");function R(e,n){return n?+n:(t=e,E.includes(t.toLowerCase())?0:1);var t}const N=n,w=t,{nodeStream:y,mergeStreams:O}=a;return function(n){var r=[],a={},i={},s=[],o=!0,l=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,d="Could not find the language '{}', did you forget to load/include a language module?",g={noHighlightRe:/^(no-?highlight)$/i,languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0,__emitter:c};function h(e){return g.noHighlightRe.test(e)}function f(e,n,t,r){var a={code:n,language:e};T("before:highlight",a);var i=a.result?a.result:p(a.language,a.code,t,r);return i.code=a.code,T("after:highlight",i),i}function p(e,n,r,i){var s=n;function l(e,n){var t=v.case_insensitive?n[0].toLowerCase():n[0];return e.keywords.hasOwnProperty(t)&&e.keywords[t]}function c(){null!=_.subLanguage?function(){if(""!==k){var e="string"==typeof _.subLanguage;if(!e||a[_.subLanguage]){var n=e?p(_.subLanguage,k,!0,E[_.subLanguage]):m(k,_.subLanguage.length?_.subLanguage:void 0);_.relevance>0&&(T+=n.relevance),e&&(E[_.subLanguage]=n.top),w.addSublanguage(n.emitter,n.language)}else w.addText(k)}}():function(){var e,n,t,r;if(_.keywords){for(n=0,_.lexemesRe.lastIndex=0,t=_.lexemesRe.exec(k),r="";t;){r+=k.substring(n,t.index);var a=null;(e=l(_,t))?(w.addText(r),r="",T+=e[1],a=e[0],w.addKeyword(t[0],a)):r+=t[0],n=_.lexemesRe.lastIndex,t=_.lexemesRe.exec(k)}r+=k.substr(n),w.addText(r)}else w.addText(k)}(),k=""}function h(e){e.className&&w.openNode(e.className),_=Object.create(e,{parent:{value:_}})}var f={};function b(n,t){var a,i=t&&t[0];if(k+=n,null==i)return c(),0;if("begin"==f.type&&"end"==t.type&&f.index==t.index&&""===i){if(k+=s.slice(t.index,t.index+1),!o)throw(a=Error("0 width match regex")).languageName=e,a.badRule=f.rule,a;return 1}if(f=t,"begin"===t.type)return function(e){var n=e[0],t=e.rule;return t.__onBegin&&(t.__onBegin(e)||{}).ignoreMatch?function(e){return 0===_.matcher.regexIndex?(k+=e[0],1):(B=!0,0)}(n):(t&&t.endSameAsBegin&&(t.endRe=RegExp(n.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&"),"m")),t.skip?k+=n:(t.excludeBegin&&(k+=n),c(),t.returnBegin||t.excludeBegin||(k=n)),h(t),t.returnBegin?0:n.length)}(t);if("illegal"===t.type&&!r)throw(a=Error('Illegal lexeme "'+i+'" for mode "'+(_.className||"")+'"')).mode=_,a;if("end"===t.type){var l=function(e){var n=e[0],t=s.substr(e.index),r=function e(n,t){if(function(e,n){var t=e&&e.exec(n);return t&&0===t.index}(n.endRe,t)){for(;n.endsParent&&n.parent;)n=n.parent;return n}if(n.endsWithParent)return e(n.parent,t)}(_,t);if(r){var a=_;a.skip?k+=n:(a.returnEnd||a.excludeEnd||(k+=n),c(),a.excludeEnd&&(k=n));do{_.className&&w.closeNode(),_.skip||_.subLanguage||(T+=_.relevance),_=_.parent}while(_!==r.parent);return r.starts&&(r.endSameAsBegin&&(r.starts.endRe=r.endRe),h(r.starts)),a.returnEnd?0:n.length}}(t);if(null!=l)return l}if("illegal"===t.type&&""===i)return 1;if(A>1e5&&A>3*t.index)throw Error("potential infinite loop, way more iterations than matches");return k+=i,i.length}var v=M(e);if(!v)throw console.error(d.replace("{}",e)),Error('Unknown language: "'+e+'"');!function(e){function n(n,t){return RegExp(u(n),"m"+(e.case_insensitive?"i":"")+(t?"g":""))}class r{constructor(){this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}addRule(e,n){n.position=this.position++,this.matchIndexes[this.matchAt]=n,this.regexes.push([n,e]),this.matchAt+=function(e){return RegExp(e.toString()+"|").exec("").length-1}(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null);let e=this.regexes.map(e=>e[1]);this.matcherRe=n(function(e,n){for(var t=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./,r=0,a="",i=0;i0&&(a+="|"),a+="(";o.length>0;){var l=t.exec(o);if(null==l){a+=o;break}a+=o.substring(0,l.index),o=o.substring(l.index+l[0].length),"\\"==l[0][0]&&l[1]?a+="\\"+(+l[1]+s):(a+=l[0],"("==l[0]&&r++)}a+=")"}return a}(e),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex;let n=this.matcherRe.exec(e);if(!n)return null;let t=n.findIndex((e,n)=>n>0&&null!=e),r=this.matchIndexes[t];return Object.assign(n,r)}}class a{constructor(){this.rules=[],this.multiRegexes=[],this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){if(this.multiRegexes[e])return this.multiRegexes[e];let n=new r;return this.rules.slice(e).forEach(([e,t])=>n.addRule(e,t)),n.compile(),this.multiRegexes[e]=n,n}considerAll(){this.regexIndex=0}addRule(e,n){this.rules.push([e,n]),"begin"===n.type&&this.count++}exec(e){let n=this.getMatcher(this.regexIndex);n.lastIndex=this.lastIndex;let t=n.exec(e);return t&&(this.regexIndex+=t.position+1,this.regexIndex===this.count&&(this.regexIndex=0)),t}}function i(e){let n=e.input[e.index-1],t=e.input[e.index+e[0].length];if("."===n||"."===t)return{ignoreMatch:!0}}if(e.contains&&e.contains.includes("self"))throw Error("ERR: contains `self` is not supported at the top-level of a language. See documentation.");!function r(s,o){s.compiled||(s.compiled=!0,s.__onBegin=null,s.keywords=s.keywords||s.beginKeywords,s.keywords&&(s.keywords=function(e,n){var t={};return"string"==typeof e?r("keyword",e):Object.keys(e).forEach((function(n){r(n,e[n])})),t;function r(e,r){n&&(r=r.toLowerCase()),r.split(" ").forEach((function(n){var r=n.split("|");t[r[0]]=[e,R(r[0],r[1])]}))}}(s.keywords,e.case_insensitive)),s.lexemesRe=n(s.lexemes||/\w+/,!0),o&&(s.beginKeywords&&(s.begin="\\b("+s.beginKeywords.split(" ").join("|")+")(?=\\b|\\s)",s.__onBegin=i),s.begin||(s.begin=/\B|\b/),s.beginRe=n(s.begin),s.endSameAsBegin&&(s.end=s.begin),s.end||s.endsWithParent||(s.end=/\B|\b/),s.end&&(s.endRe=n(s.end)),s.terminator_end=u(s.end)||"",s.endsWithParent&&o.terminator_end&&(s.terminator_end+=(s.end?"|":"")+o.terminator_end)),s.illegal&&(s.illegalRe=n(s.illegal)),null==s.relevance&&(s.relevance=1),s.contains||(s.contains=[]),s.contains=[].concat(...s.contains.map((function(e){return function(e){return e.variants&&!e.cached_variants&&(e.cached_variants=e.variants.map((function(n){return t(e,{variants:null},n)}))),e.cached_variants?e.cached_variants:function e(n){return!!n&&(n.endsWithParent||e(n.starts))}(e)?t(e,{starts:e.starts?t(e.starts):null}):Object.isFrozen(e)?t(e):e}("self"===e?s:e)}))),s.contains.forEach((function(e){r(e,s)})),s.starts&&r(s.starts,o),s.matcher=function(e){let n=new a;return e.contains.forEach(e=>n.addRule(e.begin,{rule:e,type:"begin"})),e.terminator_end&&n.addRule(e.terminator_end,{type:"end"}),e.illegal&&n.addRule(e.illegal,{type:"illegal"}),n}(s))}(e)}(v);var x,_=i||v,E={},w=new g.__emitter(g);!function(){for(var e=[],n=_;n!==v;n=n.parent)n.className&&e.unshift(n.className);e.forEach(e=>w.openNode(e))}();var y,O,k="",T=0,L=0,A=0,B=!1;try{for(_.matcher.considerAll();A++,B?B=!1:(_.matcher.lastIndex=L,_.matcher.considerAll()),y=_.matcher.exec(s);)O=b(s.substring(L,y.index),y),L=y.index+O;return b(s.substr(L)),w.closeAllNodes(),w.finalize(),x=w.toHTML(),{relevance:T,value:x,language:e,illegal:!1,emitter:w,top:_}}catch(n){if(n.message&&n.message.includes("Illegal"))return{illegal:!0,illegalBy:{msg:n.message,context:s.slice(L-100,L+100),mode:n.mode},sofar:x,relevance:0,value:N(s),emitter:w};if(o)return{relevance:0,value:N(s),emitter:w,language:e,top:_,errorRaised:n};throw n}}function m(e,n){n=n||g.languages||Object.keys(a);var t=function(e){const n={relevance:0,emitter:new g.__emitter(g),value:N(e),illegal:!1,top:E};return n.emitter.addText(e),n}(e),r=t;return n.filter(M).filter(k).forEach((function(n){var a=p(n,e,!1);a.language=n,a.relevance>r.relevance&&(r=a),a.relevance>t.relevance&&(r=t,t=a)})),r.language&&(t.second_best=r),t}function b(e){return g.tabReplace||g.useBR?e.replace(l,(function(e,n){return g.useBR&&"\n"===e?"
":g.tabReplace?n.replace(/\t/g,g.tabReplace):""})):e}function v(e){var n,t,r,a,s,o=function(e){var n,t=e.className+" ";if(t+=e.parentNode?e.parentNode.className:"",n=g.languageDetectRe.exec(t)){var r=M(n[1]);return r||(console.warn(d.replace("{}",n[1])),console.warn("Falling back to no-highlight mode for this block.",e)),r?n[1]:"no-highlight"}return t.split(/\s+/).find(e=>h(e)||M(e))}(e);h(o)||(T("before:highlightBlock",{block:e,language:o}),g.useBR?(n=document.createElement("div")).innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n"):n=e,s=n.textContent,r=o?f(o,s,!0):m(s),(t=y(n)).length&&((a=document.createElement("div")).innerHTML=r.value,r.value=O(t,y(a),s)),r.value=b(r.value),T("after:highlightBlock",{block:e,result:r}),e.innerHTML=r.value,e.className=function(e,n,t){var r=n?i[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),e.includes(r)||a.push(r),a.join(" ").trim()}(e.className,o,r.language),e.result={language:r.language,re:r.relevance},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.relevance}))}function x(){if(!x.called){x.called=!0;var e=document.querySelectorAll("pre code");r.forEach.call(e,v)}}const E={disableAutodetect:!0,name:"Plain text"};function M(e){return e=(e||"").toLowerCase(),a[e]||a[i[e]]}function k(e){var n=M(e);return n&&!n.disableAutodetect}function T(e,n){var t=e;s.forEach((function(e){e[t]&&e[t](n)}))}Object.assign(n,{highlight:f,highlightAuto:m,fixMarkup:b,highlightBlock:v,configure:function(e){g=w(g,e)},initHighlighting:x,initHighlightingOnLoad:function(){window.addEventListener("DOMContentLoaded",x,!1)},registerLanguage:function(e,t){var r;try{r=t(n)}catch(n){if(console.error("Language definition for '{}' could not be registered.".replace("{}",e)),!o)throw n;console.error(n),r=E}r.name||(r.name=e),a[e]=r,r.rawDefinition=t.bind(null,n),r.aliases&&r.aliases.forEach((function(n){i[n]=e}))},listLanguages:function(){return Object.keys(a)},getLanguage:M,requireLanguage:function(e){var n=M(e);if(n)return n;throw Error("The '{}' language is required, but not loaded.".replace("{}",e))},autoDetection:k,inherit:w,addPlugin:function(e,n){s.push(e)}}),n.debugMode=function(){o=!1},n.safeMode=function(){o=!0},n.versionString="10.0.3";for(const n in _)"object"==typeof _[n]&&e(_[n]);return Object.assign(n,_),n}({})}();"object"==typeof exports&&"undefined"!=typeof module&&(module.exports=hljs);hljs.registerLanguage("xml",function(){"use strict";return function(e){var n={className:"symbol",begin:"&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;"},a={begin:"\\s",contains:[{className:"meta-keyword",begin:"#?[a-z_][a-z1-9_-]+",illegal:"\\n"}]},s=e.inherit(a,{begin:"\\(",end:"\\)"}),t=e.inherit(e.APOS_STRING_MODE,{className:"meta-string"}),i=e.inherit(e.QUOTE_STRING_MODE,{className:"meta-string"}),c={endsWithParent:!0,illegal:/`]+/}]}]}]};return{name:"HTML, XML",aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist","wsf","svg"],case_insensitive:!0,contains:[{className:"meta",begin:"",relevance:10,contains:[a,i,t,s,{begin:"\\[",end:"\\]",contains:[{className:"meta",begin:"",contains:[a,s,i,t]}]}]},e.COMMENT("\x3c!--","--\x3e",{relevance:10}),{begin:"<\\!\\[CDATA\\[",end:"\\]\\]>",relevance:10},n,{className:"meta",begin:/<\?xml/,end:/\?>/,relevance:10},{className:"tag",begin:")",end:">",keywords:{name:"style"},contains:[c],starts:{end:"",returnEnd:!0,subLanguage:["css","xml"]}},{className:"tag",begin:")",end:">",keywords:{name:"script"},contains:[c],starts:{end:"<\/script>",returnEnd:!0,subLanguage:["javascript","handlebars","xml"]}},{className:"tag",begin:"",contains:[{className:"name",begin:/[^\/><\s]+/,relevance:0},c]}]}}}()); -------------------------------------------------------------------------------- /examples.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ridge.css 15 | 18 | 21 | 24 | 27 | 30 | 33 | 36 | 39 | 42 | 43 | 44 | 45 | 46 | 47 |
48 | 49 | 50 | 51 | 52 | green blue gradient mountain icon 53 | ridge.css 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | Examples 69 |
70 | Themes 71 | 75 |
76 | Github 77 | 78 | 79 | 80 | 81 | 82 |

ridge.css examples

83 |

Examples, they get the people goin'

84 | 85 | 86 | 87 | 88 |

Layout

89 | 90 | Preview 91 | Code 92 | 93 | 94 | 95 |
96 | 97 | vstack 98 | 99 |
vstack 1
100 |
vstack 2
101 |
vstack 3
102 |
vstack 4
103 |
vstack 5
104 | 105 | 106 |
107 | 108 | vstack centered 109 | 110 |
111 | 112 | hstack 113 | 114 |
hstack 1
115 |
hstack 2
116 |
hstack 3
117 |
hstack 4
118 |
hstack 5
119 |
hstack 6
120 |
hstack 7
121 | 122 | 123 | hstack center 124 | 125 |
centered 1
126 |
centered 2
127 |
centered 3
128 | 129 | 130 | hstack stretch 131 | 132 |
stretch 1
133 |
stretch 2
134 |
stretch 3
135 | 136 | 137 | hstack responsive 138 | 139 |
responsive 1
140 |
responsive 2
141 |
responsive 3
142 |
responsive 4
143 |
responsive 5
144 |
responsive 6
145 | 146 | 147 | 148 | section 149 |
150 |
section 1
151 |
section 2
152 |
section 3
153 |
section 4
154 |
section 5
155 |
156 | 157 |
158 |
159 | 
160 |               
161 |               
162 |
163 |
164 | 165 | 166 | 167 | 168 | 169 |

Alerts

170 | 171 | Preview 172 | Code 173 | 174 | 175 | 176 |
177 | 178 |
179 | A simple well that uses the default theme colors 180 |
181 |
182 | A simple well that uses the default theme colors 183 |
184 |
185 | 186 | A simple well that can be dismissed 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 |
196 | 197 |
198 | 199 |
200 | 
201 |               
202 |               
203 |
204 |
205 | 206 | 207 | 208 | 209 |

Stats

210 | 211 | Preview 212 | Code 213 | 214 | 215 | 216 |
217 | 218 | 224 | 230 | 236 | 237 |
238 | 239 |
240 | 
241 |               
242 |               
243 |
244 |
245 | 246 | 247 | 248 | 249 | 250 | 251 |

Cards

252 | 253 | Preview 254 | Code 255 | 256 | 257 | 258 |
259 | 260 | 270 | 271 | 281 | 282 | 292 | 293 |
294 | 295 |
296 | 
297 |               
298 |               
299 |
300 |
301 | 302 | 303 | 304 | 305 |

Description List Card

306 | 307 | Preview 308 | Code 309 | 310 | 311 | 312 |
313 | 356 |
357 | 358 |
359 | 
360 |               
361 |               
362 |
363 |
364 | 365 | 366 | 367 | 368 |

Section

369 | 370 | Preview 371 | Code 372 | 373 | 374 | 375 |
376 | 377 |

Section Title

378 | 402 | 403 |
404 | 405 |
406 | 
407 |               
408 |               
409 |
410 |
411 | 412 | 413 | 414 | 415 |

Dashboard

416 | 417 | Preview 418 | Code 419 | 420 | 421 | 422 |
423 | 424 | 425 | 426 | 427 | 428 | 429 |

logo

430 | 431 | 432 | Dashboard 433 | Team 434 | Tags 435 | Calendar 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 |

logo

453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | Dashboard 470 | Team 471 | Tags 472 | Calendar 473 | 474 | 475 |
476 | 489 |
490 | 491 | 492 | Your dashboard goes here 493 | 494 | 495 |
496 | 497 |
498 | 
499 |               
500 |               
501 |
502 |
503 | 504 | 505 | 506 | 507 |

Dashboard w/ Sidebar

508 | 509 | Preview 510 | Code 511 | 512 | 513 | 514 |
515 | 516 | 517 | 518 | 519 | 520 | 521 |

logo

522 | 523 | Dashboard 524 | Team 525 | Tags 526 | Calendar 527 | 528 | 529 | 530 | 531 | Sean Walker 532 | View Profile 533 | 534 | 535 | 536 | 537 | 538 | 539 |

Dashboard

540 | Your dashboard goes here 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | Dashboard 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | Team 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | Tags 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | Calendar 580 | 581 | 582 | 583 | 584 |
585 | 586 |
587 | 
588 |               
589 |               
590 |
591 |
592 | 593 | 594 | 595 | 596 |
597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | Home 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | Examples 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | Themes 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | Github 635 | 636 | 637 | 638 | 639 |
640 | 641 | 646 | 647 | 658 | 659 | 660 | -------------------------------------------------------------------------------- /ridge.css: -------------------------------------------------------------------------------- 1 | /* ridge.css */ 2 | 3 | :root { 4 | --spacing-3xs: 0.125rem; 5 | --spacing-2xs: 0.25rem; 6 | --spacing-xs: 0.5rem; 7 | --spacing-s: 1rem; 8 | --spacing-m: 2rem; 9 | --spacing-l: 4rem; 10 | --spacing-xl: 8rem; 11 | --spacing-2xl: 16rem; 12 | --spacing-3xl: 32rem; 13 | --spacing-4xl: 64rem; 14 | } 15 | 16 | *, *:before, *:after { 17 | box-sizing: border-box; 18 | } 19 | 20 | html, body, main { 21 | height: 100%; 22 | } 23 | 24 | /* pylon.css */ 25 | 26 | hstack { 27 | display: flex; 28 | align-self: stretch; 29 | align-items: center; 30 | flex-direction: row; 31 | } 32 | 33 | .shrink { 34 | flex: 2 2; 35 | } 36 | 37 | hstack[shrink] > * { 38 | flex: 2 2; 39 | } 40 | 41 | hstack[spacing="xl"] > * { 42 | margin-right: var(--spacing-xl); 43 | } 44 | 45 | hstack[spacing="l"] > * { 46 | margin-right: var(--spacing-l) 47 | } 48 | 49 | hstack[spacing="m"] > * { 50 | margin-right: var(--spacing-m); 51 | } 52 | 53 | hstack[spacing="s"] > * { 54 | margin-right: var(--spacing-s); 55 | } 56 | 57 | hstack[spacing="xs"] > * { 58 | margin-right: var(--spacing-xs); 59 | } 60 | 61 | hstack[spacing="2xs"] > * { 62 | margin-right: var(--spacing-2xs); 63 | } 64 | 65 | hstack[spacing] > :last-child { 66 | margin-right: 0; 67 | } 68 | 69 | hstack[align-y="top"] { 70 | align-items: flex-start; 71 | } 72 | 73 | hstack[align-y="center"] { 74 | align-items: center; 75 | } 76 | 77 | hstack[align-y="bottom"] { 78 | align-items: flex-end; 79 | } 80 | 81 | hstack[align-x="left"] { 82 | justify-content: flex-start; 83 | } 84 | 85 | hstack[align-x="center"] { 86 | justify-content: center; 87 | } 88 | 89 | hstack[align-x="right"] { 90 | justify-content: flex-end; 91 | } 92 | 93 | vstack { 94 | display: flex; 95 | align-self: stretch; 96 | flex-direction: column; 97 | } 98 | 99 | vstack[spacing="xl"] > * { 100 | margin-bottom: var(--spacing-xl); 101 | } 102 | 103 | vstack[spacing="l"] > * { 104 | margin-bottom: var(--spacing-l); 105 | } 106 | 107 | vstack[spacing="m"] > * { 108 | margin-bottom: var(--spacing-m); 109 | } 110 | 111 | vstack[spacing="s"] > * { 112 | margin-bottom: var(--spacing-s); 113 | } 114 | 115 | vstack[spacing="xs"] > * { 116 | margin-bottom: var(--spacing-xs); 117 | } 118 | 119 | vstack[spacing="2xs"] > * { 120 | margin-bottom: var(--spacing-2xs); 121 | } 122 | 123 | vstack[spacing] > :last-child { 124 | margin-bottom: 0; 125 | } 126 | 127 | vstack[align-x="left"] { 128 | align-items: flex-start; 129 | } 130 | 131 | vstack[align-x="center"] { 132 | align-items: center; 133 | } 134 | 135 | vstack[align-x="right"] { 136 | align-items: flex-end; 137 | } 138 | 139 | vstack[align-y="top"] { 140 | justify-content: flex-start; 141 | } 142 | 143 | vstack[align-y="center"] { 144 | justify-content: center; 145 | } 146 | 147 | vstack[align-y="bottom"] { 148 | justify-content: flex-end; 149 | } 150 | 151 | spacer { 152 | flex: 1; 153 | } 154 | 155 | [stretch] { 156 | align-self: stretch; 157 | flex: 1 1 auto; 158 | } 159 | 160 | vstack[stretch] { 161 | height: 100%; 162 | } 163 | 164 | body { 165 | margin: 0 auto; 166 | max-width: 969px; 167 | padding: var(--spacing-m); 168 | 169 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 170 | line-height: 1.4; 171 | 172 | color: var(--main); 173 | background: var(--background); 174 | } 175 | 176 | button, input, textarea, a { 177 | transition: background-color var(--animation-duration) linear, 178 | border-color var(--animation-duration) linear, 179 | color var(--animation-duration) linear, 180 | box-shadow var(--animation-duration) linear, 181 | transform var(--animation-duration) ease; 182 | } 183 | 184 | h1 { 185 | font-size: 2.2em; 186 | margin: 0; 187 | } 188 | 189 | h1, h2, h3, h4, h5, h6 { 190 | margin: 0; 191 | } 192 | 193 | h1, h2, h3, h4, h5, h6, strong { 194 | color: var(--bright); 195 | margin: 0; 196 | } 197 | 198 | h1, h2, h3, h4, h5, h6, b, strong, th { 199 | font-weight: 600; 200 | } 201 | 202 | blockquote { 203 | border-left: 4px solid var(--focus); 204 | margin: 1.5em 0em; 205 | padding: 0.5em 1em; 206 | font-style: italic; 207 | } 208 | 209 | blockquote > footer { 210 | font-style: normal; 211 | font-size: 1em; 212 | color: var(--main); 213 | border: 0; 214 | } 215 | 216 | blockquote cite { 217 | font-style: normal; 218 | } 219 | 220 | address { 221 | font-style: normal; 222 | } 223 | 224 | mark { 225 | background-color: var(--highlight); 226 | border-radius: 2px; 227 | color: #000000; 228 | } 229 | 230 | button, select, 231 | input[type='submit'], 232 | input[type='button'], 233 | input[type='checkbox'], 234 | input[type='range'], 235 | input[type='radio'] { 236 | cursor: pointer; 237 | } 238 | 239 | input:not([type='checkbox']):not([type='radio']), 240 | select { 241 | display: block; 242 | } 243 | 244 | input, 245 | button, 246 | textarea, 247 | select { 248 | color: var(--form-text); 249 | background-color: var(--background-alt); 250 | 251 | font-family: inherit; 252 | font-size: inherit; 253 | 254 | padding: 10px; 255 | 256 | border: none; 257 | border-radius: 6px; 258 | outline: none; 259 | } 260 | 261 | button { 262 | color: var(--background); 263 | background-color: var(--button); 264 | } 265 | 266 | input[type='submit'] { 267 | color: var(--link); 268 | background-color: transparent; 269 | } 270 | 271 | input:not([type='checkbox']):not([type='radio']), 272 | select, 273 | button, 274 | textarea { 275 | -webkit-appearance: none; 276 | } 277 | 278 | textarea { 279 | margin-right: 0; 280 | width: 100%; 281 | resize: vertical; 282 | } 283 | 284 | select { 285 | background: var(--background-alt) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; 286 | padding-right: 35px; 287 | } 288 | 289 | select::-ms-expand { 290 | display: none; 291 | } 292 | 293 | select[multiple] { 294 | padding-right: 10px; 295 | background-image: none; 296 | overflow-y: auto; 297 | } 298 | 299 | button, 300 | input[type='button'] { 301 | padding-right: 30px; 302 | padding-left: 30px; 303 | } 304 | 305 | button:hover, 306 | input[type='button']:hover { 307 | background: var(--button-hover); 308 | } 309 | 310 | input:focus, 311 | select:focus, 312 | button:focus, 313 | textarea:focus { 314 | box-shadow: 0 0 0 2px var(--focus); 315 | } 316 | 317 | input[type='radio'] { 318 | appearance: radio; 319 | } 320 | 321 | input[type='submit']:active, 322 | input[type='button']:active, 323 | input[type='range']:active, 324 | button:active { 325 | transform: translateY(2px); 326 | } 327 | 328 | input:disabled, 329 | select:disabled, 330 | button:disabled, 331 | textarea:disabled { 332 | cursor: not-allowed; 333 | opacity: 0.5; 334 | } 335 | 336 | ::-webkit-input-placeholder { 337 | color: var(--form-placeholder); 338 | } 339 | 340 | ::-moz-placeholder { 341 | color: var(--form-placeholder); 342 | } 343 | 344 | ::-ms-input-placeholder { 345 | color: var(--form-placeholder); 346 | } 347 | 348 | ::placeholder { 349 | color: var(--form-placeholder); 350 | } 351 | 352 | fieldset { 353 | border: 1px var(--focus) solid; 354 | border-radius: 6px; 355 | margin: 0; 356 | margin-bottom: 6px; 357 | padding: 10px; 358 | } 359 | 360 | legend { 361 | font-size: 0.9em; 362 | font-weight: 600; 363 | } 364 | 365 | input[type='range'] { 366 | margin: 10px 0; 367 | padding: 10px 0; 368 | background: transparent; 369 | } 370 | 371 | input[type='range']:focus { 372 | outline: none; 373 | } 374 | 375 | input[type='range']::-webkit-slider-runnable-track { 376 | width: 100%; 377 | height: 9.5px; 378 | transition: 0.2s; 379 | background: var(--background-alt); 380 | border-radius: 1px; 381 | } 382 | 383 | input[type='range']::-webkit-slider-thumb { 384 | height: 20px; 385 | width: 20px; 386 | border-radius: 50%; 387 | background: var(--main); 388 | -webkit-appearance: none; 389 | margin-top: -6px; 390 | } 391 | 392 | input[type='range']:focus::-webkit-slider-runnable-track { 393 | background: var(--background-alt); 394 | } 395 | 396 | input[type='range']::-moz-range-track { 397 | width: 100%; 398 | height: 9.5px; 399 | transition: 0.2s; 400 | background: var(--background-alt); 401 | border-radius: 3px; 402 | } 403 | 404 | input[type='range']::-moz-range-thumb { 405 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 406 | height: 20px; 407 | width: 20px; 408 | border-radius: 50%; 409 | background: var(--main); 410 | } 411 | 412 | input[type='range']::-ms-track { 413 | width: 100%; 414 | height: 9.5px; 415 | background: transparent; 416 | border-color: transparent; 417 | border-width: 16px 0; 418 | color: transparent; 419 | } 420 | 421 | input[type='range']::-ms-fill-lower { 422 | background: var(--background-alt); 423 | border: 0.2px solid #010101; 424 | border-radius: 3px; 425 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 426 | } 427 | 428 | input[type='range']::-ms-fill-upper { 429 | background: var(--background-alt); 430 | border: 0.2px solid #010101; 431 | border-radius: 3px; 432 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 433 | } 434 | 435 | input[type='range']::-ms-thumb { 436 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 437 | border: 1px solid #000000; 438 | height: 20px; 439 | width: 20px; 440 | border-radius: 50%; 441 | background: var(--main); 442 | } 443 | 444 | input[type='range']:focus::-ms-fill-lower { 445 | background: var(--background-alt); 446 | } 447 | 448 | input[type='range']:focus::-ms-fill-upper { 449 | background: var(--background-alt); 450 | } 451 | 452 | a { 453 | text-decoration: none; 454 | color: var(--link); 455 | border-bottom: solid transparent; 456 | border-width: inherit; 457 | } 458 | 459 | code, samp { 460 | background: var(--background-alt); 461 | color: var(--code); 462 | padding: 2.5px 5px; 463 | border-radius: 6px; 464 | font-size: 1em; 465 | } 466 | 467 | pre { 468 | margin: 0; 469 | } 470 | 471 | pre > code { 472 | padding: 10px; 473 | display: block; 474 | overflow-x: auto; 475 | } 476 | 477 | var { 478 | color: var(--variable); 479 | font-style: normal; 480 | font-family: monospace; 481 | } 482 | 483 | kbd { 484 | background: var(--background-alt); 485 | border: 1px solid var(--border); 486 | border-radius: 2px; 487 | color: var(--main); 488 | padding: 2px 4px 2px 4px; 489 | } 490 | 491 | img { 492 | max-width: 100%; 493 | height: auto; 494 | } 495 | 496 | hr { 497 | border: none; 498 | border-top: 1px solid var(--border); 499 | width: 100%; 500 | margin: 0; 501 | } 502 | 503 | table { 504 | border-collapse: collapse; 505 | width: 100%; 506 | } 507 | 508 | td, 509 | th { 510 | padding: 6px; 511 | text-align: left; 512 | } 513 | 514 | thead { 515 | border-bottom: 1px solid var(--border); 516 | } 517 | 518 | tfoot { 519 | border-top: 1px solid var(--border); 520 | } 521 | 522 | tbody tr:nth-child(even) { 523 | background-color: var(--background-alt); 524 | } 525 | 526 | details { 527 | display: flex; 528 | flex-direction: column; 529 | align-items: flex-start; 530 | background-color: var(--background-alt); 531 | padding: 10px 10px 0; 532 | margin: 1em 0; 533 | border-radius: 6px; 534 | overflow: hidden; 535 | } 536 | 537 | details[open] { 538 | padding: 10px; 539 | } 540 | 541 | details > :last-child { 542 | margin-bottom: 0; 543 | } 544 | 545 | details[open] summary { 546 | margin-bottom: 10px; 547 | outline: 0; 548 | } 549 | 550 | summary { 551 | display: list-item; 552 | background-color: var(--background-alt); 553 | padding: 10px; 554 | margin: -10px -10px 0; 555 | } 556 | 557 | details > :not(summary) { 558 | margin-top: 0; 559 | } 560 | 561 | summary::-webkit-details-marker { 562 | color: var(--main); 563 | } 564 | 565 | footer { 566 | border-top: 1px solid var(--background-alt); 567 | padding-top: 10px; 568 | font-size: 0.8em; 569 | color: var(--muted); 570 | } 571 | 572 | aside { 573 | background: var(--background); 574 | box-shadow: var(--shadow); 575 | border: 1px solid var(--border); 576 | border-radius: 4px; 577 | } 578 | 579 | section { 580 | display: flex; 581 | flex-flow: row wrap; 582 | } 583 | 584 | section > aside { 585 | margin-right: var(--spacing-s); 586 | } 587 | 588 | section > :last-child { 589 | margin-right: 0; 590 | } 591 | 592 | ul, ol { 593 | margin: 0; 594 | } 595 | 596 | p { 597 | margin: 0; 598 | } 599 | 600 | dl { 601 | margin: 0; 602 | } 603 | 604 | dt { 605 | color: var(--muted); 606 | } 607 | 608 | dd { 609 | text-align: left; 610 | color: var(--main); 611 | margin: 0; 612 | } 613 | 614 | @media(max-width: 1023px) { 615 | body { 616 | width: 100%; 617 | } 618 | } 619 | 620 | @media(max-width: 507px) { 621 | body { 622 | width: 100%; 623 | padding: 0; 624 | } 625 | 626 | aside { 627 | flex: none; 628 | width: 100%; 629 | margin-left: 0; 630 | } 631 | 632 | section > aside { 633 | margin-right: 0; 634 | margin-bottom: var(--spacing-s); 635 | } 636 | 637 | section > aside:last-child 638 | margin-bottom: 0; 639 | } 640 | } 641 | 642 | @media (max-width: 507px) { 643 | hstack[responsive] { 644 | flex-direction: column; 645 | align-items: stretch; 646 | } 647 | 648 | hstack[responsive]>* { 649 | margin-right: 0; 650 | } 651 | 652 | hstack[responsive][spacing="2xs"]>* { 653 | margin-bottom: var(--spacing-2xs); 654 | } 655 | 656 | hstack[responsive][spacing="xs"]>* { 657 | margin-bottom: var(--spacing-xs); 658 | } 659 | 660 | hstack[responsive][spacing="s"]>* { 661 | margin-bottom: var(--spacing-s); 662 | } 663 | 664 | hstack[responsive][spacing="m"]>* { 665 | margin-bottom: var(--spacing-m); 666 | } 667 | 668 | hstack[responsive][spacing="l"]>* { 669 | margin-bottom: var(--spacing-l); 670 | } 671 | 672 | hstack[responsive][spacing="xl"]>* { 673 | margin-bottom: var(--spacing-xl); 674 | } 675 | 676 | hstack[responsive][spacing]>:last-child { 677 | margin-bottom: 0; 678 | } 679 | } 680 | 681 | @media (max-width: 507px) { 682 | h1 { 683 | font-size: 1.8em; 684 | } 685 | } 686 | 687 | /***************** 688 | atomic css 689 | ******************/ 690 | 691 | /* 692 | WIDTHS 693 | */ 694 | 695 | .w-2xs { width: var(--spacing-2xs); } 696 | .w-xs { width: var(--spacing-xs); } 697 | .w-s { width: var(--spacing-s); } 698 | .w-m { width: var(--spacing-m); } 699 | .w-l { width: var(--spacing-l); } 700 | .w-xl { width: var(--spacing-xl); } 701 | .w-2xl { width: var(--spacing-2xl); } 702 | .w-3xl { width: var(--spacing-3xl); } 703 | .w-4xl { width: var(--spacing-4xl); } 704 | .w-25 { width: 25%; } 705 | .w-50 { width: 50%; } 706 | .w-75 { width: 75%; } 707 | .w-100 { width: 100%; } 708 | .w-third { width: calc( 100% / 3 ); } 709 | .w-two-thirds { width: calc( 100% / 1.5 ); } 710 | .w-auto { width: auto; } 711 | 712 | .max-w-2xs { max-width: var(--spacing-2xs); } 713 | .max-w-xs { max-width: var(--spacing-xs); } 714 | .max-w-s { max-width: var(--spacing-s); } 715 | .max-w-m { max-width: var(--spacing-m); } 716 | .max-w-l { max-width: var(--spacing-l); } 717 | .max-w-xl { max-width: var(--spacing-xl); } 718 | .max-w-2xl { max-width: var(--spacing-2xl); } 719 | .max-w-3xl { max-width: var(--spacing-3xl); } 720 | .max-w-4xl { max-width: var(--spacing-4xl); } 721 | .max-w-25 { max-width: 25%; } 722 | .max-w-50 { max-width: 50%; } 723 | .max-w-75 { max-width: 75%; } 724 | .max-w-100 { max-width: 100%; } 725 | .max-w-third { max-width: calc( 100% / 3 ); } 726 | .max-w-two-thirds { max-width: calc( 100% / 1.5 ); } 727 | .max-w-auto { max-width: auto; } 728 | 729 | .min-w-2xs { min-width: var(--spacing-2xs); } 730 | .min-w-xs { min-width: var(--spacing-xs); } 731 | .min-w-s { min-width: var(--spacing-s); } 732 | .min-w-m { min-width: var(--spacing-m); } 733 | .min-w-l { min-width: var(--spacing-l); } 734 | .min-w-xl { min-width: var(--spacing-xl); } 735 | .min-w-2xl { min-width: var(--spacing-2xl); } 736 | .min-w-3xl { min-width: var(--spacing-3xl); } 737 | .min-w-4xl { min-width: var(--spacing-4xl); } 738 | .min-w-25 { min-width: 25%; } 739 | .min-w-50 { min-width: 50%; } 740 | .min-w-75 { min-width: 75%; } 741 | .min-w-100 { min-width: 100%; } 742 | .min-w-third { min-width: calc( 100% / 3 ); } 743 | .min-w-two-thirds { min-width: calc( 100% / 1.5 ); } 744 | .min-w-auto { min-width: auto; } 745 | 746 | .h-2xs { height: var(--spacing-2xs); } 747 | .h-xs { height: var(--spacing-xs); } 748 | .h-s { height: var(--spacing-s); } 749 | .h-m { height: var(--spacing-m); } 750 | .h-l { height: var(--spacing-l); } 751 | .h-xl { height: var(--spacing-xl); } 752 | .h-2xl { height: var(--spacing-2xl); } 753 | .h-3xl { height: var(--spacing-3xl); } 754 | .h-4xl { height: var(--spacing-4xl); } 755 | .h-auto { height: auto; } 756 | .h-100 { height: 100%; } 757 | 758 | .max-h-2xs { max-height: var(--spacing-2xs); } 759 | .max-h-xs { max-height: var(--spacing-xs); } 760 | .max-h-s { max-height: var(--spacing-s); } 761 | .max-h-m { max-height: var(--spacing-m); } 762 | .max-h-l { max-height: var(--spacing-l); } 763 | .max-h-xl { max-height: var(--spacing-xl); } 764 | .max-h-2xl { max-height: var(--spacing-2xl); } 765 | .max-h-3xl { max-height: var(--spacing-3xl); } 766 | .max-h-4xl { max-height: var(--spacing-4xl); } 767 | .max-h-auto { max-height: auto; } 768 | .max-h-100 { max-height: 100%; } 769 | 770 | .min-h-2xs { min-height: var(--spacing-2xs); } 771 | .min-h-xs { min-height: var(--spacing-xs); } 772 | .min-h-s { min-height: var(--spacing-s); } 773 | .min-h-m { min-height: var(--spacing-m); } 774 | .min-h-l { min-height: var(--spacing-l); } 775 | .min-h-xl { min-height: var(--spacing-xl); } 776 | .min-h-2xl { min-height: var(--spacing-2xl); } 777 | .min-h-3xl { min-height: var(--spacing-3xl); } 778 | .min-h-4xl { min-height: var(--spacing-4xl); } 779 | .min-h-25 { min-height: 25%; } 780 | .min-h-50 { min-height: 50%; } 781 | .min-h-75 { min-height: 75%; } 782 | .min-h-100 { min-height: 100%; } 783 | .min-h-third { min-height: calc( 100% / 3 ); } 784 | .min-h-two-thirds { min-height: calc( 100% / 1.5 ); } 785 | .min-h-auto { min-height: auto; } 786 | 787 | /* 788 | SPACING 789 | */ 790 | 791 | .pa-0 { padding: 0; } 792 | .pa-2xs { padding: var(--spacing-2xs); } 793 | .pa-xs { padding: var(--spacing-xs); } 794 | .pa-s { padding: var(--spacing-s); } 795 | .pa-m { padding: var(--spacing-m); } 796 | .pa-l { padding: var(--spacing-l); } 797 | .pa-xl { padding: var(--spacing-xl); } 798 | .pa-2xl { padding: var(--spacing-2xl); } 799 | .pa-3xl { padding: var(--spacing-3xl); } 800 | .pa-4xl { padding: var(--spacing-4xl); } 801 | 802 | .pl-0 { padding-left: 0; } 803 | .pl-2xs { padding-left: var(--spacing-2xs); } 804 | .pl-xs { padding-left: var(--spacing-xs); } 805 | .pl-s { padding-left: var(--spacing-s); } 806 | .pl-m { padding-left: var(--spacing-m); } 807 | .pl-l { padding-left: var(--spacing-l); } 808 | .pl-xl { padding-left: var(--spacing-xl); } 809 | .pl-2xl { padding-left: var(--spacing-2xl); } 810 | .pl-3xl { padding-left: var(--spacing-3xl); } 811 | .pl-4xl { padding-left: var(--spacing-4xl); } 812 | 813 | .pr-0 { padding-right: 0; } 814 | .pr-2xs { padding-right: var(--spacing-2xs); } 815 | .pr-xs { padding-right: var(--spacing-xs); } 816 | .pr-s { padding-right: var(--spacing-s); } 817 | .pr-m { padding-right: var(--spacing-m); } 818 | .pr-l { padding-right: var(--spacing-l); } 819 | .pr-xl { padding-right: var(--spacing-xl); } 820 | .pr-2xl { padding-right: var(--spacing-2xl); } 821 | .pr-3xl { padding-right: var(--spacing-3xl); } 822 | .pr-4xl { padding-right: var(--spacing-4xl); } 823 | 824 | .pb-0 { padding-bottom: 0; } 825 | .pb-2xs { padding-bottom: var(--spacing-2xs); } 826 | .pb-xs { padding-bottom: var(--spacing-xs); } 827 | .pb-s { padding-bottom: var(--spacing-s); } 828 | .pb-m { padding-bottom: var(--spacing-m); } 829 | .pb-l { padding-bottom: var(--spacing-l); } 830 | .pb-xl { padding-bottom: var(--spacing-xl); } 831 | .pb-2xl { padding-bottom: var(--spacing-2xl); } 832 | .pb-3xl { padding-bottom: var(--spacing-3xl); } 833 | .pb-4xl { padding-bottom: var(--spacing-4xl); } 834 | 835 | .pt-0 { padding-top: 0; } 836 | .pt-2xs { padding-top: var(--spacing-2xs); } 837 | .pt-xs { padding-top: var(--spacing-xs); } 838 | .pt-s { padding-top: var(--spacing-s); } 839 | .pt-m { padding-top: var(--spacing-m); } 840 | .pt-l { padding-top: var(--spacing-l); } 841 | .pt-xl { padding-top: var(--spacing-xl); } 842 | .pt-2xl { padding-top: var(--spacing-2xl); } 843 | .pt-3xl { padding-top: var(--spacing-3xl); } 844 | .pt-4xl { padding-top: var(--spacing-4xl); } 845 | 846 | .py-0 { padding-top: 0; padding-bottom: 0; } 847 | .py-2xs { padding-top: var(--spacing-2xs); padding-bottom: var(--spacing-2xs); } 848 | .py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); } 849 | .py-s { padding-top: var(--spacing-s); padding-bottom: var(--spacing-s); } 850 | .py-m { padding-top: var(--spacing-m); padding-bottom: var(--spacing-m); } 851 | .py-l { padding-top: var(--spacing-l); padding-bottom: var(--spacing-l); } 852 | .py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); } 853 | .py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); } 854 | .py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); } 855 | .py-4xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); } 856 | 857 | .px-0 { padding-left: 0; padding-right: 0; } 858 | .px-2xs { padding-left: var(--spacing-2xs); padding-right: var(--spacing-2xs); } 859 | .px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); } 860 | .px-s { padding-left: var(--spacing-s); padding-right: var(--spacing-s); } 861 | .px-m { padding-left: var(--spacing-m); padding-right: var(--spacing-m); } 862 | .px-l { padding-left: var(--spacing-l); padding-right: var(--spacing-l); } 863 | .px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); } 864 | .px-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); } 865 | .px-3xl { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); } 866 | .px-4xl { padding-left: var(--spacing-4xl); padding-right: var(--spacing-4xl); } 867 | 868 | .ma-0 { margin: 0; } 869 | .ma-2xs { margin: var(--spacing-2xs); } 870 | .ma-xs { margin: var(--spacing-xs); } 871 | .ma-s { margin: var(--spacing-s); } 872 | .ma-m { margin: var(--spacing-m); } 873 | .ma-l { margin: var(--spacing-l); } 874 | .ma-xl { margin: var(--spacing-xl); } 875 | .ma-2xl { margin: var(--spacing-2xl); } 876 | .ma-3xl { margin: var(--spacing-3xl); } 877 | .ma-4xl { margin: var(--spacing-4xl); } 878 | 879 | .ml-0 { margin-left: 0; } 880 | .ml-2xs { margin-left: var(--spacing-2xs); } 881 | .ml-xs { margin-left: var(--spacing-xs); } 882 | .ml-s { margin-left: var(--spacing-s); } 883 | .ml-m { margin-left: var(--spacing-m); } 884 | .ml-l { margin-left: var(--spacing-l); } 885 | .ml-xl { margin-left: var(--spacing-xl); } 886 | .ml-2xl { margin-left: var(--spacing-2xl); } 887 | .ml-3xl { margin-left: var(--spacing-3xl); } 888 | .ml-4xl { margin-left: var(--spacing-4xl); } 889 | 890 | .mr-0 { margin-right: 0; } 891 | .mr-2xs { margin-right: var(--spacing-2xs); } 892 | .mr-xs { margin-right: var(--spacing-xs); } 893 | .mr-s { margin-right: var(--spacing-s); } 894 | .mr-m { margin-right: var(--spacing-m); } 895 | .mr-l { margin-right: var(--spacing-l); } 896 | .mr-xl { margin-right: var(--spacing-xl); } 897 | .mr-2xl { margin-right: var(--spacing-2xl); } 898 | .mr-3xl { margin-right: var(--spacing-3xl); } 899 | .mr-4xl { margin-right: var(--spacing-4xl); } 900 | 901 | .mb-0 { margin-bottom: 0; } 902 | .mb-2xs { margin-bottom: var(--spacing-2xs); } 903 | .mb-xs { margin-bottom: var(--spacing-xs); } 904 | .mb-s { margin-bottom: var(--spacing-s); } 905 | .mb-m { margin-bottom: var(--spacing-m); } 906 | .mb-l { margin-bottom: var(--spacing-l); } 907 | .mb-xl { margin-bottom: var(--spacing-xl); } 908 | .mb-2xl { margin-bottom: var(--spacing-2xl); } 909 | .mb-3xl { margin-bottom: var(--spacing-3xl); } 910 | .mb-4xl { margin-bottom: var(--spacing-4xl); } 911 | 912 | .mt-0 { margin-top: 0; } 913 | .mt-2xs { margin-top: var(--spacing-2xs); } 914 | .mt-xs { margin-top: var(--spacing-xs); } 915 | .mt-s { margin-top: var(--spacing-s); } 916 | .mt-m { margin-top: var(--spacing-m); } 917 | .mt-l { margin-top: var(--spacing-l); } 918 | .mt-xl { margin-top: var(--spacing-xl); } 919 | .mt-2xl { margin-top: var(--spacing-2xl); } 920 | .mt-3xl { margin-top: var(--spacing-3xl); } 921 | .mt-4xl { margin-top: var(--spacing-4xl); } 922 | 923 | .my-auto { margin-top: auto; margin-bottom: auto; } 924 | .my-0 { margin-top: 0; margin-bottom: 0; } 925 | .my-2xs { margin-top: var(--spacing-2xs); margin-bottom: var(--spacing-2xs); } 926 | .my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); } 927 | .my-s { margin-top: var(--spacing-s); margin-bottom: var(--spacing-s); } 928 | .my-m { margin-top: var(--spacing-m); margin-bottom: var(--spacing-m); } 929 | .my-l { margin-top: var(--spacing-l); margin-bottom: var(--spacing-l); } 930 | .my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); } 931 | .my-2xl { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); } 932 | .my-3xl { margin-top: var(--spacing-3xl); margin-bottom: var(--spacing-3xl); } 933 | .my-4xl { margin-top: var(--spacing-4xl); margin-bottom: var(--spacing-4xl); } 934 | 935 | .mx-auto { margin-left: auto; margin-right: auto; } 936 | .mx-0 { margin-left: 0; margin-right: 0; } 937 | .mx-2xs { margin-left: var(--spacing-2xs); margin-right: var(--spacing-2xs); } 938 | .mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); } 939 | .mx-s { margin-left: var(--spacing-s); margin-right: var(--spacing-s); } 940 | .mx-m { margin-left: var(--spacing-m); margin-right: var(--spacing-m); } 941 | .mx-l { margin-left: var(--spacing-l); margin-right: var(--spacing-l); } 942 | .mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); } 943 | .mx-2xl { margin-left: var(--spacing-2xl); margin-right: var(--spacing-2xl); } 944 | .mx-3xl { margin-left: var(--spacing-3xl); margin-right: var(--spacing-3xl); } 945 | .mx-4xl { margin-left: var(--spacing-4xl); margin-right: var(--spacing-4xl); } 946 | 947 | /* 948 | POSITIONING 949 | */ 950 | .static { position: static; } 951 | .relative { position: relative; } 952 | .absolute { position: absolute; } 953 | .fixed { position: fixed; } 954 | 955 | /* 956 | COORDINATES 957 | */ 958 | 959 | .top-0 { top: 0; } 960 | .right-0 { right: 0; } 961 | .bottom-0 { bottom: 0; } 962 | .left-0 { left: 0; } 963 | 964 | .top-s { top: var(--spacing-s); } 965 | .right-s { right: var(--spacing-s); } 966 | .bottom-s { bottom: var(--spacing-s); } 967 | .left-s { left: var(--spacing-s); } 968 | 969 | .top-m { top: var(--spacing-m); } 970 | .right-m { right: var(--spacing-m); } 971 | .bottom-m { bottom: var(--spacing-m); } 972 | .left-m { left: var(--spacing-m); } 973 | 974 | .top-l { top: var(--spacing-l); } 975 | .right-l { right: var(--spacing-l); } 976 | .bottom-l { bottom: var(--spacing-l); } 977 | .left-l { left: var(--spacing-l); } 978 | 979 | .fill { top: 0; right: 0; bottom: 0; left: 0; } 980 | 981 | /* 982 | BORDERS 983 | */ 984 | 985 | .bn { border-style: none; border-width: 0; } 986 | .ba { border-style: solid; border-width: 1px; } 987 | .bt { border-top-style: solid; border-top-width: 1px; } 988 | .br { border-right-style: solid; border-right-width: 1px; } 989 | .bb { border-bottom-style: solid; border-bottom-width: 1px; } 990 | .bl { border-left-style: solid; border-left-width: 1px; } 991 | 992 | .bw-0 { border-width: 0; } 993 | .bw-3xs { border-width: var(--spacing-3xs); } 994 | .bw-2xs { border-width: var(--spacing-2xs); } 995 | .bw-xs { border-width: var(--spacing-xs); } 996 | .bw-s { border-width: var(--spacing-s); } 997 | .bw-m { border-width: var(--spacing-m); } 998 | 999 | .b--dotted { border-style: dotted; } 1000 | .b--dashed { border-style: dashed; } 1001 | .b--solid { border-style: solid; } 1002 | .b--none { border-style: none; } 1003 | 1004 | .b--background { border-color: var(--background); } 1005 | .b--background-alt { border-color: var(--background-alt); } 1006 | 1007 | .b--main { border-color: var(--main); } 1008 | .b--bright { border-color: var(--bright); } 1009 | .b--muted { border-color: var(--muted); } 1010 | 1011 | .b--link { border-color: var(--link); } 1012 | .b--focus { border-color: var(--focus); } 1013 | .b--border { border-color: var(--border); } 1014 | .b--code { border-color: var(--code); } 1015 | 1016 | .b--button-hover { border-color: var(--button-hover); } 1017 | 1018 | .b--form-placeholder { border-color: var(--form-placeholder); } 1019 | .b--form-text { border-color: var(--form-text); } 1020 | 1021 | .b--variable { border-color: var(--variable); } 1022 | .b--highlight { border-color: var(--highlight); } 1023 | 1024 | .b--transparent { border-color: transparent; } 1025 | .b--inherit { border-color: inherit; } 1026 | 1027 | .br-0 { border-radius: 0; } 1028 | .br-3xs { border-radius: var(--spacing-3xs); } 1029 | .br-2xs { border-radius: var(--spacing-2xs); } 1030 | .br-xs { border-radius: var(--spacing-xs); } 1031 | .br-s { border-radius: var(--spacing-s); } 1032 | .br-m { border-radius: var(--spacing-m); } 1033 | .br-100 { border-radius: 100%; } 1034 | 1035 | .br-pill { border-radius: 9999px; } 1036 | .br--bottom { 1037 | border-top-left-radius: 0; 1038 | border-top-right-radius: 0; 1039 | } 1040 | .br--top { 1041 | border-bottom-left-radius: 0; 1042 | border-bottom-right-radius: 0; 1043 | } 1044 | .br--right { 1045 | border-top-left-radius: 0; 1046 | border-bottom-left-radius: 0; 1047 | } 1048 | .br--left { 1049 | border-top-right-radius: 0; 1050 | border-bottom-right-radius: 0; 1051 | } 1052 | 1053 | .bg-background { background-color: var(--background); } 1054 | .bg-background-alt { background-color: var(--background-alt); } 1055 | .bg-inverse { background-color: var(--background-inverse); } 1056 | 1057 | .bg-main { background-color: var(--main); } 1058 | .bg-bright { background-color: var(--bright); } 1059 | .bg-muted { background-color: var(--muted); } 1060 | 1061 | .bg-link { background-color: var(--link); } 1062 | .bg-focus { background-color: var(--focus); } 1063 | .bg-border { background-color: var(--border); } 1064 | .bg-code { background-color: var(--code); } 1065 | 1066 | .bg-button { background-color: var(--button); } 1067 | .bg-button-hover { background-color: var(--button-hover); } 1068 | 1069 | .bg-form-placeholder { background-color: var(--form-placeholder); } 1070 | .bg-form-text { background-color: var(--form-text); } 1071 | 1072 | .bg-variable { background-color: var(--variable); } 1073 | .bg-highlight { background-color: var(--highlight); } 1074 | 1075 | .bg-transparent { background-color: transparent; } 1076 | 1077 | .background { color: var(--background); } 1078 | .background-alt { color: var(--background-alt); } 1079 | 1080 | .main { color: var(--main); } 1081 | .bright { color: var(--bright); } 1082 | .muted { color: var(--muted); } 1083 | .inverse { color: var(--background); } 1084 | 1085 | .link { color: var(--link); } 1086 | .focus { color: var(--focus); } 1087 | .border { color: var(--border); } 1088 | .code { color: var(--code); } 1089 | 1090 | .button-hover { color: var(--button-hover); } 1091 | 1092 | .form-placeholder { color: var(--form-placeholder); } 1093 | .form-text { color: var(--form-text); } 1094 | 1095 | .variable { color: var(--variable); } 1096 | .highlight { color: var(--highlight); } 1097 | 1098 | .nowrap { white-space: nowrap; } 1099 | .pre-wrap { white-space: pre-wrap; } 1100 | .overflow-x { overflow-x: auto; } 1101 | .overflow-y { overflow-y: auto; } 1102 | 1103 | .hover\:bg-inverse:hover { 1104 | background-color: var(--background-inverse); 1105 | } 1106 | 1107 | .hover\:bg-background:hover { 1108 | background-color: var(--background); 1109 | } 1110 | 1111 | .hover\:bg-background-alt:hover { 1112 | background-color: var(--background-alt); 1113 | } 1114 | 1115 | .hover\:bg-link:hover { 1116 | background-color: var(--link); 1117 | } 1118 | 1119 | .hover\:bright:hover { 1120 | color: var(--bright); 1121 | } 1122 | 1123 | .hover\:bg-background-alt:hover { 1124 | text-decoration-color: var(--background-alt); 1125 | } 1126 | 1127 | .hover\:underline:hover { 1128 | text-decoration: underline; 1129 | } 1130 | 1131 | .underline { 1132 | text-decoration: underline; 1133 | } 1134 | 1135 | .no-underline, 1136 | a.no-underline { 1137 | text-decoration: none; 1138 | } 1139 | 1140 | .hover\:no-underline, 1141 | a.hover\:no-underline { 1142 | text-decoration: none; 1143 | } 1144 | 1145 | .tc { text-align: center; } 1146 | .tl { text-align: left; } 1147 | .tr { text-align: right; } 1148 | .tj { text-align: justify; } 1149 | .ti { text-align: inherit; } 1150 | 1151 | .f-1 { font-size: 3rem; } 1152 | .f-2 { font-size: 2.25rem; } 1153 | .f-3 { font-size: 1.5rem; } 1154 | .f-4 { font-size: 1.25rem; } 1155 | .f-5 { font-size: 1rem; } 1156 | .f-6 { font-size: .875rem; } 1157 | 1158 | .o-0 { opacity: 0; } 1159 | .o-25 { opacity: 0.25; } 1160 | .o-50 { opacity: 0.5; } 1161 | .o-75 { opacity: 0.75; } 1162 | .o-1 { opacity: 1; } 1163 | 1164 | .z-0 { z-index: 0; } 1165 | .z-1 { z-index: 1; } 1166 | .z-2 { z-index: 2; } 1167 | .z-3 { z-index: 3; } 1168 | .z-4 { z-index: 4; } 1169 | 1170 | .shadow-1 { box-shadow: var(--shadow); } 1171 | 1172 | .ellipsis { 1173 | overflow: hidden; 1174 | white-space: nowrap; 1175 | text-overflow: ellipsis; 1176 | } 1177 | 1178 | @media screen and (max-width: 507px) { 1179 | .sm { 1180 | display: inherit; 1181 | } 1182 | 1183 | .md, .lg { 1184 | display: none; 1185 | } 1186 | 1187 | .sm\:w-100 { width: 100%; } 1188 | .sm\:w-m { width: var(--spacing-m); } 1189 | } 1190 | 1191 | @media screen and (min-width: 508px) and (max-width: 959px) { 1192 | .sm, .lg { 1193 | display: none; 1194 | } 1195 | 1196 | .md { 1197 | display: inherit; 1198 | } 1199 | 1200 | .md\:w-3xl { width: var(--spacing-3xl); } 1201 | .md\:w-m { width: var(--spacing-m); } 1202 | } 1203 | 1204 | @media screen and (min-width: 960px) { 1205 | .sm, md { 1206 | display: none; 1207 | } 1208 | 1209 | .lg { 1210 | display: inherit; 1211 | } 1212 | 1213 | .lg\:w-3xl { width: var(--spacing-3xl); } 1214 | } 1215 | -------------------------------------------------------------------------------- /alpine.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define(factory) : 4 | (global = global || self, global.Alpine = factory()); 5 | }(this, (function () { 'use strict'; 6 | 7 | function _defineProperty(obj, key, value) { 8 | if (key in obj) { 9 | Object.defineProperty(obj, key, { 10 | value: value, 11 | enumerable: true, 12 | configurable: true, 13 | writable: true 14 | }); 15 | } else { 16 | obj[key] = value; 17 | } 18 | 19 | return obj; 20 | } 21 | 22 | function ownKeys(object, enumerableOnly) { 23 | var keys = Object.keys(object); 24 | 25 | if (Object.getOwnPropertySymbols) { 26 | var symbols = Object.getOwnPropertySymbols(object); 27 | if (enumerableOnly) symbols = symbols.filter(function (sym) { 28 | return Object.getOwnPropertyDescriptor(object, sym).enumerable; 29 | }); 30 | keys.push.apply(keys, symbols); 31 | } 32 | 33 | return keys; 34 | } 35 | 36 | function _objectSpread2(target) { 37 | for (var i = 1; i < arguments.length; i++) { 38 | var source = arguments[i] != null ? arguments[i] : {}; 39 | 40 | if (i % 2) { 41 | ownKeys(Object(source), true).forEach(function (key) { 42 | _defineProperty(target, key, source[key]); 43 | }); 44 | } else if (Object.getOwnPropertyDescriptors) { 45 | Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); 46 | } else { 47 | ownKeys(Object(source)).forEach(function (key) { 48 | Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 49 | }); 50 | } 51 | } 52 | 53 | return target; 54 | } 55 | 56 | // Thanks @stimulus: 57 | // https://github.com/stimulusjs/stimulus/blob/master/packages/%40stimulus/core/src/application.ts 58 | function domReady() { 59 | return new Promise(resolve => { 60 | if (document.readyState == "loading") { 61 | document.addEventListener("DOMContentLoaded", resolve); 62 | } else { 63 | resolve(); 64 | } 65 | }); 66 | } 67 | function arrayUnique(array) { 68 | return Array.from(new Set(array)); 69 | } 70 | function isTesting() { 71 | return navigator.userAgent.includes("Node.js") || navigator.userAgent.includes("jsdom"); 72 | } 73 | function kebabCase(subject) { 74 | return subject.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/[_\s]/, '-').toLowerCase(); 75 | } 76 | function walk(el, callback) { 77 | if (callback(el) === false) return; 78 | let node = el.firstElementChild; 79 | 80 | while (node) { 81 | walk(node, callback); 82 | node = node.nextElementSibling; 83 | } 84 | } 85 | function debounce(func, wait) { 86 | var timeout; 87 | return function () { 88 | var context = this, 89 | args = arguments; 90 | 91 | var later = function later() { 92 | timeout = null; 93 | func.apply(context, args); 94 | }; 95 | 96 | clearTimeout(timeout); 97 | timeout = setTimeout(later, wait); 98 | }; 99 | } 100 | function saferEval(expression, dataContext, additionalHelperVariables = {}) { 101 | return new Function(['$data', ...Object.keys(additionalHelperVariables)], `var result; with($data) { result = ${expression} }; return result`)(dataContext, ...Object.values(additionalHelperVariables)); 102 | } 103 | function saferEvalNoReturn(expression, dataContext, additionalHelperVariables = {}) { 104 | // For the cases when users pass only a function reference to the caller: `x-on:click="foo"` 105 | // Where "foo" is a function. Also, we'll pass the function the event instance when we call it. 106 | if (Object.keys(dataContext).includes(expression)) { 107 | let methodReference = new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { return ${expression} }`)(dataContext, ...Object.values(additionalHelperVariables)); 108 | 109 | if (typeof methodReference === 'function') { 110 | return methodReference.call(dataContext, additionalHelperVariables['$event']); 111 | } 112 | } 113 | 114 | return new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`)(dataContext, ...Object.values(additionalHelperVariables)); 115 | } 116 | const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)\b/; 117 | function isXAttr(attr) { 118 | const name = replaceAtAndColonWithStandardSyntax(attr.name); 119 | return xAttrRE.test(name); 120 | } 121 | function getXAttrs(el, type) { 122 | return Array.from(el.attributes).filter(isXAttr).map(attr => { 123 | const name = replaceAtAndColonWithStandardSyntax(attr.name); 124 | const typeMatch = name.match(xAttrRE); 125 | const valueMatch = name.match(/:([a-zA-Z\-:]+)/); 126 | const modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []; 127 | return { 128 | type: typeMatch ? typeMatch[1] : null, 129 | value: valueMatch ? valueMatch[1] : null, 130 | modifiers: modifiers.map(i => i.replace('.', '')), 131 | expression: attr.value 132 | }; 133 | }).filter(i => { 134 | // If no type is passed in for filtering, bypass filter 135 | if (!type) return true; 136 | return i.type === type; 137 | }); 138 | } 139 | function isBooleanAttr(attrName) { 140 | // As per HTML spec table https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute 141 | // Array roughly ordered by estimated usage 142 | const booleanAttributes = ['disabled', 'checked', 'required', 'readonly', 'hidden', 'open', 'selected', 'autofocus', 'itemscope', 'multiple', 'novalidate', 'allowfullscreen', 'allowpaymentrequest', 'formnovalidate', 'autoplay', 'controls', 'loop', 'muted', 'playsinline', 'default', 'ismap', 'reversed', 'async', 'defer', 'nomodule']; 143 | return booleanAttributes.includes(attrName); 144 | } 145 | function replaceAtAndColonWithStandardSyntax(name) { 146 | if (name.startsWith('@')) { 147 | return name.replace('@', 'x-on:'); 148 | } else if (name.startsWith(':')) { 149 | return name.replace(':', 'x-bind:'); 150 | } 151 | 152 | return name; 153 | } 154 | function transitionIn(el, show, forceSkip = false) { 155 | // We don't want to transition on the initial page load. 156 | if (forceSkip) return show(); 157 | const attrs = getXAttrs(el, 'transition'); 158 | const showAttr = getXAttrs(el, 'show')[0]; // If this is triggered by a x-show.transition. 159 | 160 | if (showAttr && showAttr.modifiers.includes('transition')) { 161 | let modifiers = showAttr.modifiers; // If x-show.transition.out, we'll skip the "in" transition. 162 | 163 | if (modifiers.includes('out') && !modifiers.includes('in')) return show(); 164 | const settingBothSidesOfTransition = modifiers.includes('in') && modifiers.includes('out'); // If x-show.transition.in...out... only use "in" related modifiers for this transition. 165 | 166 | modifiers = settingBothSidesOfTransition ? modifiers.filter((i, index) => index < modifiers.indexOf('out')) : modifiers; 167 | transitionHelperIn(el, modifiers, show); // Otherwise, we can assume x-transition:enter. 168 | } else if (attrs.length > 0) { 169 | transitionClassesIn(el, attrs, show); 170 | } else { 171 | // If neither, just show that damn thing. 172 | show(); 173 | } 174 | } 175 | function transitionOut(el, hide, forceSkip = false) { 176 | if (forceSkip) return hide(); 177 | const attrs = getXAttrs(el, 'transition'); 178 | const showAttr = getXAttrs(el, 'show')[0]; 179 | 180 | if (showAttr && showAttr.modifiers.includes('transition')) { 181 | let modifiers = showAttr.modifiers; 182 | if (modifiers.includes('in') && !modifiers.includes('out')) return hide(); 183 | const settingBothSidesOfTransition = modifiers.includes('in') && modifiers.includes('out'); 184 | modifiers = settingBothSidesOfTransition ? modifiers.filter((i, index) => index > modifiers.indexOf('out')) : modifiers; 185 | transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hide); 186 | } else if (attrs.length > 0) { 187 | transitionClassesOut(el, attrs, hide); 188 | } else { 189 | hide(); 190 | } 191 | } 192 | function transitionHelperIn(el, modifiers, showCallback) { 193 | // Default values inspired by: https://material.io/design/motion/speed.html#duration 194 | const styleValues = { 195 | duration: modifierValue(modifiers, 'duration', 150), 196 | origin: modifierValue(modifiers, 'origin', 'center'), 197 | first: { 198 | opacity: 0, 199 | scale: modifierValue(modifiers, 'scale', 95) 200 | }, 201 | second: { 202 | opacity: 1, 203 | scale: 100 204 | } 205 | }; 206 | transitionHelper(el, modifiers, showCallback, () => {}, styleValues); 207 | } 208 | function transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hideCallback) { 209 | // Make the "out" transition .5x slower than the "in". (Visually better) 210 | // HOWEVER, if they explicitly set a duration for the "out" transition, 211 | // use that. 212 | const duration = settingBothSidesOfTransition ? modifierValue(modifiers, 'duration', 150) : modifierValue(modifiers, 'duration', 150) / 2; 213 | const styleValues = { 214 | duration: duration, 215 | origin: modifierValue(modifiers, 'origin', 'center'), 216 | first: { 217 | opacity: 1, 218 | scale: 100 219 | }, 220 | second: { 221 | opacity: 0, 222 | scale: modifierValue(modifiers, 'scale', 95) 223 | } 224 | }; 225 | transitionHelper(el, modifiers, () => {}, hideCallback, styleValues); 226 | } 227 | 228 | function modifierValue(modifiers, key, fallback) { 229 | // If the modifier isn't present, use the default. 230 | if (modifiers.indexOf(key) === -1) return fallback; // If it IS present, grab the value after it: x-show.transition.duration.500ms 231 | 232 | const rawValue = modifiers[modifiers.indexOf(key) + 1]; 233 | if (!rawValue) return fallback; 234 | 235 | if (key === 'scale') { 236 | // Check if the very next value is NOT a number and return the fallback. 237 | // If x-show.transition.scale, we'll use the default scale value. 238 | // That is how a user opts out of the opacity transition. 239 | if (!isNumeric(rawValue)) return fallback; 240 | } 241 | 242 | if (key === 'duration') { 243 | // Support x-show.transition.duration.500ms && duration.500 244 | let match = rawValue.match(/([0-9]+)ms/); 245 | if (match) return match[1]; 246 | } 247 | 248 | if (key === 'origin') { 249 | // Support chaining origin directions: x-show.transition.top.right 250 | if (['top', 'right', 'left', 'center', 'bottom'].includes(modifiers[modifiers.indexOf(key) + 2])) { 251 | return [rawValue, modifiers[modifiers.indexOf(key) + 2]].join(' '); 252 | } 253 | } 254 | 255 | return rawValue; 256 | } 257 | 258 | function transitionHelper(el, modifiers, hook1, hook2, styleValues) { 259 | // If the user set these style values, we'll put them back when we're done with them. 260 | const opacityCache = el.style.opacity; 261 | const transformCache = el.style.transform; 262 | const transformOriginCache = el.style.transformOrigin; // If no modifiers are present: x-show.transition, we'll default to both opacity and scale. 263 | 264 | const noModifiers = !modifiers.includes('opacity') && !modifiers.includes('scale'); 265 | const transitionOpacity = noModifiers || modifiers.includes('opacity'); 266 | const transitionScale = noModifiers || modifiers.includes('scale'); // These are the explicit stages of a transition (same stages for in and for out). 267 | // This way you can get a birds eye view of the hooks, and the differences 268 | // between them. 269 | 270 | const stages = { 271 | start() { 272 | if (transitionOpacity) el.style.opacity = styleValues.first.opacity; 273 | if (transitionScale) el.style.transform = `scale(${styleValues.first.scale / 100})`; 274 | }, 275 | 276 | during() { 277 | if (transitionScale) el.style.transformOrigin = styleValues.origin; 278 | el.style.transitionProperty = [transitionOpacity ? `opacity` : ``, transitionScale ? `transform` : ``].join(' ').trim(); 279 | el.style.transitionDuration = `${styleValues.duration / 1000}s`; 280 | el.style.transitionTimingFunction = `cubic-bezier(0.4, 0.0, 0.2, 1)`; 281 | }, 282 | 283 | show() { 284 | hook1(); 285 | }, 286 | 287 | end() { 288 | if (transitionOpacity) el.style.opacity = styleValues.second.opacity; 289 | if (transitionScale) el.style.transform = `scale(${styleValues.second.scale / 100})`; 290 | }, 291 | 292 | hide() { 293 | hook2(); 294 | }, 295 | 296 | cleanup() { 297 | if (transitionOpacity) el.style.opacity = opacityCache; 298 | if (transitionScale) el.style.transform = transformCache; 299 | if (transitionScale) el.style.transformOrigin = transformOriginCache; 300 | el.style.transitionProperty = null; 301 | el.style.transitionDuration = null; 302 | el.style.transitionTimingFunction = null; 303 | } 304 | 305 | }; 306 | transition(el, stages); 307 | } 308 | function transitionClassesIn(el, directives, showCallback) { 309 | const enter = (directives.find(i => i.value === 'enter') || { 310 | expression: '' 311 | }).expression.split(' ').filter(i => i !== ''); 312 | const enterStart = (directives.find(i => i.value === 'enter-start') || { 313 | expression: '' 314 | }).expression.split(' ').filter(i => i !== ''); 315 | const enterEnd = (directives.find(i => i.value === 'enter-end') || { 316 | expression: '' 317 | }).expression.split(' ').filter(i => i !== ''); 318 | transitionClasses(el, enter, enterStart, enterEnd, showCallback, () => {}); 319 | } 320 | function transitionClassesOut(el, directives, hideCallback) { 321 | const leave = (directives.find(i => i.value === 'leave') || { 322 | expression: '' 323 | }).expression.split(' ').filter(i => i !== ''); 324 | const leaveStart = (directives.find(i => i.value === 'leave-start') || { 325 | expression: '' 326 | }).expression.split(' ').filter(i => i !== ''); 327 | const leaveEnd = (directives.find(i => i.value === 'leave-end') || { 328 | expression: '' 329 | }).expression.split(' ').filter(i => i !== ''); 330 | transitionClasses(el, leave, leaveStart, leaveEnd, () => {}, hideCallback); 331 | } 332 | function transitionClasses(el, classesDuring, classesStart, classesEnd, hook1, hook2) { 333 | const originalClasses = el.__x_original_classes || []; 334 | const stages = { 335 | start() { 336 | el.classList.add(...classesStart); 337 | }, 338 | 339 | during() { 340 | el.classList.add(...classesDuring); 341 | }, 342 | 343 | show() { 344 | hook1(); 345 | }, 346 | 347 | end() { 348 | // Don't remove classes that were in the original class attribute. 349 | el.classList.remove(...classesStart.filter(i => !originalClasses.includes(i))); 350 | el.classList.add(...classesEnd); 351 | }, 352 | 353 | hide() { 354 | hook2(); 355 | }, 356 | 357 | cleanup() { 358 | el.classList.remove(...classesDuring.filter(i => !originalClasses.includes(i))); 359 | el.classList.remove(...classesEnd.filter(i => !originalClasses.includes(i))); 360 | } 361 | 362 | }; 363 | transition(el, stages); 364 | } 365 | function transition(el, stages) { 366 | stages.start(); 367 | stages.during(); 368 | requestAnimationFrame(() => { 369 | // Note: Safari's transitionDuration property will list out comma separated transition durations 370 | // for every single transition property. Let's grab the first one and call it a day. 371 | let duration = Number(getComputedStyle(el).transitionDuration.replace(/,.*/, '').replace('s', '')) * 1000; 372 | stages.show(); 373 | requestAnimationFrame(() => { 374 | stages.end(); 375 | setTimeout(() => { 376 | stages.hide(); // Adding an "isConnected" check, in case the callback 377 | // removed the element from the DOM. 378 | 379 | if (el.isConnected) { 380 | stages.cleanup(); 381 | } 382 | }, duration); 383 | }); 384 | }); 385 | } 386 | function isNumeric(subject) { 387 | return !isNaN(subject); 388 | } 389 | 390 | function handleForDirective(component, templateEl, expression, initialUpdate, extraVars) { 391 | warnIfNotTemplateTag(templateEl); 392 | let iteratorNames = parseForExpression(expression); 393 | let items = evaluateItemsAndReturnEmptyIfXIfIsPresentAndFalseOnElement(component, templateEl, iteratorNames, extraVars); // As we walk the array, we'll also walk the DOM (updating/creating as we go). 394 | 395 | let currentEl = templateEl; 396 | items.forEach((item, index) => { 397 | let iterationScopeVariables = getIterationScopeVariables(iteratorNames, item, index, items, extraVars()); 398 | let currentKey = generateKeyForIteration(component, templateEl, index, iterationScopeVariables); 399 | let nextEl = lookAheadForMatchingKeyedElementAndMoveItIfFound(currentEl.nextElementSibling, currentKey); // If we haven't found a matching key, insert the element at the current position. 400 | 401 | if (!nextEl) { 402 | nextEl = addElementInLoopAfterCurrentEl(templateEl, currentEl); // And transition it in if it's not the first page load. 403 | 404 | transitionIn(nextEl, () => {}, initialUpdate); 405 | nextEl.__x_for = iterationScopeVariables; 406 | component.initializeElements(nextEl, () => nextEl.__x_for); // Otherwise update the element we found. 407 | } else { 408 | // Temporarily remove the key indicator to allow the normal "updateElements" to work. 409 | delete nextEl.__x_for_key; 410 | nextEl.__x_for = iterationScopeVariables; 411 | component.updateElements(nextEl, () => nextEl.__x_for); 412 | } 413 | 414 | currentEl = nextEl; 415 | currentEl.__x_for_key = currentKey; 416 | }); 417 | removeAnyLeftOverElementsFromPreviousUpdate(currentEl); 418 | } // This was taken from VueJS 2.* core. Thanks Vue! 419 | 420 | function parseForExpression(expression) { 421 | let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/; 422 | let stripParensRE = /^\(|\)$/g; 423 | let forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/; 424 | let inMatch = expression.match(forAliasRE); 425 | if (!inMatch) return; 426 | let res = {}; 427 | res.items = inMatch[2].trim(); 428 | let item = inMatch[1].trim().replace(stripParensRE, ''); 429 | let iteratorMatch = item.match(forIteratorRE); 430 | 431 | if (iteratorMatch) { 432 | res.item = item.replace(forIteratorRE, '').trim(); 433 | res.index = iteratorMatch[1].trim(); 434 | 435 | if (iteratorMatch[2]) { 436 | res.collection = iteratorMatch[2].trim(); 437 | } 438 | } else { 439 | res.item = item; 440 | } 441 | 442 | return res; 443 | } 444 | 445 | function getIterationScopeVariables(iteratorNames, item, index, items, extraVars) { 446 | // We must create a new object, so each iteration has a new scope 447 | let scopeVariables = extraVars ? _objectSpread2({}, extraVars) : {}; 448 | scopeVariables[iteratorNames.item] = item; 449 | if (iteratorNames.index) scopeVariables[iteratorNames.index] = index; 450 | if (iteratorNames.collection) scopeVariables[iteratorNames.collection] = items; 451 | return scopeVariables; 452 | } 453 | 454 | function generateKeyForIteration(component, el, index, iterationScopeVariables) { 455 | let bindKeyAttribute = getXAttrs(el, 'bind').filter(attr => attr.value === 'key')[0]; // If the dev hasn't specified a key, just return the index of the iteration. 456 | 457 | if (!bindKeyAttribute) return index; 458 | return component.evaluateReturnExpression(el, bindKeyAttribute.expression, () => iterationScopeVariables); 459 | } 460 | 461 | function warnIfNotTemplateTag(el) { 462 | if (el.tagName.toLowerCase() !== 'template') console.warn('Alpine: [x-for] directive should only be added to