mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-10 07:53:57 +02:00
Code Issues Releases Wiki Activity

Finished button module, added alternate styles etc.

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-25 19:38:57 +03:00
parent 63e3f2f2bb
commit 31bcceaa7d
6 changed files with 131 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/v2/DEVLOG.md
View File

@@ -192,4 +192,8 @@
- Added `$hide-file-inputs` flag to decide the styling of `file` `<input>` elements.
- Softcoded changes and optimized some things in the `button` module.
- Updated demo page.
- Added and optimized `make-button-alt-color` mixin, created primary color variant.
- Added and optimized `make-button-alt-color` mixin, created `primary` color variant.
- Added `secondary` and `tertiary` button variants using the mixin. Tested colors.
- Added button overrides for links styled as buttons for `text-decoration: underline` and `&:hover { opacity: 0.75}`. Should now not give away the fact that it's a link.
- Added `make-button-alt-style` mixin, created `small` and `large` style variants.
- Added and tested an entirely custom button style that does something very different compared to the original variants. Variables and mixins included in the flavor file, but are commented out, as they are only used as a demonstration. *TODO* Add a blog post later down the line where I design a full flavor using the files etc., showcasing things like these.

3
docs/v2/index.html
View File

@@ -260,6 +260,7 @@
<input type="button" value="Input button">
<input type="submit" value="Submit button">
<input type="reset" value="Reset button">
<a href="#" class="button">Link button</a>
<button disabled>Disabled button</button><br>
<p>File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. <strong>mini.css</strong> deals with the problem, using a workaround involving labels that use the <code>button</code> class, which applies the exact same style to those labels. Just link it to the <code>&lt;input type=&quot;file&quot;&gt;</code> element of your choice and you're good to go. For example:</p>
<span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button">Upload file</label><br>
@@ -269,7 +270,7 @@
<input type="button" value="Secondary input button" class="secondary">
<input type="reset" value="Tertiary reset button" class="tertiary">
<input type="submit" value="Large submit button" class="large">
<button disabled class="small primary">Small primary disabled button</button><br>
<label disabled class="button small primary">Small primary disabled label button</label><br>
</div>
</div>
</div>