Skip to content

Commit

Permalink
Adjust css a bit for new arrow functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@okcoker
okcoker committed Jan 8, 2020
1 parent 8082a43 commit 7c5b9f8
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 21 deletions.
30 changes: 19 additions & 11 deletions example/css/taggle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,9 @@ p a:hover {
}

.taggle_list {
float: left;
display: inline-block;
vertical-align: middle;
line-height: 2.5;
width: 100%;
}

Expand All @@ -152,15 +154,16 @@ p a:hover {
}

.taggle_list li {
float: left;
display: inline-block;
display: inline;
vertical-align: baseline;
white-space: nowrap;
font-weight: 500;
margin-bottom: 5px;
}

.taggle_list .taggle {
margin-right: 8px;
margin-bottom: 8px;
background: #E2E1DF;
padding: 5px 10px;
border-radius: 3px;
Expand All @@ -183,11 +186,13 @@ p a:hover {
text-decoration: none;
padding-left: 2px;
padding-top: 3px;
line-height: 0.5;
line-height: 1;
color: #ccc;
color: rgba(0, 0, 0, 0.2);
padding-bottom: 4px;
display: none;
display: inline-block;
opacity: 0;
pointer-events: none;
border: 0;
background: none;
cursor: pointer;
Expand All @@ -201,7 +206,9 @@ p a:hover {
}

.taggle_list .taggle:hover > .close {
display: block;
display: inline-block;
opacity: 1;
pointer-events: auto;
}

.taggle_list .taggle .close:hover {
Expand All @@ -220,10 +227,8 @@ p a:hover {
.taggle_input {
padding: 8px;
padding-left: 0;
float: left;
margin-top: -5px;
background: none;
width: 100%;
max-width: 100%;
}

Expand Down Expand Up @@ -413,6 +418,8 @@ textarea.input {
.custom.textarea .taggle .close {
display: inline-block;
right: 3px;
opacity: 1;
pointer-events: auto;
}

.custom.delicious {
Expand Down Expand Up @@ -443,7 +450,7 @@ textarea.input {
font-size: 0.9rem;
height: 0.7rem;
width: 0.7rem;
line-height: .1rem;
line-height: 0;
margin-top: 3px;
right: auto;
left: 5px;
Expand Down Expand Up @@ -475,8 +482,9 @@ textarea.input {
font-size: 0.9rem;
height: 0.7rem;
width: 0.7rem;
line-height: .1rem;
margin-top: 3px;
line-height: 0;
padding: 0;
top: 7px;
}

.custom.stackoverflow .taggle .close:hover {
Expand Down
20 changes: 10 additions & 10 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h1>Taggle.js</h1>
<section>
<article class="block">
<h5>Example 1 - Creating a basic Taggle</h5>
<div class="input textarea clearfix example1"></div>
<div class="input textarea example1"></div>
<p>
This example is as simple as it gets. Duplicate tags are prevented by default. Use your left and right arrows to navigate between tags. You can also delete tags by pressing backspace or hovering and clicking with your mouse.
</p>
Expand All @@ -44,7 +44,7 @@ <h6>JavaScript:</h6>
</pre>
</article></section><section><article class="block">
<h5>Example 2 - Prefilled tags</h5>
<div class="input textarea clearfix example2"></div>
<div class="input textarea example2"></div>
<p>It's easy to prepopulate the text field as well. Just pass an array of tags as displayed below.</p>
</article>
<article class="block">
Expand All @@ -60,7 +60,7 @@ <h6>JavaScript:</h6>
</pre>
</article></section><section><article class="block">
<h5>Example 3 - Duplicate tag alert</h5>
<div class="input textarea clearfix example3"></div>
<div class="input textarea example3"></div>
<p>This example takes advantage of how much CSS control Taggle.js allows you to have. Specify your own duplicate CSS class by using the <code>duplicateTagClass</code> option. Try entering one of the already existing tags to see a subtle alert notifying you of the tag.</p>
<blockquote>Note: the bounce animation happens as a result of the css class being added. Not javascript. Therefore you will not see the animation in IE9 and below.</blockquote>
</article>
Expand All @@ -79,7 +79,7 @@ <h6>JavaScript:</h6>
</article></section><section><article class="block">
<h4>Example 4 - Autocomplete</h4>
<p>Taggle.js just provides the basic functionality to add tags to a field but it also provides a basic API so you can wrap it for additional functionality with other libraries such as <a href="http://jqueryui.com/autocomplete/" target="_blank">jQueryUI Autocomplete</a>. Same HTML. Just a little bit more javascript code.</p>
<div class="input textarea clearfix example4"></div>
<div class="input textarea example4"></div>
<h6>HTML:</h6>
<pre data-language="html">
<div id="example4"></div>
Expand Down Expand Up @@ -110,7 +110,7 @@ <h6>JavaScript:</h6>
<h4>Example 5 - onBeforeTagAdd/onTagAdd &amp; onBeforeTagRemove/onTagRemove</h4>
<p>Want to hook into before a tag is added or removed? Okay. Want to call a callback function after a tag has been added or removed? Fine.</p>
<blockquote> I'm using innerHTML for simplicity however you should look into <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent?redirectlocale=en-US&redirectslug=DOM%2FNode.textContent" rel="nofollow">innerText or textContent</a> depending on what browser you're supporting.</blockquote>
<div class="input textarea clearfix example5"></div>
<div class="input textarea example5"></div>
<p class="example5-event" style="color: #990000"></p>
<h6>HTML:</h6>
<pre data-language="html">
Expand Down Expand Up @@ -144,7 +144,7 @@ <h6>JavaScript:</h6>
<article class="block">
<h4>Example 6 - add / remove</h4>
<p>You can programatically add and remove tags as well.</p>
<div class="input textarea clearfix example6"></div>
<div class="input textarea example6"></div>
<h6>HTML:</h6>
<pre data-language="html">
<div id="example6"></div>
Expand All @@ -167,7 +167,7 @@ <h6>JavaScript:</h6>
<article class="block">
<h4>Example 7a - Allowed tags</h4>
<p>Sometimes you'll want to restrict the users to adding only certain tags.</p>
<div class="input textarea clearfix example7a"></div>
<div class="input textarea example7a"></div>
<h6>HTML:</h6>
<pre data-language="html">
<div id="example7a"></div>
Expand All @@ -184,7 +184,7 @@ <h6>JavaScript:</h6>
<article class="block">
<h4>Example 7b - Disallowed tags</h4>
<p>Conversely, you'll want to restrict the users from adding certain tags.</p>
<div class="input textarea clearfix example7b"></div>
<div class="input textarea example7b"></div>
<h6>HTML:</h6>
<pre data-language="html">
<div id="example7b"></div>
Expand All @@ -210,10 +210,10 @@ <h4>Misc - Tags around the web</h4>
As you can see below, it's easy to style Taggle.js with just a little bit of css.
</p>
<h6>Delicious</h6>
<div class="input textarea clearfix custom delicious">
<div class="input textarea custom delicious">
</div>
<h6>Stack Overflow</h6>
<div class="input textarea clearfix custom stackoverflow">
<div class="input textarea custom stackoverflow">
</div>
</article>
</section>
Expand Down

0 comments on commit 7c5b9f8

Please sign in to comment.