Skip to content
This repository has been archived by the owner on Aug 18, 2020. It is now read-only.

Commit

Permalink
Merge pull request #22 from Tripwire/formcontrol
Browse files Browse the repository at this point in the history 
Radio/Checkboxes
  • Loading branch information
@cdaringe
cdaringe authored Mar 2, 2017
2 parents 4c22b38 + 891ed96 commit a3be742
Show file tree
Hide file tree
Showing 5 changed files with 239 additions and 10 deletions.
197 changes: 194 additions & 3 deletions semantic/src/themes/tripwire/modules/checkbox.overrides
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,16 +42,21 @@
height: 16px;
padding: 2px;
right: 1px;
}
.ui.toggle.checkbox label::hover:before {

background-color: #f1f1f1;

}
.ui.toggle.checkbox label:after {
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3) !important;
box-shadow: none;
position: absolute;
content: '' !important;
opacity: 1;
z-index: 2;

border: none;
border: 1px solid #e4e6e7;
width: 14px;
height: 14px;
top: 0px;
Expand All @@ -62,6 +67,13 @@

}

/* Active */

.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after {
left: (@toggleLaneWidth - @toggleHandleSize) + 0.35rem;
}

/*--------------
Radio
---------------*/
Expand All @@ -87,6 +99,7 @@
top: @radioTop;
left: @radioLeft;
border-color: @grey;
border-width: 2px;

}

Expand All @@ -98,9 +111,10 @@
width: @radioSize;
height: @radioSize;
line-height: @radioSize;

background-color: @grey !important;
}


/* Radio Checkbox */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
Expand Down Expand Up @@ -139,7 +153,19 @@
top: @radioTop;
left: @radioLeft;
border-color: @blue;
}

.ui.radio.checkbox.disabled .box:hover::before,
.ui.radio.checkbox.disabled label:hover::before {
content: '';
transform: none;

width: @radioSize;
height: @radioSize;
border-radius: @circularRadius;
top: @radioTop;
left: @radioLeft;
border-color: @grey;
}

/* Active */
Expand All @@ -153,6 +179,59 @@
background-color: @radioActiveBulletColor;
border-color: @grey;
}
.ui.radio.checkbox input:checked ~ .box:hover::before,
.ui.radio.checkbox input:checked ~ label:hover::before {
background-color: @radioActiveBackground;
border-color: @blue;
}
.ui.radio.checkbox input:checked ~ .box:hover::after,
.ui.radio.checkbox input:checked ~ label:hover::after {
background-color: @radioActiveBulletColor;
border-color: @blue;
}

.ui.radio.checkbox .box:hover::after,
.ui.radio.checkbox label:hover::after {
border: none;
content: '' !important;
width: @radioSize;
height: @radioSize;
line-height: @radioSize;
background-color: @blue !important;
}

.ui.radio.checkbox.disabled .box:hover::after,
.ui.radio.checkbox.disabled label:hover::after {
border: none;
content: '' !important;
width: @radioSize;
height: @radioSize;
line-height: @radioSize;
background-color: @grey !important;
}

/* Active */
.ui.radio.checkbox.disabled input:checked ~ .box:before,
.ui.radio.checkbox.disabled input:checked ~ label:before {
background-color: @radioActiveBackground;
border-color: @grey;
}
.ui.radio.checkbox.disabled input:checked ~ .box:after,
.ui.radio.checkbox.disabled input:checked ~ label:after {
background-color: @radioActiveBulletColor;
border-color: @grey;
}
.ui.radio.checkbox.disabled input:checked ~ .box:hover::before,
.ui.radio.checkbox.disabled input:checked ~ label:hover::before {
background-color: @radioActiveBackground;
border-color: @grey;
}
.ui.radio.checkbox.disabled input:checked ~ .box:hover::after,
.ui.radio.checkbox.disabled input:checked ~ label:hover::after {
background-color: @radioActiveBulletColor;
border-color: @grey;
}


/* Active Focus */
.ui.radio.checkbox input:focus:checked ~ .box:before,
Expand All @@ -163,3 +242,115 @@
.ui.radio.checkbox input:focus:checked ~ label:after {
background-color: @radioActiveFocusBulletColor;
}


/*--------------
Box
---------------*/


.ui.checkbox .box,
.ui.checkbox label {
cursor: auto;
position: relative;
display: block;
padding-left: @labelDistance;
outline: none;
font-size: @labelFontSize;
}

.ui.checkbox .box:before,
.ui.checkbox label:before {
position: absolute;
top: 0px;
left: 0px;

width: @checkboxSize;
height: @checkboxSize;
content: '';

background: @checkboxBackground;
border-radius: @checkboxBorderRadius;

transition: @checkboxTransition;
border: @checkboxBorder;
}

