|
109 | 109 | </CCardHeader> |
110 | 110 | <CCardBody> |
111 | 111 | <p> |
112 | | - Use <code>variant="outline-*"</code> prop |
| 112 | + Use <code>outline</code> prop |
113 | 113 | </p> |
114 | 114 | <CRow class="c-align-items-center"> |
115 | 115 | <CCol col="12" xl class="c-mb-3 c-mb-xl-0"> |
116 | 116 | Normal |
117 | 117 | </CCol> |
118 | 118 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
119 | | - <CButton block variant="outline-primary">Primary</CButton> |
| 119 | + <CButton block outline variant="primary">Primary</CButton> |
120 | 120 | </CCol> |
121 | 121 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
122 | | - <CButton block variant="outline-secondary">Secondary</CButton> |
| 122 | + <CButton block outline variant="secondary">Secondary</CButton> |
123 | 123 | </CCol> |
124 | 124 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
125 | | - <CButton block variant="outline-success">Success</CButton> |
| 125 | + <CButton block outline variant="success">Success</CButton> |
126 | 126 | </CCol> |
127 | 127 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
128 | | - <CButton block variant="outline-warning">Warning</CButton> |
| 128 | + <CButton block outline variant="warning">Warning</CButton> |
129 | 129 | </CCol> |
130 | 130 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
131 | | - <CButton block variant="outline-danger">Danger</CButton> |
| 131 | + <CButton block outline variant="danger">Danger</CButton> |
132 | 132 | </CCol> |
133 | 133 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
134 | | - <CButton block variant="outline-info">Info</CButton> |
| 134 | + <CButton block outline variant="info">Info</CButton> |
135 | 135 | </CCol> |
136 | 136 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
137 | | - <CButton block variant="outline-light">Light</CButton> |
| 137 | + <CButton block outline variant="light">Light</CButton> |
138 | 138 | </CCol> |
139 | 139 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
140 | | - <CButton block variant="outline-dark">Dark</CButton> |
| 140 | + <CButton block outline variant="dark">Dark</CButton> |
141 | 141 | </CCol> |
142 | 142 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol> |
143 | 143 | </CRow> |
|
146 | 146 | Active State |
147 | 147 | </CCol> |
148 | 148 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
149 | | - <CButton block pressed variant="outline-primary" aria-pressed="true">Primary</CButton> |
| 149 | + <CButton block pressed outline variant="primary" aria-pressed="true">Primary</CButton> |
150 | 150 | </CCol> |
151 | 151 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
152 | | - <CButton block pressed variant="outline-secondary" aria-pressed="true">Secondary</CButton> |
| 152 | + <CButton block pressed outline variant="secondary" aria-pressed="true">Secondary</CButton> |
153 | 153 | </CCol> |
154 | 154 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
155 | | - <CButton block pressed variant="outline-success" aria-pressed="true">Success</CButton> |
| 155 | + <CButton block pressed outline variant="success" aria-pressed="true">Success</CButton> |
156 | 156 | </CCol> |
157 | 157 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
158 | | - <CButton block pressed variant="outline-warning" aria-pressed="true">Warning</CButton> |
| 158 | + <CButton block pressed outline variant="warning" aria-pressed="true">Warning</CButton> |
159 | 159 | </CCol> |
160 | 160 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
161 | | - <CButton block pressed variant="outline-danger" aria-pressed="true">Danger</CButton> |
| 161 | + <CButton block pressed outline variant="danger" aria-pressed="true">Danger</CButton> |
162 | 162 | </CCol> |
163 | 163 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
164 | | - <CButton block pressed variant="outline-info" aria-pressed="true">Info</CButton> |
| 164 | + <CButton block pressed outline variant="info" aria-pressed="true">Info</CButton> |
165 | 165 | </CCol> |
166 | 166 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
167 | | - <CButton block pressed variant="outline-light" aria-pressed="true">Light</CButton> |
| 167 | + <CButton block pressed outline variant="light" aria-pressed="true">Light</CButton> |
168 | 168 | </CCol> |
169 | 169 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
170 | | - <CButton block pressed variant="outline-dark" aria-pressed="true">Dark</CButton> |
| 170 | + <CButton block pressed outline variant="dark" aria-pressed="true">Dark</CButton> |
171 | 171 | </CCol> |
172 | 172 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol> |
173 | 173 | </CRow> |
|
176 | 176 | Disabled |
177 | 177 | </CCol> |
178 | 178 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
179 | | - <CButton block variant="outline-primary" disabled>Primary</CButton> |
| 179 | + <CButton block outline variant="primary" disabled>Primary</CButton> |
180 | 180 | </CCol> |
181 | 181 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
182 | | - <CButton block variant="outline-secondary" disabled>Secondary</CButton> |
| 182 | + <CButton block outline variant="secondary" disabled>Secondary</CButton> |
183 | 183 | </CCol> |
184 | 184 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
185 | | - <CButton block variant="outline-success" disabled>Success</CButton> |
| 185 | + <CButton block outline variant="success" disabled>Success</CButton> |
186 | 186 | </CCol> |
187 | 187 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
188 | | - <CButton block variant="outline-warning" disabled>Warning</CButton> |
| 188 | + <CButton block outline variant="warning" disabled>Warning</CButton> |
189 | 189 | </CCol> |
190 | 190 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
191 | | - <CButton block variant="outline-danger" disabled>Danger</CButton> |
| 191 | + <CButton block outline variant="danger" disabled>Danger</CButton> |
192 | 192 | </CCol> |
193 | 193 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
194 | | - <CButton block variant="outline-info" disabled>Info</CButton> |
| 194 | + <CButton block outline variant="info" disabled>Info</CButton> |
195 | 195 | </CCol> |
196 | 196 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
197 | | - <CButton block variant="outline-light" disabled>Light</CButton> |
| 197 | + <CButton block outline variant="light" disabled>Light</CButton> |
198 | 198 | </CCol> |
199 | 199 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"> |
200 | | - <CButton block variant="outline-dark" disabled>Dark</CButton> |
| 200 | + <CButton block outline variant="dark" disabled>Dark</CButton> |
201 | 201 | </CCol> |
202 | 202 | <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol> |
203 | 203 | </CRow> |
|
532 | 532 | <CButton variant="primary" size="sm">Standard Button</CButton> |
533 | 533 | </CCol> |
534 | 534 | <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center"> |
535 | | - <CButton variant="outline-secondary" size="sm">Outline Button</CButton> |
| 535 | + <CButton outline variant="secondary" size="sm">Outline Button</CButton> |
536 | 536 | </CCol> |
537 | 537 | <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center"> |
538 | 538 | <CButton size="sm" ghost variant="success">Ghost Button</CButton> |
|
552 | 552 | <CButton variant="primary">Standard Button</CButton> |
553 | 553 | </CCol> |
554 | 554 | <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center"> |
555 | | - <CButton variant="outline-secondary" >Outline Button</CButton> |
| 555 | + <CButton outline variant="secondary" >Outline Button</CButton> |
556 | 556 | </CCol> |
557 | 557 | <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center"> |
558 | 558 | <CButton ghost variant="success">Ghost Button</CButton> |
|
572 | 572 | <CButton variant="primary" size="lg">Standard Button</CButton> |
573 | 573 | </CCol> |
574 | 574 | <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center"> |
575 | | - <CButton variant="outline-secondary" size="lg">Outline Button</CButton> |
| 575 | + <CButton outline variant="secondary" size="lg">Outline Button</CButton> |
576 | 576 | </CCol> |
577 | 577 | <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center"> |
578 | 578 | <CButton ghost variant="success" size="lg">Ghost Button</CButton> |
|
627 | 627 | <CCardBody> |
628 | 628 | <CRow> |
629 | 629 | <CCol sm xs="12" class="c-text-center c-mt-3"> |
630 | | - <CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton> |
| 630 | + <CButton outline variant="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton> |
631 | 631 | </CCol> |
632 | 632 | <CCol sm xs="12" class="c-text-center c-mt-3"> |
633 | | - <CButton variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton> |
| 633 | + <CButton outline variant="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton> |
634 | 634 | </CCol> |
635 | 635 | <CCol sm xs="12" class="c-text-center c-mt-3"> |
636 | | - <CButton variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton> |
| 636 | + <CButton outline variant="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton> |
637 | 637 | </CCol> |
638 | 638 | <CCol sm xs="12" class="c-text-center c-mt-3"> |
639 | | - <CButton variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton> |
| 639 | + <CButton outline variant="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton> |
640 | 640 | </CCol> |
641 | 641 | <CCol sm xs="12" class="c-text-center c-mt-3"> |
642 | | - <CButton variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton> |
| 642 | + <CButton outline variant="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton> |
643 | 643 | </CCol> |
644 | 644 | <CCol sm xs="12" class="c-text-center c-mt-3"> |
645 | | - <CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton> |
| 645 | + <CButton outline variant="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton> |
646 | 646 | </CCol> |
647 | 647 | </CRow> |
648 | 648 | </CCardBody> |
|
670 | 670 | <strong>Block Level CButtons </strong><small>Add this <code>block</code></small> |
671 | 671 | </CCardHeader> |
672 | 672 | <CCardBody> |
673 | | - <CButton size="lg" variant="outline-secondary" block>Block level button</CButton> |
674 | | - <CButton size="lg" variant="outline-primary" block>Block level button</CButton> |
675 | | - <CButton size="lg" variant="outline-success" block>Block level button</CButton> |
676 | | - <CButton size="lg" variant="outline-info" block>Block level button</CButton> |
677 | | - <CButton size="lg" variant="outline-warning" block>Block level button</CButton> |
678 | | - <CButton size="lg" variant="outline-danger" block>Block level button</CButton> |
| 673 | + <CButton size="lg" outline variant="secondary" block>Block level button</CButton> |
| 674 | + <CButton size="lg" outline variant="primary" block>Block level button</CButton> |
| 675 | + <CButton size="lg" outline variant="success" block>Block level button</CButton> |
| 676 | + <CButton size="lg" outline variant="info" block>Block level button</CButton> |
| 677 | + <CButton size="lg" outline variant="warning" block>Block level button</CButton> |
| 678 | + <CButton size="lg" outline variant="danger" block>Block level button</CButton> |
679 | 679 | <CButton size="lg" ghost variant="info" block>Block level button</CButton> |
680 | 680 | </CCardBody> |
681 | 681 | </CCard> |
|
0 commit comments