|
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