/*--------------
Checkmark
---------------*/



.ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before {
background: @checkboxHoverBackground;
border-color: @blue;
}


.ui.checkbox .box:after,
.ui.checkbox label:after {
position: absolute;
font-size: @checkboxCheckFontSize;
top: @checkboxCheckTop;
left: @checkboxCheckLeft;
width: @checkboxCheckSize;
height: @checkboxCheckSize;
text-align: center;

opacity: 0;
color: @grey;
transition: @checkboxTransition;



}

/*--------------
Active
---------------*/

.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
background: @checkboxActiveBackground;
opacity: 1;
border-color: @grey;
}
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
opacity: 1;
color: @grey;
}

.ui.checkbox input:checked ~ .box:hover::before,
.ui.checkbox input:checked ~ label:hover::before {
background: @checkboxActiveBackground;
opacity: 1;
border-color: @blue;
}
.ui.checkbox input:checked ~ .box:hover::after,
.ui.checkbox input:checked ~ label:hover::after {
opacity: 1;
color: @blue;
}



.ui.checkbox.disabled input:checked ~ .box:hover::before,
.ui.checkbox.disabled input:checked ~ label:hover::before {
background: @checkboxActiveBackground;
opacity: 1;
border-color: @grey;
}
.ui.checkbox.disabled input:checked ~ .box:hover::after,
.ui.checkbox.disabled input:checked ~ label:hover::after {
opacity: 1;
color: @grey;
}

.ui.checkbox.disabled .box:hover::before,
.ui.checkbox.disabled label:hover::before {
background: @checkboxHoverBackground;
border-color: @grey;
}
6 changes: 3 additions & 3 deletions semantic/src/themes/tripwire/modules/checkbox.variables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*******************************/
@textColor: @grey;

@checkboxSize: 17px;
@checkboxSize: 20px;
@checkboxColor: @textColor;
@checkboxLineHeight: @checkboxSize;

Expand All @@ -13,8 +13,8 @@

/* Checkbox */
@checkboxBackground: @white;
@checkboxBorder: 1px solid @solidBorderColor;
@checkboxBorderRadius: @3px;
@checkboxBorder: 2px solid @grey;
@checkboxBorderRadius: 2px;
@checkboxTransition:
border @defaultDuration @defaultEasing,
opacity @defaultDuration @defaultEasing,
Expand Down
2 changes: 1 addition & 1 deletion src/components/charts/CircleChart/Circle.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import colorPallete from '../../colorPallete';
import colorPallete from '../../colorPallete'
var d3 = Object.assign({}, require('d3-shape'))

const twoPi = Math.PI * 2
Expand Down
43 changes: 41 additions & 2 deletions stories/controls.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { storiesOf } from '@kadira/storybook'
import { Radio, Dropdown, Input, Button, Popup } from 'semantic-ui-react'
import { Radio, Dropdown, Input, Button, Popup, Checkbox } from 'semantic-ui-react'
import FavoriteButton from '../src/components/FavoriteButton'
import StopStartButton from '../src/components/StopStartButton'
import PaginationControl from '../src/components/PaginationControl'
Expand Down Expand Up @@ -49,8 +49,47 @@ storiesOf('Interactive Controls', module)
<Radio toggle />
))
.add('Radio Button', () => (
<Radio />
<div>
<div>
<Radio />
Standard
</div>
<div>
<Radio disabled />
Disabled
</div>
<div>
<Radio checked disabled />
Checked Disabled
</div>
<br />
Reference Semantic UI documentation for usage: <a href='http://react.semantic-ui.com/addons/radio' target='_new'> here </a>
</div>
))
.add('Checkbox', () => (
<div>
<div>
<Checkbox />
Standard
</div>
<div>
<Checkbox checked />
Checked
</div>
<div>
<Checkbox disabled />
Disabled
</div>
<div>
<Checkbox checked disabled />
Checked Disabled
</div>

<br />
Reference Semantic UI documentation for usage: <a href='http://react.semantic-ui.com/modules/checkbox' target='_new'> here </a>
</div>
))

.add('Dropdown Menu', () => (
<Dropdown placeholder='Select Country' selection options={dropdownOptions} defaultValue={dropdownOptions[0].value} />
))
Expand Down
1 change: 0 additions & 1 deletion stories/tables.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,4 +95,3 @@ storiesOf('Tables', module)
</Table.Body>
</Table>
))

0 comments on commit a3be742

Please sign in to comment.