Fixed compatibility with Bootstrap.

This commit is contained in:
Stefan Bohacek 2024-05-17 09:02:50 -04:00
parent 3d20bc4228
commit 1053aa68db
No known key found for this signature in database
GPG key ID: FC75CD588A42BC10
4 changed files with 9 additions and 9 deletions

View file

@ -27,15 +27,15 @@ Note that if you need to change the path at which the `fediverse-share-button` f
```html ```html
<form class="fsb-prompt"> <form class="fsb-prompt">
<label>Share with the fediverse</label> <label>Share with the fediverse</label>
<div class="input-group mb-3"> <div class="fsb-input-group mb-3">
<span class="input-group-text">https://</span> <span class="fsb-input-group-text">https://</span>
<input required <input required
type="text" type="text"
name="fediverse-domain" name="fediverse-domain"
placeholder="mastodon.social" placeholder="mastodon.social"
class="fsb-domain form-control" class="fsb-input fsb-domain form-control"
aria-label="Amount (to the nearest dollar)"> aria-label="Amount (to the nearest dollar)">
<button class="fsb-btn btn btn-outline-secondary" <button class="fsb-button"
type="submit" type="submit"
id="button-addon2"><img src="./fediverse-share-button/icons/mastodon.svg" id="button-addon2"><img src="./fediverse-share-button/icons/mastodon.svg"
class="fsb-icon"></span>Share</button> class="fsb-icon"></span>Share</button>

View file

@ -51,7 +51,7 @@
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
input { .fsb-input {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
font-family: inherit; font-family: inherit;
@ -77,7 +77,7 @@ input {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
button { .fsb-button {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
display: inline-block; display: inline-block;

View file

@ -1 +1 @@
.fsb-prompt{max-width:500px;margin-top:52px}.fsb-prompt label{display:block;margin-bottom:12px}.fsb-icon{max-width:14px;margin-right:10px;vertical-align:text-top}.fsb-support-note{font-size:small}.fsb-d-none{display:none!important}.fsb-input-group{box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%;margin-bottom:1rem!important}.fsb-input-group-text{box-sizing:border-box;display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;text-align:center;white-space:nowrap;background-color:var(--bs-tertiary-bg);border:1px solid silver;border-radius:8px;border-top-right-radius:0;border-bottom-right-radius:0}input{box-sizing:border-box;margin:0;font-family:inherit;scroll-margin-top:80px;scroll-margin-bottom:100px;display:block;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;appearance:none;background-clip:padding-box;border:1px solid silver;border-left:none;position:relative;flex:1 1 auto;width:1%;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0;margin-left:calc(var(--bs-border-width) * -1);border-top-left-radius:0;border-bottom-left-radius:0}button{box-sizing:border-box;margin:0;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;vertical-align:middle;border:1px solid silver;border-radius:8px;background-color:var(--bs-btn-bg);cursor:pointer;position:relative;z-index:2;margin-left:-1;border-top-left-radius:0;border-bottom-left-radius:0} .fsb-prompt{max-width:500px;margin-top:52px}.fsb-prompt label{display:block;margin-bottom:12px}.fsb-icon{max-width:14px;margin-right:10px;vertical-align:text-top}.fsb-support-note{font-size:small}.fsb-d-none{display:none!important}.fsb-input-group{box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%;margin-bottom:1rem!important}.fsb-input-group-text{box-sizing:border-box;display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;text-align:center;white-space:nowrap;background-color:var(--bs-tertiary-bg);border:1px solid silver;border-radius:8px;border-top-right-radius:0;border-bottom-right-radius:0}.fsb-input{box-sizing:border-box;margin:0;font-family:inherit;scroll-margin-top:80px;scroll-margin-bottom:100px;display:block;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;appearance:none;background-clip:padding-box;border:1px solid silver;border-left:none;position:relative;flex:1 1 auto;width:1%;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0;margin-left:calc(var(--bs-border-width) * -1);border-top-left-radius:0;border-bottom-left-radius:0}.fsb-button{box-sizing:border-box;margin:0;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;vertical-align:middle;border:1px solid silver;border-radius:8px;background-color:var(--bs-btn-bg);cursor:pointer;position:relative;z-index:2;margin-left:-1;border-top-left-radius:0;border-bottom-left-radius:0}

View file

@ -78,9 +78,9 @@
type="text" type="text"
name="fediverse-domain" name="fediverse-domain"
placeholder="mastodon.social" placeholder="mastodon.social"
class="fsb-domain form-control" class="fsb-input fsb-domain form-control"
aria-label="Amount (to the nearest dollar)"> aria-label="Amount (to the nearest dollar)">
<button class="fsb-btn btn btn-outline-secondary" <button class="fsb-button"
type="submit" type="submit"
id="button-addon2"><img src="./fediverse-share-button/icons/mastodon.svg" id="button-addon2"><img src="./fediverse-share-button/icons/mastodon.svg"
class="fsb-icon"></span>Share</button> class="fsb-icon"></span>Share</button>