mirror of https://github.com/kremalicious/blog.git
restore global button styles
This commit is contained in:
parent
01e2821132
commit
0899d00ed9
GPG Key ID:
606EEEF3C479A91F
|
|
@ -29,7 +29,7 @@ These icons are free for your personal use and include icons for all file types
|
|||
Get them and have fun.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/aperturefiletypes_by_kremalicious.zip">Download</a>
|
||||
<a class="icon-download btn btn-primary" href="../media/aperturefiletypes_by_kremalicious.zip">Download</a>
|
||||
</p>
|
||||
|
||||
And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](/changing-the-image-icons-in-mac-os-x-leopard/).
|
||||
|
|
|
|||
|
|
@ -19,5 +19,5 @@ I have added my first wallpaper to the Goodies section on this website. It's a s
|
|||
You can get the wallpaper by browsing [my Goodies section](http://www.kremalicious.com/goodies/) and clicking on the download link for the wallpaper. The download package also includes a custom folder icon (512px as .icns, .png, .ico) with the Chives wallpaper on it.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
|
||||
<a class="icon-download btn btn-primary" href="../media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ Brief description of Daguerres role in the invention of photography process by T
|
|||
This icon package was exclusively announced first on [MacThemes](http://macthemes2.net) and you can download it from the [Goodies section on this website](/goodies/) or directly via this link:
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn icon-download" href="../media/niepces_camera_obscura_by_kremalicious.zip">Download</a>
|
||||
<a class="btn btn-primary icon-download" href="../media/niepces_camera_obscura_by_kremalicious.zip">Download</a>
|
||||
</p>
|
||||
|
||||
In addition to these icons you can download the [associated wallpapers for your desktop or your iPhone](http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-wallpaper-pack/).
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ In addition to my Niépce's Camera Obscura icons for Aperture and iPhoto I have
|
|||
All Wallpapers are using a custom designed background which imitates the look of a metal plate like it was used in Niépce's experiments although it wasn't golden. To make it more Mac style I have added a stenciled dots pattern (which is a commonly used reference to the front design of the MacPro).
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip">Download Niépce's Camera Obscura Wallpaper</a>
|
||||
<a class="icon-download btn btn-primary" href="../media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip">Download Niépce's Camera Obscura Wallpaper</a>
|
||||
</p>
|
||||
|
||||
Here are the details:
|
||||
|
|
|
|||
|
|
@ -376,7 +376,7 @@ Here you can see the icons included in the Server Displays icon pack:
|
|||
Because I've just modified Apple's standard icons these icons are just available via this blog post and they will not show up in my Goodies section. Just download the whole package directly via this link:
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/server_displays_by_kremalicious.zip">Download Server Display Icons <span>zip</span></a>
|
||||
<a class="icon-download btn btn-primary" href="../media/server_displays_by_kremalicious.zip">Download Server Display Icons <span>zip</span></a>
|
||||
</p>
|
||||
|
||||
### How to use the icons
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ As always these desktop icons are free for you personal and non-commercial use.
|
|||
The whole package includes 7 icons either packed in a nice tagged iContainer for use with Candybar or in Mac + Win + Linux compatible formats. If you have such an Icy Box case grab the icons. Have fun!
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/icybox_by_kremalicious.zip">Download Icy Box Icons <span>zip</span></a>
|
||||
<a class="icon-download btn btn-primary" href="../media/icybox_by_kremalicious.zip">Download Icy Box Icons <span>zip</span></a>
|
||||
</p>
|
||||
|
||||
- Replacement icons for the silver and black Icy Box external aluminium case with USB interface
|
||||
|
|
|
|||
|
|
@ -18,6 +18,6 @@ Show your geeky love for extraterrestrial universities! This is a simple Futuram
|
|||
|
||||
As usual you can [grab the whole zip package from my Goodies page](http://www.kremalicious.com/goodies/#wall) and have fun.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/mars-u-wall-by-kremalicious.zip">Download Futurama Mars U Wallpaper <span>zip</span></a>
|
||||
<p class="content-download ">
|
||||
<a class="icon-download btn btn-primary" href="../media/mars-u-wall-by-kremalicious.zip">Download Futurama Mars U Wallpaper <span>zip</span></a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -22,5 +22,5 @@ I’ve just released my own coffee cup icon, enjoy:
|
|||
## Download
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/coffee_cup_by_kremalicious.zip">Download Coffee Cup Icons</a>
|
||||
<a class="icon-download btn btn-primary" href="../media/coffee_cup_by_kremalicious.zip">Download Coffee Cup Icons</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -29,5 +29,5 @@ Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest F
|
|||
Seriously, the pink versions are burning my eyes but the pink is a good reference to the events in the recent movie.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/out-of-whale-oil-wall-by-kremalicious.zip">Download</a>
|
||||
<a class="icon-download btn btn-primary" href="../media/out-of-whale-oil-wall-by-kremalicious.zip">Download</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Here's a quick twitter icon for use on your websites which is kind of a by-produ
|
|||
This icon comes in various formats (PNG, ICNS, iContainer) and in 4 different sizes (128px, 48px, 32px, 16px) with each icon size redrawn (of course). Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these icons while they're hot.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/twitter-crisp-by-kremalicious.zip">Download</a>
|
||||
<a class="icon-download btn btn-primary" href="../media/twitter-crisp-by-kremalicious.zip">Download</a>
|
||||
</p>
|
||||
|
||||
Use them on any web project you like and/or [convert them into a send to twitter link](http://kremalicious.com/ultimate-coda-wordpress-share-link-bonanza/). Have fun!
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16
|
|||
Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab this icon while it's hot.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/adiumeetie-by-kremalicious.zip">Download</a>
|
||||
<a class="icon-download btn btn-primary" href="../media/adiumeetie-by-kremalicious.zip">Download</a>
|
||||
</p>
|
||||
|
||||
## Adium Icon Usage
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ tags:
|
|||
Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these replacement icons.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/delibar-by-kremalicious.zip">Download</a>
|
||||
<a class="icon-download btn btn-primary" href="../media/delibar-by-kremalicious.zip">Download</a>
|
||||
</p>
|
||||
|
||||
## Icon Usage
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ The homescreen icons pixels in the 16px version needed all more vivid colors to
|
|||
The icons come in various formats: iContainer, ICNS, ICO and PNG files for each size. Just click the following download button to grab the whole pack:
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/ipixelpad_by_kremalicious.zip">Download</a>
|
||||
<a class="icon-download btn btn-primary" href="../media/ipixelpad_by_kremalicious.zip">Download</a>
|
||||
</p>
|
||||
|
||||
## License
|
||||
|
|
|
|||
|
|
@ -23,6 +23,6 @@ The wallpaper comes in four versions with two color variations and two text vari
|
|||
You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn-primary icon-download" href="../media/momcorp_wall_by_kremalicious.zip">Download</a>
|
||||
<a class="btn btn-primary icon-download" href="../media/momcorp_wall_by_kremalicious.zip">Download</a>
|
||||
<a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ The plugin is localized in english, german & spanish (thanks to Andrew Kurtis fr
|
|||
You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
|
||||
|
||||
<p class="content-download">
|
||||
<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress">Plugin Page</a> <a class="btn-primary icon-github" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
|
||||
<a href="http://wordpress.org/extend/plugins/badged" class="btn btn-primary icon-wordpress">Plugin Page</a> <a class="btn btn-primary icon-github" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
|
||||
</p>
|
||||
|
||||
The plugin is hosted on GitHub and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ So if you value quality and want pixel perfect icons in your admin area you need
|
|||
I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
|
||||
|
||||
<p class="content-download">
|
||||
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
|
||||
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon-download">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github btn btn-primary">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
|
||||
</p>
|
||||
|
||||
### Usage
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ The above picture might be blurry depending on the device you're using so here's
|
|||
They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn-primary icon-compass" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
|
||||
<a class="icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
|
||||
<a class="btn btn-primary icon-compass" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
|
||||
<a class="icon-github btn" href="https://github.com/kremalicious/kbdfun/">Github</a>
|
||||
</p>
|
||||
|
||||
## Usage
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple
|
|||
Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-download" href="../media/project-purple-kremalicious.zip">Download <span> zip</span></a>
|
||||
<a class="icon-download btn btn-primary" href="../media/project-purple-kremalicious.zip">Download <span> zip</span></a>
|
||||
</p>
|
||||
|
||||
- [Desktop/rMBP/iPad 3 (3200x2048)](../media/project-purple-kremalicious.png)
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ tags:
|
|||
The badges provided by all app store providers just don't play well together with their varying typography and different sizing. So let's make them all visually unified, infinitely scalable, with pure text for easier localization and some web interaction styles. And while we’re at it: different sizes with the same markup by using some modifier classes.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="btn-primary icon-compass" href="https://lab.kremalicious.com/appstorebadges/">Demo</a>
|
||||
<a class="icon-github" href="https://github.com/kremalicious/appstorebadges/">GitHub</a>
|
||||
<a class="icon-code" href="http://codepen.io/kremalicious/details/EVVraP/">Codepen</a>
|
||||
<a class="btn btn-primary icon-compass" href="https://lab.kremalicious.com/appstorebadges/">Demo</a>
|
||||
<a class="icon-github btn" href="https://github.com/kremalicious/appstorebadges/">GitHub</a>
|
||||
<a class="icon-code btn" href="http://codepen.io/kremalicious/details/EVVraP/">Codepen</a>
|
||||
</p>
|
||||
|
||||
## Styling
|
||||
|
|
|
|||
|
|
@ -41,5 +41,5 @@ hpm install hyper-mac-pro
|
|||
Head over to GitHub to take a peek into the code or report some issues.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-github btn-primary" href="https://github.com/kremalicious/hyper-mac-pro">GitHub</a>
|
||||
<a class="icon-github btn btn-primary" href="https://github.com/kremalicious/hyper-mac-pro">GitHub</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -59,5 +59,5 @@ plugins: [
|
|||
Head over to GitHub for more documentation, take a peek into the code, or to report some bugs.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-github btn-primary" href="https://github.com/kremalicious/gatsby-plugin-matomo">GitHub</a>
|
||||
<a class="icon-github btn btn-primary" href="https://github.com/kremalicious/gatsby-plugin-matomo">GitHub</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -110,5 +110,5 @@ plugins: [
|
|||
Head over to GitHub for more documentation, take a peek into the code, or to report some bugs.
|
||||
|
||||
<p class="content-download">
|
||||
<a class="icon-github btn-primary" href="https://github.com/kremalicious/gatsby-redirect-from">GitHub</a>
|
||||
<a class="icon-github btn btn-primary" href="https://github.com/kremalicious/gatsby-redirect-from">GitHub</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,170 @@
|
|||
.btn,
|
||||
a.btn {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 0;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
padding: var(--padding-base-vertical) var(--padding-base-horizontal);
|
||||
font-size: var(--font-size-small);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid var(--border-color);
|
||||
font-family: var(--font-family-headings);
|
||||
font-weight: var(--font-weight-headings);
|
||||
color: var(--text-color);
|
||||
text-transform: uppercase;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* // Disabled State */
|
||||
.btn.disabled,
|
||||
.btn[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn span {
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--text-color-light);
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
|
||||
@media (min-width: 30rem) {
|
||||
.btn,
|
||||
a.btn {
|
||||
max-width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
button.link {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
button.link:hover,
|
||||
button.link:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* // Primary Button */
|
||||
.btn-primary,
|
||||
a.btn-primary {
|
||||
/* dark variant of `--body-background-color` */
|
||||
color: #161a1b;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
background: var(--link-color);
|
||||
border-color: var(--link-color);
|
||||
}
|
||||
|
||||
.btn-primary:hover,
|
||||
.btn-primary:focus {
|
||||
background: var(--link-color-hover);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
background: var(--link-color);
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn[class*='icon-']::before {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
margin-right: 0.3rem;
|
||||
margin-bottom: -0.2rem;
|
||||
opacity: 0.75;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.dark .btn[class*='icon-']::before {
|
||||
filter: invert(0.75);
|
||||
}
|
||||
.dark .btn.btn-primary[class*='icon-']::before {
|
||||
filter: invert(0);
|
||||
}
|
||||
|
||||
/* // some helper classes for old content
|
||||
///////////////////////////////////// */
|
||||
|
||||
.content-download {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: calc(var(--spacer) * 2);
|
||||
margin-bottom: calc(var(--spacer) * 2);
|
||||
}
|
||||
|
||||
@media (min-width: 30rem) {
|
||||
.content-download {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.content-download .btn {
|
||||
margin-bottom: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.content-download .btn:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.content-download .btn:only-child {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.content-download .btn span {
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--brand-grey);
|
||||
}
|
||||
|
||||
@media (min-width: 30rem) {
|
||||
.content-download .btn {
|
||||
flex: 1;
|
||||
margin-left: calc(var(--spacer) / 2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-download::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/arrow-down-circle.svg');
|
||||
}
|
||||
|
||||
.icon-heart::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/heart.svg');
|
||||
}
|
||||
|
||||
.icon-github::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/github.svg');
|
||||
}
|
||||
|
||||
.icon-compass::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/compass.svg');
|
||||
}
|
||||
|
||||
.icon-code::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/code.svg');
|
||||
}
|
||||
|
|
@ -1,241 +0,0 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
.btn,
|
||||
a.btn {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-image: none; // Reset unusual Firefox-on-Android default style
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
|
||||
// Default Button
|
||||
@include button-size(
|
||||
$padding-base-vertical,
|
||||
$padding-base-horizontal,
|
||||
$font-size-small,
|
||||
$line-height,
|
||||
$border-radius
|
||||
);
|
||||
|
||||
background-color: rgba(#fff, 0.1);
|
||||
border: 1px solid rgba($brand-grey-light, 0.3);
|
||||
border-bottom-color: rgba($brand-grey-light, 0.4);
|
||||
font-family: $font-family-headings;
|
||||
font-weight: $font-weight-headings;
|
||||
color: $brand-grey;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 1px 3px rgba($brand-grey-light, 0.15),
|
||||
inset 0 1px 0 rgba(#fff, 0.7);
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background-color: rgba(#fff, 0.5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $brand-grey;
|
||||
border-color: rgba($brand-grey-light, 0.3);
|
||||
background-color: transparent;
|
||||
box-shadow: 0 1px 0 #fff;
|
||||
transition: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
:global(.dark) &:not(.btn-primary) {
|
||||
color: $brand-grey-light;
|
||||
background-color: darken($body-background-color--dark, 3%);
|
||||
border: 1px solid darken($body-background-color--dark, 10%);
|
||||
box-shadow: 0 1px 3px rgba(darken($body-background-color--dark, 10%), 0.5),
|
||||
inset 0 1px 0 rgba(#fff, 0.1);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($body-background-color--dark, 1%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($body-background-color--dark, 5%);
|
||||
box-shadow: 0 1px 0 rgba(#fff, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled State
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $font-size-mini;
|
||||
color: $text-color-light;
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
button.link {
|
||||
color: $link-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
color: lighten($link-color, 10%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition: none;
|
||||
color: darken($link-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Primary Button
|
||||
.btn-primary,
|
||||
a.btn-primary {
|
||||
@extend .btn;
|
||||
|
||||
color: darken($link-color, 50%);
|
||||
text-shadow: 0 1px 0 rgba(#fff, 0.3);
|
||||
background: lighten($link-color, 15%);
|
||||
border-color: $link-color;
|
||||
box-shadow: 0 1px 3px rgba($brand-grey-light, 0.4),
|
||||
inset 0 1px 0 rgba(#fff, 0.4);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: darken($link-color, 50%);
|
||||
background-color: lighten($link-color, 25%);
|
||||
text-shadow: 0 1px 0 rgba(#fff, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: darken($link-color, 50%);
|
||||
border-color: darken($link-color, 10%);
|
||||
background-color: lighten($link-color, 15%);
|
||||
}
|
||||
|
||||
.dark &,
|
||||
&:global(.dark) & {
|
||||
border-color: darken($body-background-color--dark, 10%);
|
||||
background: $link-color;
|
||||
box-shadow: 0 1px 3px darken($body-background-color--dark, 10%),
|
||||
inset 0 1px 0 rgba(#fff, 0.4);
|
||||
|
||||
// stylelint-disable no-descending-specificity
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten($link-color, 10%);
|
||||
text-shadow: 0 1px 0 rgba(#fff, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($link-color, 5%);
|
||||
box-shadow: 0 1px 0 rgba(#fff, 0.2);
|
||||
}
|
||||
// stylelint-enable no-descending-specificity
|
||||
}
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// some helper classes for old content
|
||||
/////////////////////////////////////
|
||||
|
||||
.content-download {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: $spacer * 2;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a {
|
||||
@extend .btn;
|
||||
|
||||
margin-bottom: $spacer / 2;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
flex: 1;
|
||||
margin-left: $spacer / 2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $font-size-mini;
|
||||
color: $text-color-light;
|
||||
}
|
||||
|
||||
&[class*='icon-'] {
|
||||
&::before {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
margin-right: 0.3rem;
|
||||
margin-bottom: -0.2rem;
|
||||
opacity: 0.75;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 100%;
|
||||
|
||||
.dark &,
|
||||
:global(.dark) & {
|
||||
filter: invert(0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='btn-primary'] {
|
||||
&::before {
|
||||
.dark &,
|
||||
:global(.dark) & {
|
||||
filter: invert(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-download::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/arrow-down-circle.svg');
|
||||
}
|
||||
|
||||
.icon-heart::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/heart.svg');
|
||||
}
|
||||
|
||||
.icon-github::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/github.svg');
|
||||
}
|
||||
|
||||
.icon-compass::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/compass.svg');
|
||||
}
|
||||
|
||||
.icon-code::before {
|
||||
background-image: url('../../node_modules/feather-icons/dist/icons/code.svg');
|
||||
}
|
||||
}
|
||||
|
|
@ -35,6 +35,7 @@
|
|||
--text-color-dimmed: var(--brand-grey-dimmed);
|
||||
--color-headings: var(--brand-main);
|
||||
--link-color: var(--brand-cyan);
|
||||
--link-color-hover: #4ab8a9;
|
||||
--border-color: var(--brand-grey-dimmed);
|
||||
|
||||
/* Base Typography
|
||||
|
|
|
|||
|
|
@ -338,11 +338,11 @@ td {
|
|||
/* More basic elements
|
||||
///////////////////////////////////// */
|
||||
|
||||
@import '_buttons';
|
||||
@import '_code.css';
|
||||
@import '_toast.css';
|
||||
|
||||
/* @import '_buttons';
|
||||
@import '_alerts'; */
|
||||
/* @import '_alerts'; */
|
||||
|
||||
.medium-zoom-overlay {
|
||||
background-color: var(--body-background-color) !important;
|
||||
|
|
|
|||
Loading…
Reference in New Issue