Skip to content

Commit d918f8d

Browse files
annvelentsannvelents
committed
Update some styles
1 parent dd4fd5f commit d918f8d

6 files changed

+61
-37
lines changed

Diff for: ‎buttons-button-base-elem-types.html

+10-8
Original file line numberDiff line numberDiff line change
@@ -58,19 +58,21 @@
5858
.btn { margin: 5px 10px;}
5959
</style>
6060

61-
<a class="btn btn-primary btn-lg">Link</a>
62-
<button class="btn btn-primary btn-lg ">Button</button>
63-
<div class="btn btn-primary btn-lg ">Div</div>
64-
<input type="submit" class="btn btn-primary btn-lg"></input>
61+
<a class="btn btn-primary btn-md">Link</a>
62+
<button class="btn btn-primary btn-md ">Button</button>
63+
<div class="btn btn-primary btn-md ">Div</div>
64+
<input type="submit" class="btn btn-primary btn-md"></input>
65+
<br>
6566
<script type="text/x-stylemark" data-language="html"><link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
6667
<style>
6768
.btn { margin: 5px 10px;}
6869
</style>
6970

70-
<a class="btn btn-primary btn-lg">Link</a>
71-
<button class="btn btn-primary btn-lg ">Button</button>
72-
<div class="btn btn-primary btn-lg ">Div</div>
73-
<input type="submit" class="btn btn-primary btn-lg"></input></script>
71+
<a class="btn btn-primary btn-md">Link</a>
72+
<button class="btn btn-primary btn-md ">Button</button>
73+
<div class="btn btn-primary btn-md ">Div</div>
74+
<input type="submit" class="btn btn-primary btn-md"></input>
75+
<br></script>
7476

7577
<!--
7678
Vanilla JS

Diff for: ‎buttons-button-color-types.html

+2
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
<button class="btn btn-info">Info</button>
6565
<button class="btn btn-warning">Warning</button>
6666
<button class="btn btn-danger">Danger</button>
67+
<br>
6768

6869
<script type="text/x-stylemark" data-language="html"><link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
6970
<style>
@@ -76,6 +77,7 @@
7677
<button class="btn btn-info">Info</button>
7778
<button class="btn btn-warning">Warning</button>
7879
<button class="btn btn-danger">Danger</button>
80+
<br>
7981
</script>
8082

8183
<!--

Diff for: ‎buttons-button-sizes-types.html

+10-2
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@
5454
</head>
5555

5656
<body> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
57+
<style>
58+
button { margin: 5px 10px;}
59+
</style>
5760

5861
<div class='row'>
5962
<div class='col-md-12'>
@@ -73,8 +76,12 @@
7376
<button class="btn-secondary btn-xs">Extra Small</button>
7477
</div>
7578
</div>
76-
79+
<br>
80+
<br>
7781
<script type="text/x-stylemark" data-language="html"><link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
82+
<style>
83+
button { margin: 5px 10px;}
84+
</style>
7885

7986
<div class='row'>
8087
<div class='col-md-12'>
@@ -94,7 +101,8 @@
94101
<button class="btn-secondary btn-xs">Extra Small</button>
95102
</div>
96103
</div>
97-
</script>
104+
<br>
105+
<br></script>
98106

99107
<!--
100108
Vanilla JS

Diff for: ‎dist/assets/admin.js

+11-11
Large diffs are not rendered by default.

Diff for: ‎dist/assets/admin.map

+1-1
Large diffs are not rendered by default.

Diff for: ‎index.html

