Skip to content

Commit 5da8784

Browse files
author
Camby SP3
committed
add radio and checkbox button group
1 parent 3e1352a commit 5da8784

File tree

5 files changed

+119
-18
lines changed

5 files changed

+119
-18
lines changed

‎css/component/checkbox.css

Lines changed: 1 addition & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/component/checkbox.less

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
&:before { content: ''; position: absolute; top: 1px; left: 0; width: 17px; height: 17px; border: 1px solid #d4d4d5; .transition; }
77
}
88
&:hover label:before { border-color: #999; }
9-
&.disabled > label, input:disabled + label { color: #999; cursor: no-drop;
9+
&.disabled > label, input[disabled] + label { color: #999; cursor: no-drop;
1010
&:before { opacity: 0.7; border-color: #d4d4d5; }
1111
&:after { opacity: 0.7; }
1212
}
@@ -55,7 +55,7 @@
5555
&:before { background-color: @color-primary !important; }
5656
&:after { left: 31px; }
5757
}
58-
&.disabled > label, input:disabled + label { color: #999;
58+
&.disabled > label, input[disabled] + label { color: #999;
5959
&:before { background-color: rgba(0,0,0,.05); }
6060
&:after, &:before { opacity: 0.8; }
6161
}
@@ -66,4 +66,23 @@
6666
}
6767
}
6868

69-
.-each(@name) { }
69+
.radio-group, .checkbox-group {
70+
input { display: none; }
71+
.btn { background-color: #EEE; color: #333;
72+
&:first-of-type { border-radius: 4px 0 0 4px !important; }
73+
&:hover { background-color: #DDD; }
74+
}
75+
input {
76+
&:checked + .btn { background-color: @color-primary; color: #FFF; }
77+
&.disabled, &[disabled] {
78+
+ .btn { cursor: no-drop !important; opacity: 0.8; }
79+
}
80+
}
81+
}
82+
83+
.-each(@name) {
84+
@this-color-name: 'color-@{name}';
85+
.radio-group.radio-group-@{name}, .checkbox-group.checkbox-group-@{name} {
86+
input:checked + .btn { background-color: @@this-color-name; color: #FFF; }
87+
}
88+
}

‎css/smt-bootstrap.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/smt-bootstrap.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
22
* # SMTB - Semantic UI Bootstrap
3-
* Version v3.1.1
3+
* Version v3.1.2
44
* http://github.com/cblweb/semantic-ui-bootstrap/
55
* Inspired by Semantic UI
66
*
@@ -72,7 +72,7 @@ a, .btn-link { color: darken(@color-primary,20%);
7272
}
7373

7474
.-each(@name) {
75-
.btn-group .btn-@{name} + .dropdown-menu > li > a {
75+
.btn-group .btn-@{name} ~ .dropdown-menu > li > a {
7676
@this-color-name: 'color-@{name}';
7777
&:hover,&:focus { background-color: @@this-color-name; color: #FFF; }
7878
}

‎overview.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1911,6 +1911,98 @@ <h3>Switch</h3>
19111911
</div>
19121912
</div>
19131913
</div>
1914+
<div class="row">
1915+
<div class="col-sm-4">
1916+
<h3>Radio Group</h3>
1917+
<div class="bs-component">
1918+
<p class="btn-group radio-group">
1919+
<input id="gr1-1" type="radio" name="gr1" value="1">
1920+
<label for="gr1-1" class="btn">Great</label>
1921+
<input id="gr1-2" type="radio" name="gr1" value="2">
1922+
<label for="gr1-2" class="btn">General</label>
1923+
<input id="gr1-3" type="radio" name="gr1" value="3">
1924+
<label for="gr1-3" class="btn">Bad</label>
1925+
</p>
1926+
<p class="btn-group radio-group radio-group-danger">
1927+
<input id="gr2-1" type="radio" name="gr2" value="1">
1928+
<label for="gr2-1" class="btn">Great</label>
1929+
<input id="gr2-2" type="radio" name="gr2" value="2">
1930+
<label for="gr2-2" class="btn">General</label>
1931+
<input id="gr2-3" type="radio" name="gr2" value="3">
1932+
<label for="gr2-3" class="btn">Bad</label>
1933+
</p>
1934+
<p class="btn-group radio-group radio-group-warning">
1935+
<input id="gr3-1" type="radio" name="gr3" value="1">
1936+
<label for="gr3-1" class="btn">Great</label>
1937+
<input id="gr3-2" type="radio" name="gr3" value="2">
1938+
<label for="gr3-2" class="btn">General</label>
1939+
<input id="gr3-3" type="radio" name="gr3" value="3">
1940+
<label for="gr3-3" class="btn">Bad</label>
1941+
</p>
1942+
<p class="btn-group radio-group radio-group-success">
1943+
<input id="gr4-1" type="radio" name="gr4" value="1">
1944+
<label for="gr4-1" class="btn">Great</label>
1945+
<input id="gr4-2" type="radio" name="gr4" value="2">
1946+
<label for="gr4-2" class="btn">General</label>
1947+
<input id="gr4-3" type="radio" name="gr4" value="3">
1948+
<label for="gr4-3" class="btn">Bad</label>
1949+
</p>
1950+
<p class="btn-group radio-group radio-group-info">
1951+
<input id="gr5-1" type="radio" name="gr5" value="1">
1952+
<label for="gr5-1" class="btn">Great</label>
1953+
<input id="gr5-2" type="radio" name="gr5" value="2">
1954+
<label for="gr5-2" class="btn">General</label>
1955+
<input id="gr5-3" type="radio" name="gr5" value="3">
1956+
<label for="gr5-3" class="btn">Bad</label>
1957+
</p>
1958+
</div>
1959+
</div>
1960+
<div class="col-sm-4">
1961+
<h3>Checkbox Group</h3>
1962+
<div class="bs-component">
1963+
<p class="btn-group checkbox-group">
1964+
<input id="gc1-1" type="checkbox" name="gc1[]" value="1" disabled>
1965+
<label for="gc1-1" class="btn">PHP</label>
1966+
<input id="gc1-2" type="checkbox" name="gc1[]" value="2">
1967+
<label for="gc1-2" class="btn">ROR</label>
1968+
<input id="gc1-3" type="checkbox" name="gc1[]" value="3">
1969+
<label for="gc1-3" class="btn">Node.js</label>
1970+
</p>
1971+
<p class="btn-group checkbox-group checkbox-group-danger">
1972+
<input id="gc2-1" type="checkbox" name="gc2[]" value="1">
1973+
<label for="gc2-1" class="btn">PHP</label>
1974+
<input id="gc2-2" type="checkbox" name="gc2[]" value="2">
1975+
<label for="gc2-2" class="btn">ROR</label>
1976+
<input id="gc2-3" type="checkbox" name="gc2[]" value="3">
1977+
<label for="gc2-3" class="btn">Node.js</label>
1978+
</p>
1979+
<p class="btn-group checkbox-group checkbox-group-warning">
1980+
<input id="gc3-1" type="checkbox" name="gc3[]" value="1">
1981+
<label for="gc3-1" class="btn">PHP</label>
1982+
<input id="gc3-2" type="checkbox" name="gc3[]" value="2">
1983+
<label for="gc3-2" class="btn">ROR</label>
1984+
<input id="gc3-3" type="checkbox" name="gc3[]" value="3">
1985+
<label for="gc3-3" class="btn">Node.js</label>
1986+
</p>
1987+
<p class="btn-group checkbox-group checkbox-group-success">
1988+
<input id="gc4-1" type="checkbox" name="gc4[]" value="1">
1989+
<label for="gc4-1" class="btn">PHP</label>
1990+
<input id="gc4-2" type="checkbox" name="gc4[]" value="2">
1991+
<label for="gc4-2" class="btn">ROR</label>
1992+
<input id="gc4-3" type="checkbox" name="gc4[]" value="3">
1993+
<label for="gc4-3" class="btn">Node.js</label>
1994+
</p>
1995+
<p class="btn-group checkbox-group checkbox-group-info">
1996+
<input id="gc5-1" type="checkbox" name="gc5[]" value="1">
1997+
<label for="gc5-1" class="btn">PHP</label>
1998+
<input id="gc5-2" type="checkbox" name="gc5[]" value="2">
1999+
<label for="gc5-2" class="btn">ROR</label>
2000+
<input id="gc5-3" type="checkbox" name="gc5[]" value="3">
2001+
<label for="gc5-3" class="btn">Node.js</label>
2002+
</p>
2003+
</div>
2004+
</div>
2005+
</div>
19142006
</div>
19152007

19162008

0 commit comments

Comments
 (0)