richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fixes OR to be em based, adds some variations to grid 

Former-commit-id: c2f0d5d92f
Former-commit-id: ef507233fc
pull/258/head
Jack Lukic 12 years ago
parent
fc3aa3ac7e
commit
7d7e04000a
14 changed files with 350 additions and 424 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      node/docpad.coffee
  2. 67
      node/src/documents/collections/grid.html
  3. 12
      node/src/documents/elements/button.html
  4. 138
      node/src/files/components/semantic/src/collections/grid.css
  5. 118
      node/src/files/components/semantic/src/collections/menu.css
  6. 181
      node/src/files/components/semantic/src/elements/button.css
  7. 2
      node/src/files/components/semantic/src/elements/label.css
  8. 3
      node/src/files/components/semantic/src/modules/checkbox.css
  9. 28
      node/src/files/javascript/semantic.js
  10. 5
      node/src/files/stylesheets/semantic.css
  11. 7
      node/src/layouts/default.html.eco
  12. 26
      src/collections/grid.css
  13. 5
      src/collections/menu.css
  14. 181
      src/elements/button.css

1
node/docpad.coffee
View File

@ -10,6 +10,7 @@ docpadConfig = {
jade: false
marked: false
paged: false
liveReload: false
plugins:
handlebars:

67
node/src/documents/collections/grid.html
View File

@ -203,7 +203,12 @@ type : 'UI Collection'
<div class="example">
<h4>Responsive Grid</h4>
<p>A grid can be responsive and resize the proportions of its gutters as a browser resolution changes.</p>
<p>A grid can be responsive to a browsers width.</p>
<div class="ui text block info ignore">
<p>
<i class="icon heart"></i> Semantic UI's responsive grid by default will change the page gutters to increase at 250pixel intervals.
</div>
<div class="ui two column responsive grid">
<div class="column">
@ -304,6 +309,38 @@ type : 'UI Collection'
</div>
</div>
</div>
<div class="example">
<h4>Horizontal Alignment</h4>
<p>A column can be aligned, or "floated", to either the left or right of its row.</p>
<div class="ui grid">
<div class="left aligned four wide column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
</div>
<div class="item">
Cockerspaniel
</div>
</div>
</div>
<div class="right aligned four wide column">
<div class="ui vertical fluid menu">
<div class="header item">
Cats
</div>
<div class="item">
Abysinnian
</div>
<div class="item">
Sphynx
</div>
</div>
</div>
</div>
<div class="example">
<h4>Vertical Alignment</h4>
@ -313,13 +350,7 @@ type : 'UI Collection'
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
</div>
<div class="item">
Cockerspaniel
Cats
</div>
</div>
</div>
@ -339,10 +370,7 @@ type : 'UI Collection'
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
Monkeys
</div>
</div>
</div>
@ -353,9 +381,6 @@ type : 'UI Collection'
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
</div>
</div>
</div>
<div class="column">
@ -374,10 +399,7 @@ type : 'UI Collection'
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
Monkeys
</div>
</div>
</div>
@ -386,10 +408,7 @@ type : 'UI Collection'
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
Cats
</div>
</div>
</div>
@ -409,7 +428,7 @@ type : 'UI Collection'
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
Monkeys
</div>
</div>
</div>

12
node/src/documents/elements/button.html
View File

@ -212,6 +212,18 @@ type : 'UI Element'
<h3>Plural Variations</h3>
<p>Singular variations can be applied to groups to infer all elements share the same quality</p>
<div class="example">
<h4>Vertical</h4>
<p>Groups can be formatted to appear vertically</p>
<div class="ui vertical buttons">
<div class="ui button">Top</div>
<div class="ui button">Middle</div>
<div class="ui button">Bottom</div>
</div>
</div>
<div class="example">
<h4>Icon</h4>
<p>Groups can be formatted as icon toolbars</p>

138
node/src/files/components/semantic/src/collections/grid.css
View File

@ -26,46 +26,12 @@
-ms-box-sizing: border-box;
box-sizing: border-box;
}
@media only screen and (max-width : 1000px) {
.ui.responsive.grid {
padding: 0% 5%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
}
}
@media only screen and (min-width : 1000px) {
.ui.responsive.grid {
padding: 0% 12.5%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
}
}
@media only screen and (min-width : 1500px) {
.ui.responsive.grid {
padding: 0% 15%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
}
}
@media only screen and (min-width : 1750px) {
.ui.responsive.grid {
padding: 0% 23%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
}
}
@media only screen and (min-width : 2000px) {
.ui.responsive.grid {
padding: 0% 27%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
}
.ui.grid:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*-------------------
@ -102,6 +68,11 @@
Rows
--------------------*/
.ui.grid > .row {
display: block;
width: 100%;
}
.ui.grid > .row {
padding-top: 2.55%;
}
@ -109,12 +80,80 @@
padding-top: 0px;
}
/*-------------------
Content
--------------------*/
.ui.grid > .row > img,
.ui.grid > .row > .column > img {
max-width: 100%;
}
/*******************************
Variations
*******************************/
/*-------------------
Page
--------------------*/
.ui.page.grid {
padding: 0% 5%;
}
/*-------------------
Responsive
--------------------*/
@media only screen and (max-width : 1000px) {
.ui.responsive.grid {
padding: 0% 5%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
}
}
@media only screen and (min-width : 1000px) {
.ui.responsive.grid {
padding: 0% 5%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
}
}
@media only screen and (min-width : 1500px) {
.ui.responsive.grid {
padding: 0% 10%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
}
}
@media only screen and (min-width : 1750px) {
.ui.responsive.grid {
padding: 0% 20%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
}
}
@media only screen and (min-width : 2000px) {
.ui.responsive.grid {
padding: 0% 27%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
}
}
/*-------------------
Column Width
--------------------*/
/* Sizing Combinations */
.ui.grid .one.wide.column {
@ -278,15 +317,28 @@
.ui.fitted.grid {
padding: 0%;
}
.ui.fitted.row {
padding-top: 0%
}
.ui.fitted.grid .column,
.ui.grid .fitted.column {
padding-left: 0%;
padding-right: 0%;
}
/*-------------------
Padded
--------------------*/
/*----------------------
"Floated"
-----------------------*/
.ui.grid .left.aligned.column {
float: left;
}
.ui.grid .right.aligned.column {
float: right;
}
/*----------------------

118
node/src/files/components/semantic/src/collections/menu.css
View File

@ -441,59 +441,6 @@
color: rgba(0, 0, 0, 0.75);
}
/*--------------
Colors
---------------*/
/*--- Light Colors ---*/
.ui.grey.menu {
background-color: #F0F0F0;
}
/*--- Inverted Colors ---*/
.ui.inverted.green.menu {
background-color: #A1CF64;
}
.ui.inverted.green.pointing.menu .item.active:after {
background-color: #A1CF64;
}
.ui.inverted.red.menu {
background-color: #EF4D6D;
}
.ui.inverted.red.pointing.menu .item.active:after {
background-color: #F16883;
}
.ui.inverted.blue.menu {
background-color: #6ECFF5;
}
.ui.inverted.blue.pointing.menu .item.active:after {
background-color: #6ECFF5;
}
.ui.inverted.purple.menu {
background-color: #564F8A;
}
.ui.inverted.purple.pointing.menu .item.active:after {
background-color: #564F8A;
}
.ui.inverted.orange.menu {
background-color: #F05940;
}
.ui.inverted.orange.pointing.menu .item.active:after {
background-color: #F05940;
}
.ui.inverted.teal.menu {
background-color: #00B5AD;
}
.ui.inverted.teal.pointing.menu .item.active:after {
background-color: #00B5AD;
}
/*--- Border ---*/
.ui.inverted.menu .item:before {
background-image: -webkit-linear-gradient(top,
@ -590,16 +537,69 @@
/*--- Pointers ---*/
.ui.inverted.pointing.menu .item.active:after {
background-color: #3E3E3E;
background-color: #505050;
box-shadow: none;
}
.ui.inverted.pointing.menu .item.active:hover:after {
background-color: #3B3B3B;
}
/*--------------
Colors
---------------*/
/*--- Light Colors ---*/
.ui.grey.menu {
background-color: #F0F0F0;
}
/*--- Inverted Colors ---*/
.ui.inverted.green.menu {
background-color: #A1CF64;
}
.ui.inverted.green.pointing.menu .item.active:after {
background-color: #A1CF64;
}
.ui.inverted.red.menu {
background-color: #EF4D6D;
}
.ui.inverted.red.pointing.menu .item.active:after {
background-color: #F16883;
}
.ui.inverted.blue.menu {
background-color: #6ECFF5;
}
.ui.inverted.blue.pointing.menu .item.active:after {
background-color: #6ECFF5;
}
.ui.inverted.purple.menu {
background-color: #564F8A;
}
.ui.inverted.purple.pointing.menu .item.active:after {
background-color: #564F8A;
}
.ui.inverted.orange.menu {
background-color: #F05940;
}
.ui.inverted.orange.pointing.menu .item.active:after {
background-color: #F05940;
}
.ui.inverted.teal.menu {
background-color: #00B5AD;
}
.ui.inverted.teal.pointing.menu .item.active:after {
background-color: #00B5AD;
}
/*--------------
Basic
---------------*/
.ui.basic.menu {
background-color: transparent;
-webkit-box-shadow: none;
@ -614,6 +614,11 @@
.ui.basic.menu .item:before {
display: none;
}
.ui.basic.pointing.menu item.active:after {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/*--------------
Icon Only
@ -653,8 +658,9 @@
text-align: center;
}
.ui.labeled.icon.menu .icon {
font-size: 2em;
margin-bottom: 0.3em;
display: block;
font-size: 1.5em;
margin: 0em auto 0.3em;
}
/*--------------

181
node/src/files/components/semantic/src/elements/button.css
View File

@ -27,14 +27,15 @@
padding: 0.8em 1.5em;
font-size: 1em;
text-transform: uppercase;
line-height: 1;
font-weight: bold;
font-style: normal;
text-align: center;
color: #7A7A7A;
text-align: center;
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
@ -535,7 +536,6 @@ Containing Icon
.ui.icon.buttons .button,
.ui.icon.button {
padding: 0.75em;
text-align: center;
}
.ui.icon.buttons .button i,
.ui.icon.button i {
@ -543,6 +543,17 @@ Containing Icon
vertical-align: top;
}
/*--------------
Labeled Icon
---------------*/
.ui.labeled.icon.buttons .button .icon,
.ui.labeled.icon.button .icon {
display: block;
font-size: 1.5em;
margin: 0em auto 0.3em;
}
/*--------------
Toggle
---------------*/
@ -620,6 +631,7 @@ Containing Icon
border-left: none;
padding-right: 0.75em;
text-align: right;
border-right: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
@ -630,6 +642,7 @@ Containing Icon
display: inline-block;
padding-left: 0.75em;
text-align: left;
border-left: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0em 0.3125em 0.3125em 0em;
@ -747,6 +760,8 @@ input:focus + .ui.attached.button {
.ui.buttons .or {
position: relative;
float: left;
width: 0.3em;
height: 1em;
}
.ui.buttons .or:before {
position: absolute;
@ -755,9 +770,16 @@ input:focus + .ui.attached.button {
content: 'or';
background-color: #FFFFFF;
line-height: 1;
margin-top: -0.15em;
margin-left: -0.9em;
width: 1.8em;
height: 1.8em;
line-height: 1.66;
color: #AAAAAA;
font-style: italic;
font-style: normal;
font-weight: normal;
text-align: center;
-moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
@ -775,159 +797,26 @@ input:focus + .ui.attached.button {
}
.ui.buttons .or:after {
position: absolute;
top: 0px;
left: 0px;
top: 0em;
left: 0em;
content: ' ';
background-color: transparent;
border-top: 10px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
}
width: 0.3em;
height: 1.8em;
/* Or Sizes */
.ui.buttons .or {
width: 5px;
height: 38px;
background-color: transparent;
border-top: 0.6em solid #FFFFFF;
border-bottom: 0.6em solid #FFFFFF;
}
.ui.buttons .or:before {
margin-top: -15px;
margin-left: -15px;
padding-top: 6px;
width: 28px;
height: 28px;
font-style: normal;
font-weight: bold;
}
.ui.buttons .or:after {
top: 0px;
width: 5px;
height: 16px;
}
/* Fluid Or */
.ui.fluid.buttons .or {
width: 0px !important;
width: 0em !important;
}
.ui.fluid.buttons .or:after{
display: none;
}
/* mini */
.ui.mini.buttons .or,
.ui.buttons .mini.or {
height: 19px;
}
.ui.mini.buttons .or:before,
.ui.buttons .mini.or:before {
margin-left: -8px;
margin-top: -6px;
padding-top: 2px;
width: 14px;
height: 14px;
font-size: 9px;
}
.ui.mini.buttons .or:after,
.ui.buttons .mini.or:after {
top: 3px;
width: 4px;
height: 10px;
}
/* tiny */
.ui.tiny.buttons .or,
.ui.buttons .tiny.or {
height: 26px;
}
.ui.tiny.buttons .or:before,
.ui.buttons .tiny.or:before {
margin-left: -11px;
margin-top: -10px;
padding-top: 4px;
width: 20px;
height: 19px;
font-size: 11px;
}
.ui.tiny.buttons .or:after,
.ui.buttons .tiny.or:after {
top: 2px;
width: 5px;
height: 16px;
}
/* small */
.ui.small.buttons .or,
.ui.buttons .small.or {
height: 26px;
}
.ui.small.buttons .or:before,
.ui.buttons .small.or:before {
margin-left: -11px;
margin-top: -10px;
padding-top: 4px;
width: 20px;
height: 19px;
font-size: 11px;
}
.ui.small.buttons .or:after,
.ui.buttons .small.or:after {
top: 2px;
width: 5px;
height: 16px;
}
/* big */
.ui.big.buttons .or,
.ui.buttons .big.or {
}
.ui.big.buttons .or:before,
.ui.buttons .big.or:before {
margin-left: -14px;
margin-top: -8px;
padding-top: 5px;
width: 26px;
height: 25px;
font-size: 14px;
}
.ui.big.buttons .or:after,
.ui.buttons .big.or:after {
top: 5px;
width: 5px;
height: 22px;
}
/* huge */
.ui.huge.buttons .or,
.ui.buttons .huge.or {
width: 6px;
height: 41px;
}
.ui.huge.buttons .or:before,
.ui.buttons .huge.or:before {
margin-left: -15px;
margin-top: -14px;
padding-top: 6px;
width: 30px;
height: 29px;
font-size: 15px;
}
.ui.huge.buttons .or:after,
.ui.buttons .huge.or:after {
top: 6px;
width: 6px;
height: 26px;
}
/*-------------------
Attached

2
node/src/files/components/semantic/src/elements/label.css
View File

@ -54,7 +54,7 @@ a.ui.label {
display: inline-block;
font-size: 0.9em;
margin-left: 0.5em;
opacity: 0.8;
opacity: 0.6;
}
.ui.label .icon.close {
cursor: pointer;

3
node/src/files/components/semantic/src/modules/checkbox.css
View File

@ -11,6 +11,7 @@
.ui.checkbox {
position: relative;
display: inline-block;
outline: none;
width: 1em;
height: 1em;
@ -18,11 +19,13 @@
}
.ui.checkbox input {
visibility: hidden;
outline: none;
}
/*--- Box ---*/
.ui.checkbox label {
outline: none;
cursor: pointer;
position: absolute;
width: 1em;

28
node/src/files/javascript/semantic.js
View File

@ -11,7 +11,7 @@ semantic.ready = function() {
$ui = $('.ui').not('.hover, .down'),
$checkbox = $('.ui.checkbox'),
$swap = $('.theme.menu .item'),
$menu = $('.sidebar.button'),
$menu = $('.sidebar'),
$sortTable = $('.sortable.table'),
$demo = $('.demo'),
$waypoints = $('h2'),
@ -132,6 +132,29 @@ semantic.ready = function() {
}
},
menu: {
mouseenter: function() {
$menu
.stop()
.animate({
width: '100px'
}, 300, function() {
$menu.find('.text').stop().fadeIn(200);
})
;
},
mouseleave: function() {
$menu.hide();
$menu
.stop()
.animate({
width: '10px'
}, 300)
;
}
},
peek: function() {
var
$body = $('html, body'),
@ -279,13 +302,14 @@ semantic.ready = function() {
$checkbox
.checkbox()
;
console.log($checkbox);
$swap
.on('click', handler.swapStyle)
;
$menu
.on('mouseenter', handler.menu.mouseenter)
.on('mouseleave', handler.menu.mouseleave)
.sidr({
name: 'menu'
})

5
node/src/files/stylesheets/semantic.css
View File

@ -326,6 +326,11 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
position: fixed;
margin-top: 75px;
z-index: 500;
width: 10px;
}
#example .sidebar.button .text {
display: inline-block;
display: none;
}
#example .main.container {

7
node/src/layouts/default.html.eco
View File

@ -120,6 +120,7 @@
<a class="item" href="https://github.com/quirkyinc/semantic">
<i class="icon github"></i>
</a>
<!--
<div class="dropdown item">
<i class="icon tint"></i> Theme
<div class="theme menu">
@ -128,10 +129,14 @@
<div class="item" data-theme="classic">Classic</div>
</div>
</div>
!-->
</div>
</div>
</div>
<div class="ui teal huge sidebar right attached button"><i class="icon th-list"></i> Menu</div>
<div class="ui teal huge sidebar right attached button">
<i class="icon th-list"></i>
<span class="text">Menu</span>
</div>
<%- @content %>
</body>

26
src/collections/grid.css
View File

@ -26,6 +26,13 @@
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.ui.grid:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*-------------------
Columns
@ -310,15 +317,28 @@
.ui.fitted.grid {
padding: 0%;
}
.ui.fitted.row {
padding-top: 0%
}
.ui.fitted.grid .column,
.ui.grid .fitted.column {
padding-left: 0%;
padding-right: 0%;
}
/*-------------------
Padded
--------------------*/
/*----------------------
"Floated"
-----------------------*/
.ui.grid .left.aligned.column {
float: left;
}
.ui.grid .right.aligned.column {
float: right;
}
/*----------------------

5
src/collections/menu.css
View File

@ -658,8 +658,9 @@
text-align: center;
}
.ui.labeled.icon.menu .icon {
font-size: 2em;
margin-bottom: 0.3em;
display: block;
font-size: 1.5em;
margin: 0em auto 0.3em;
}
/*--------------

181
src/elements/button.css
View File

@ -27,14 +27,15 @@
padding: 0.8em 1.5em;
font-size: 1em;
text-transform: uppercase;
line-height: 1;
font-weight: bold;
font-style: normal;
text-align: center;
color: #7A7A7A;
text-align: center;
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
@ -535,7 +536,6 @@ Containing Icon
.ui.icon.buttons .button,
.ui.icon.button {
padding: 0.75em;
text-align: center;
}
.ui.icon.buttons .button i,
.ui.icon.button i {
@ -543,6 +543,17 @@ Containing Icon
vertical-align: top;
}
/*--------------
Labeled Icon
---------------*/
.ui.labeled.icon.buttons .button .icon,
.ui.labeled.icon.button .icon {
display: block;
font-size: 1.5em;
margin: 0em auto 0.3em;
}
/*--------------
Toggle
---------------*/
@ -620,6 +631,7 @@ Containing Icon
border-left: none;
padding-right: 0.75em;
text-align: right;
border-right: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
@ -630,6 +642,7 @@ Containing Icon
display: inline-block;
padding-left: 0.75em;
text-align: left;
border-left: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0em 0.3125em 0.3125em 0em;
@ -747,6 +760,8 @@ input:focus + .ui.attached.button {
.ui.buttons .or {
position: relative;
float: left;
width: 0.3em;
height: 1em;
}
.ui.buttons .or:before {
position: absolute;
@ -755,9 +770,16 @@ input:focus + .ui.attached.button {
content: 'or';
background-color: #FFFFFF;
line-height: 1;
margin-top: -0.15em;
margin-left: -0.9em;
width: 1.8em;
height: 1.8em;
line-height: 1.66;
color: #AAAAAA;
font-style: italic;
font-style: normal;
font-weight: normal;
text-align: center;
-moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
@ -775,159 +797,26 @@ input:focus + .ui.attached.button {
}
.ui.buttons .or:after {
position: absolute;
top: 0px;
left: 0px;
top: 0em;
left: 0em;
content: ' ';
background-color: transparent;
border-top: 10px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
}
width: 0.3em;
height: 1.8em;
/* Or Sizes */
.ui.buttons .or {
width: 5px;
height: 38px;
background-color: transparent;
border-top: 0.6em solid #FFFFFF;
border-bottom: 0.6em solid #FFFFFF;
}
.ui.buttons .or:before {
margin-top: -15px;
margin-left: -15px;
padding-top: 6px;
width: 28px;
height: 28px;
font-style: normal;
font-weight: bold;
}
.ui.buttons .or:after {
top: 0px;
width: 5px;
height: 16px;
}
/* Fluid Or */
.ui.fluid.buttons .or {
width: 0px !important;
width: 0em !important;
}
.ui.fluid.buttons .or:after{
display: none;
}
/* mini */
.ui.mini.buttons .or,
.ui.buttons .mini.or {
height: 19px;
}
.ui.mini.buttons .or:before,
.ui.buttons .mini.or:before {
margin-left: -8px;
margin-top: -6px;
padding-top: 2px;
width: 14px;
height: 14px;
font-size: 9px;
}
.ui.mini.buttons .or:after,
.ui.buttons .mini.or:after {
top: 3px;
width: 4px;
height: 10px;
}
/* tiny */
.ui.tiny.buttons .or,
.ui.buttons .tiny.or {
height: 26px;
}
.ui.tiny.buttons .or:before,
.ui.buttons .tiny.or:before {
margin-left: -11px;
margin-top: -10px;
padding-top: 4px;
width: 20px;
height: 19px;
font-size: 11px;
}
.ui.tiny.buttons .or:after,
.ui.buttons .tiny.or:after {
top: 2px;
width: 5px;
height: 16px;
}
/* small */
.ui.small.buttons .or,
.ui.buttons .small.or {
height: 26px;
}
.ui.small.buttons .or:before,
.ui.buttons .small.or:before {
margin-left: -11px;
margin-top: -10px;
padding-top: 4px;
width: 20px;
height: 19px;
font-size: 11px;
}
.ui.small.buttons .or:after,
.ui.buttons .small.or:after {
top: 2px;
width: 5px;
height: 16px;
}
/* big */
.ui.big.buttons .or,
.ui.buttons .big.or {
}
.ui.big.buttons .or:before,
.ui.buttons .big.or:before {
margin-left: -14px;
margin-top: -8px;
padding-top: 5px;
width: 26px;
height: 25px;
font-size: 14px;
}
.ui.big.buttons .or:after,
.ui.buttons .big.or:after {
top: 5px;
width: 5px;
height: 22px;
}
/* huge */
.ui.huge.buttons .or,
.ui.buttons .huge.or {
width: 6px;
height: 41px;
}
.ui.huge.buttons .or:before,
.ui.buttons .huge.or:before {
margin-left: -15px;
margin-top: -14px;
padding-top: 6px;
width: 30px;
height: 29px;
font-size: 15px;
}
.ui.huge.buttons .or:after,
.ui.buttons .huge.or:after {
top: 6px;
width: 6px;
height: 26px;
}
/*-------------------
Attached

Write Preview
Loading…
Cancel
Save