+27-15
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ <h1 class="display-4 theme-content-element-title">Buttons</h1>
4343
<span class="theme-content-element-source-path">stylemark/stylemark_markdown_buttons.md</span>
4444
</span>
4545
<div class="theme-content-element-description"><p>Buttons are used to make actions. It should be noticeable and easy to perform with one click or tap. Users can use it to navigate, or take action.</p>
46-
<div id="button-options" class="i-pad-top-5 i-section"><h1 class="i-pad-top-3 i-position-container"><a href="#button-options" class="icon-link i-section__link -heading"></a>Button options</h1></div><p>* <strong>Primary button:</strong> Used as a main action on the interface. Provides extra visual weight and identifies the primary action in a set of buttons.
47-
* <strong>Secondary button:</strong> Used as when there are more than one action and as a secondary action on the interface or when the action are not main focus.
48-
* <strong>Info button:</strong> Contextual button for informational messages and drive users to learn more.
49-
* <strong>Warning button:</strong> Use to indicates caution should be taken with this action. The action may not be undo.
50-
* <strong>Danger button:</strong> Use to indicates a dangerous or potentially negative action. The action may not be undo.</p>
46+
<div id="button-options" class="i-pad-top-5 i-section"><h1 class="i-pad-top-3 i-position-container"><a href="#button-options" class="icon-link i-section__link -heading"></a>Button options</h1></div><p>* <strong>Primary button:</strong> Used as a main action on the interface. Provides extra visual weight and identifies the primary action in a set of buttons.</p>
47+
<p>* <strong>Secondary button:</strong> Used as when there are more than one action and as a secondary action on the interface or when the action are not main focus.</p>
48+
<p>* <strong>Info button:</strong> Contextual button for informational messages and drive users to learn more.</p>
49+
<p>* <strong>Warning button:</strong> Use to indicates caution should be taken with this action. The action may not be undo.</p>
50+
<p>* <strong>Danger button:</strong> Use to indicates a dangerous or potentially negative action. The action may not be undo.</p>
5151
<div class="i-example">
5252
<h5 class="i-example__heading">
5353
<a
@@ -89,6 +89,7 @@ <h5 class="i-example__heading">
8989
&lt;button class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
9090
&lt;button class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
9191
&lt;button class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
92+
&lt;br&gt;
9293
">Copy</button>
9394
<pre class="mb-0"><code class="lang-">&lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400&quot; rel=&quot;stylesheet&quot;&gt;
9495
&lt;style&gt;
@@ -101,6 +102,7 @@ <h5 class="i-example__heading">
101102
&lt;button class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
102103
&lt;button class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
103104
&lt;button class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
105+
&lt;br&gt;
104106
</code></pre>
105107
</div>
106108
</div><div id="button-tags" class="i-pad-top-5 i-section"><h1 class="i-pad-top-3 i-position-container"><a href="#button-tags" class="icon-link i-section__link -heading"></a>Button tags</h1></div><p>Buttons can be used with <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, <code>&lt;div&gt;</code> and <code>&lt;input&gt;</code> elements.</p>
@@ -139,19 +141,21 @@ <h5 class="i-example__heading">
139141
.btn { margin: 5px 10px;}
140142
&lt;/style&gt;
141143
142-
&lt;a class=&quot;btn btn-primary btn-lg&quot;&gt;Link&lt;/a&gt;
143-
&lt;button class=&quot;btn btn-primary btn-lg &quot;&gt;Button&lt;/button&gt;
144-
&lt;div class=&quot;btn btn-primary btn-lg &quot;&gt;Div&lt;/div&gt;
145-
&lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;Input&lt;/input&gt;">Copy</button>
144+
&lt;a class=&quot;btn btn-primary btn-md&quot;&gt;Link&lt;/a&gt;
145+
&lt;button class=&quot;btn btn-primary btn-md &quot;&gt;Button&lt;/button&gt;
146+
&lt;div class=&quot;btn btn-primary btn-md &quot;&gt;Div&lt;/div&gt;
147+
&lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-md&quot;&gt;&lt;/input&gt;
148+
&lt;br&gt;">Copy</button>
146149
<pre class="mb-0"><code class="lang-">&lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400&quot; rel=&quot;stylesheet&quot;&gt;
147150
&lt;style&gt;
148151
.btn { margin: 5px 10px;}
149152
&lt;/style&gt;
150153

151-
&lt;a class=&quot;btn btn-primary btn-lg&quot;&gt;Link&lt;/a&gt;
152-
&lt;button class=&quot;btn btn-primary btn-lg &quot;&gt;Button&lt;/button&gt;
153-
&lt;div class=&quot;btn btn-primary btn-lg &quot;&gt;Div&lt;/div&gt;
154-
&lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;Input&lt;/input&gt;</code></pre>
154+
&lt;a class=&quot;btn btn-primary btn-md&quot;&gt;Link&lt;/a&gt;
155+
&lt;button class=&quot;btn btn-primary btn-md &quot;&gt;Button&lt;/button&gt;
156+
&lt;div class=&quot;btn btn-primary btn-md &quot;&gt;Div&lt;/div&gt;
157+
&lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-md&quot;&gt;&lt;/input&gt;
158+
&lt;br&gt;</code></pre>
155159
</div>
156160
</div><div id="size" class="i-pad-top-5 i-section"><h1 class="i-pad-top-3 i-position-container"><a href="#size" class="icon-link i-section__link -heading"></a>Size</h1></div><p>There are 4 sizes of buttons for appropreate use cases.
157161
Notice that first goes color, then size</p>
@@ -186,6 +190,9 @@ <h5 class="i-example__heading">
186190
<button type="button" class="i-code-block__lang -collapsible"><i class="fa fa-caret-right fa-fw"></i> html</button>
187191
<div class="i-code-block__content hidden">
188192
<button type="button" class="btn btn-outline-primary btn-sm i-copy-button" data-clipboard-text="&lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400&quot; rel=&quot;stylesheet&quot;&gt;
193+
&lt;style&gt;
194+
button { margin: 5px 10px;}
195+
&lt;/style&gt;
189196
190197
&lt;div class=&#39;row&#39;&gt;
191198
&lt;div class=&#39;col-md-12&#39;&gt;
@@ -205,8 +212,12 @@ <h5 class="i-example__heading">
205212
&lt;button class=&quot;btn-secondary btn-xs&quot;&gt;Extra Small&lt;/button&gt;
206213
&lt;/div&gt;
207214
&lt;/div&gt;
208-
">Copy</button>
215+
&lt;br&gt;
216+
&lt;br&gt;">Copy</button>
209217
<pre class="mb-0"><code class="lang-">&lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400&quot; rel=&quot;stylesheet&quot;&gt;
218+
&lt;style&gt;
219+
button { margin: 5px 10px;}
220+
&lt;/style&gt;
210221

211222
&lt;div class=&#39;row&#39;&gt;
212223
&lt;div class=&#39;col-md-12&#39;&gt;
@@ -226,7 +237,8 @@ <h5 class="i-example__heading">
226237
&lt;button class=&quot;btn-secondary btn-xs&quot;&gt;Extra Small&lt;/button&gt;
227238
&lt;/div&gt;
228239
&lt;/div&gt;
229-
</code></pre>
240+
&lt;br&gt;
241+
&lt;br&gt;</code></pre>
230242
</div>
231243
</div></div>
232244
</div>

0 commit comments

Comments
 (0)