diff --git a/node/docpad.coffee b/node/docpad.coffee index 22ed97c62..07c0560b4 100755 --- a/node/docpad.coffee +++ b/node/docpad.coffee @@ -10,6 +10,7 @@ docpadConfig = { jade: false marked: false paged: false + liveReload: false plugins: handlebars: diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html index 9aca3d57e..2b09a4d6c 100755 --- a/node/src/documents/collections/grid.html +++ b/node/src/documents/collections/grid.html @@ -203,7 +203,12 @@ type : 'UI Collection'

Responsive Grid

-

A grid can be responsive and resize the proportions of its gutters as a browser resolution changes.

+

A grid can be responsive to a browsers width.

+ +
+

+ Semantic UI's responsive grid by default will change the page gutters to increase at 250pixel intervals. +

@@ -304,6 +309,38 @@ type : 'UI Collection'
+
+

Horizontal Alignment

+

A column can be aligned, or "floated", to either the left or right of its row.

+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Cats +
+
+ Abysinnian +
+
+ Sphynx +
+
+
+
+

Vertical Alignment

@@ -313,13 +350,7 @@ type : 'UI Collection'
- Dogs -
-
- Poodle -
-
- Cockerspaniel + Cats
@@ -339,10 +370,7 @@ type : 'UI Collection'
- Dogs -
-
- Poodle + Monkeys
@@ -353,9 +381,6 @@ type : 'UI Collection'
Dogs
-
- Poodle -
@@ -374,10 +399,7 @@ type : 'UI Collection'
- Dogs -
-
- Poodle + Monkeys
@@ -386,10 +408,7 @@ type : 'UI Collection'
- Dogs -
-
- Poodle + Cats
@@ -409,7 +428,7 @@ type : 'UI Collection'
- Dogs + Monkeys
diff --git a/node/src/documents/elements/button.html b/node/src/documents/elements/button.html index ada25d652..6a19f5d2d 100755 --- a/node/src/documents/elements/button.html +++ b/node/src/documents/elements/button.html @@ -212,6 +212,18 @@ type : 'UI Element'

Plural Variations

Singular variations can be applied to groups to infer all elements share the same quality

+ + +
+

Vertical

+

Groups can be formatted to appear vertically

+
+
Top
+
Middle
+
Bottom
+
+
+

Icon

Groups can be formatted as icon toolbars

diff --git a/node/src/files/components/semantic/src/collections/grid.css b/node/src/files/components/semantic/src/collections/grid.css index 4c9185815..9be7e4bb8 100644 --- a/node/src/files/components/semantic/src/collections/grid.css +++ b/node/src/files/components/semantic/src/collections/grid.css @@ -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; +} /*---------------------- diff --git a/node/src/files/components/semantic/src/collections/menu.css b/node/src/files/components/semantic/src/collections/menu.css index dea7c7ef9..c926e546f 100644 --- a/node/src/files/components/semantic/src/collections/menu.css +++ b/node/src/files/components/semantic/src/collections/menu.css @@ -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; } /*-------------- diff --git a/node/src/files/components/semantic/src/elements/button.css b/node/src/files/components/semantic/src/elements/button.css index 42652a2a9..321d88794 100644 --- a/node/src/files/components/semantic/src/elements/button.css +++ b/node/src/files/components/semantic/src/elements/button.css @@ -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 diff --git a/node/src/files/components/semantic/src/elements/label.css b/node/src/files/components/semantic/src/elements/label.css index 926f3a209..ca2374091 100644 --- a/node/src/files/components/semantic/src/elements/label.css +++ b/node/src/files/components/semantic/src/elements/label.css @@ -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; diff --git a/node/src/files/components/semantic/src/modules/checkbox.css b/node/src/files/components/semantic/src/modules/checkbox.css index 59321353e..f24a1bdd9 100644 --- a/node/src/files/components/semantic/src/modules/checkbox.css +++ b/node/src/files/components/semantic/src/modules/checkbox.css @@ -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; diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index b04595886..077b6a996 100755 --- a/node/src/files/javascript/semantic.js +++ b/node/src/files/javascript/semantic.js @@ -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' }) diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 5713337ff..dc82feec6 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -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 { diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index 54dc1000b..d0c529b10 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -120,6 +120,7 @@ +
-
Menu
+
+ + Menu +
<%- @content %> diff --git a/src/collections/grid.css b/src/collections/grid.css index bf39acdc7..9be7e4bb8 100755 --- a/src/collections/grid.css +++ b/src/collections/grid.css @@ -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; +} /*---------------------- diff --git a/src/collections/menu.css b/src/collections/menu.css index a04bb4e7b..c926e546f 100755 --- a/src/collections/menu.css +++ b/src/collections/menu.css @@ -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; } /*-------------- diff --git a/src/elements/button.css b/src/elements/button.css index 42652a2a9..321d88794 100755 --- a/src/elements/button.css +++ b/src/elements/button.css @@ -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