diff --git a/src/_site/views/advertisement.overrides b/src/_site/views/ad.overrides similarity index 100% rename from src/_site/views/advertisement.overrides rename to src/_site/views/ad.overrides diff --git a/src/_site/views/advertisement.variables b/src/_site/views/ad.variables similarity index 100% rename from src/_site/views/advertisement.variables rename to src/_site/views/ad.variables diff --git a/src/definitions/views/ad.less b/src/definitions/views/ad.less new file mode 100644 index 000000000..103e7bd5b --- /dev/null +++ b/src/definitions/views/ad.less @@ -0,0 +1,266 @@ + /* + * # Semantic - Ad + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'view'; +@element : 'ad'; + +@import '../../theme.config'; + +/******************************* + Advertisement +*******************************/ + +.ui.ad { + display: block; + overflow: @overflow; + margin: @margin; +} + +.ui.ad:first-child { + margin: 0em; +} + +.ui.ad:last-child { + margin: 0em; +} + +.ui.ad iframe { + margin: 0em; + padding: 0em; + border: none; + overflow: hidden; +} + +/*-------------- + Common +---------------*/ + +/* Leaderboard */ +.ui.leaderboard.ad { + width: 728px; + height: 90px; +} + +/* Medium Rectangle */ +.ui[class*="medium rectangle"].ad { + width: 300px; + height: 250px; +} + +/* Large Rectangle */ +.ui[class*="large rectangle"].ad { + width: 336px; + height: 280px; +} +/* Half Page */ +.ui[class*="half page"].ad { + width: 300px; + height: 600px; +} + +/*-------------- + Square +---------------*/ + +/* Square */ +.ui.square.ad { + width: 250px; + height: 250px; +} + +/* Small Square */ +.ui[class*="small square"].ad { + width: 200px; + height: 200px; +} + +/*-------------- + Rectangle +---------------*/ + +/* Small Rectangle */ +.ui[class*="small rectangle"].ad { + width: 180px; + height: 150px; +} + +/* Vertical Rectangle */ +.ui[class*="vertical rectangle"].ad { + width: 240px; + height: 400px; +} + +/*-------------- + Button +---------------*/ + +.ui.button.ad { + width: 120px; + height: 90px; +} +.ui[class*="square button"].ad { + width: 125px; + height: 125px; +} +.ui[class*="small button"].ad { + width: 120px; + height: 60px; +} + +/*-------------- + Skyscrapers +---------------*/ + +/* Skyscraper */ +.ui.skyscraper.ad { + width: 120px; + height: 600px; +} + +/* Wide Skyscraper */ +.ui[class*="wide skyscraper"].ad { + width: 160px; +} + +/*-------------- + Banners +---------------*/ + +/* Banner */ +.ui.banner.ad { + width: 468px; + height: 60px; +} + +/* Vertical Banner */ +.ui[class*="vertical banner"].ad { + width: 120px; + height: 240px; +} + +/* Top Banner */ +.ui[class*="top banner"].ad { + width: 930px; + height: 180px; +} + +/* Half Banner */ +.ui[class*="half banner"].ad { + width: 234px; + height: 60px; +} + +/*-------------- + Boards +---------------*/ + +/* Leaderboard */ +.ui[class*="large leaderboard"].ad { + width: 970px; + height: 90px; +} + +/* Billboard */ +.ui.billboard.ad { + width: 970px; + height: 250px; +} + +/*-------------- + Panorama +---------------*/ + +/* Panorama */ +.ui.panorama.ad { + width: 980px; + height: 120px; +} + +/*-------------- + Netboard +---------------*/ + +/* Netboard */ +.ui.netboard.ad { + width: 580px; + height: 400px; +} + + + +/*-------------- + Mobile +---------------*/ + +/* Large Mobile Banner */ +.ui[class*="large mobile banner"].ad { + width: 320px; + height: 100px; +} + +/* Mobile Leaderboard */ +.ui[class*="mobile leaderboard"].ad { + width: 320px; + height: 50px; +} + +/******************************* + Types +*******************************/ + +/* Mobile Sizes */ +.ui.mobile.ad { + display: none; +} + +@media only screen and (max-width : (@tabletBreakpoint - 1)) { + .ui.mobile.ad { + display: block; + } +} + + +/******************************* + Variations +*******************************/ + +.ui.centered.ad { + margin-left: auto; + margin-right: auto; +} + +.ui.test.ad { + position: relative; + background: @testBackground; +} +.ui.test.ad:after { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + text-align: center; + transform: translateX(-50%) translateY(-50%); + + content: @testText; + color: @testColor; + font-size: @testFontSize; + font-weight: @testFontWeight; +} +.ui.mobile.test.ad:after { + font-size: @testMobileFontSize; +} +.ui.test.ad[data-text]:after { + content: attr(data-text); +} \ No newline at end of file diff --git a/src/definitions/views/advertisement.less b/src/definitions/views/advertisement.less index 7b5d9c1c8..c3300d8e4 100644 --- a/src/definitions/views/advertisement.less +++ b/src/definitions/views/advertisement.less @@ -14,7 +14,7 @@ *******************************/ @type : 'view'; -@element : 'advertisement'; +@element : 'ad'; @import '../../theme.config'; @@ -22,11 +22,11 @@ Advertisement *******************************/ -.ui.advertisement { +.ui.ad { overflow: hidden; } -.ui.advertisement iframe { +.ui.ad iframe { margin: 0em; padding: 0em; border: none; @@ -38,24 +38,24 @@ ---------------*/ /* Leaderboard */ -.ui.leaderboard.advertisement { +.ui.leaderboard.ad { width: 728px; height: 90px; } /* Medium Rectangle */ -.ui[class*="medium rectangle"].advertisement { +.ui[class*="medium rectangle"].ad { width: 300px; height: 250px; } /* Large Rectangle */ -.ui[class*="large rectangle"].advertisement { +.ui[class*="large rectangle"].ad { width: 336px; height: 280px; } /* Half Page */ -.ui[class*="half page"].advertisement { +.ui[class*="half page"].ad { width: 300px; height: 600px; } @@ -65,13 +65,13 @@ ---------------*/ /* Square */ -.ui.square.advertisement { +.ui.square.ad { width: 250px; height: 250px; } /* Small Square */ -.ui[class*="small square"].advertisement { +.ui[class*="small square"].ad { width: 200px; height: 200px; } @@ -81,13 +81,13 @@ ---------------*/ /* Small Rectangle */ -.ui[class*="small rectangle"].advertisement { +.ui[class*="small rectangle"].ad { width: 180px; height: 150px; } /* Vertical Rectangle */ -.ui[class*="vertical rectangle"].advertisement { +.ui[class*="vertical rectangle"].ad { width: 240px; height: 400px; } @@ -96,15 +96,15 @@ Button ---------------*/ -.ui.button.advertisement { +.ui.button.ad { width: 120px; height: 90px; } -.ui[class*="square button"].advertisement { +.ui[class*="square button"].ad { width: 125px; height: 125px; } -.ui[class*="small button"].advertisement { +.ui[class*="small button"].ad { width: 120px; height: 60px; } @@ -114,7 +114,7 @@ ---------------*/ /* Panorama */ -.ui.panorama.advertisement { +.ui.panorama.ad { width: 980px; height: 120px; } @@ -124,7 +124,7 @@ ---------------*/ /* Netboard */ -.ui.netboard.advertisement { +.ui.netboard.ad { width: 580px; height: 400px; } @@ -135,13 +135,13 @@ ---------------*/ /* Skyscraper */ -.ui.skyscraper.advertisement { +.ui.skyscraper.ad { width: 120px; height: 600px; } /* Wide Skyscraper */ -.ui[class*="wide skyscraper"].advertisement { +.ui[class*="wide skyscraper"].ad { width: 160px; } @@ -150,25 +150,25 @@ ---------------*/ /* Banner */ -.ui.banner.advertisement { +.ui.banner.ad { width: 468px; height: 60px; } /* Vertical Banner */ -.ui[class*="vertical banner"].advertisement { +.ui[class*="vertical banner"].ad { width: 120px; height: 240px; } /* Top Banner */ -.ui[class*="top banner"].advertisement { +.ui[class*="top banner"].ad { width: 930px; height: 180px; } /* Half Banner */ -.ui[class*="half banner"].advertisement { +.ui[class*="half banner"].ad { width: 234px; height: 60px; } @@ -178,13 +178,13 @@ ---------------*/ /* Leaderboard */ -.ui[class*="large leaderboard"].advertisement { +.ui[class*="large leaderboard"].ad { width: 970px; height: 90px; } /* Billboard */ -.ui.billboard.advertisement { +.ui.billboard.ad { width: 970px; height: 250px; } @@ -194,13 +194,13 @@ ---------------*/ /* Large Mobile Banner */ -.ui[class*="large mobile banner"].advertisement { +.ui[class*="large mobile banner"].ad { width: 320px; height: 100px; } /* Mobile Leaderboard */ -.ui[class*="mobile leaderboard"].advertisement { +.ui[class*="mobile leaderboard"].ad { width: 320px; height: 50px; } @@ -210,12 +210,12 @@ *******************************/ /* Mobile Sizes */ -.ui.mobile.advertisement { +.ui.mobile.ad { display: none; } @media only screen and (max-width : (@tabletBreakpoint - 1)) { - .ui.mobile.advertisement { + .ui.mobile.ad { display: block; } } @@ -225,15 +225,15 @@ Variations *******************************/ -.ui.centered.advertisement { +.ui.centered.ad { margin-left: auto; margin-right: auto; } -.ui.test.advertisement { +.ui.test.ad { background: @testBackground; } -.ui.test.advertisement:after { +.ui.test.ad:after { position: absolute; top: 50%; left: 50%; @@ -241,6 +241,8 @@ content: @testText; color: @testColor; } -.ui.test.advertisement[data-text]:after { +.ui.test.ad[data-text]:after { content: attr(data-text); -} \ No newline at end of file +} + +.loadUIOverrides(); diff --git a/src/theme.config.example b/src/theme.config.example index 0de61b11e..db96ffbcf 100755 --- a/src/theme.config.example +++ b/src/theme.config.example @@ -31,60 +31,60 @@ */ /* Global */ -@site : 'default'; -@reset : 'default'; +@site : 'default'; +@reset : 'default'; /* Elements */ -@button : 'default'; -@container : 'default'; -@icon : 'default'; -@divider : 'default'; -@flag : 'default'; -@header : 'default'; -@image : 'default'; -@input : 'default'; -@label : 'default'; -@list : 'default'; -@loader : 'default'; -@progress : 'default'; -@rail : 'default'; -@reveal : 'default'; -@segment : 'default'; -@step : 'default'; +@button : 'default'; +@container : 'default'; +@icon : 'default'; +@divider : 'default'; +@flag : 'default'; +@header : 'default'; +@image : 'default'; +@input : 'default'; +@label : 'default'; +@list : 'default'; +@loader : 'default'; +@progress : 'default'; +@rail : 'default'; +@reveal : 'default'; +@segment : 'default'; +@step : 'default'; /* Collections */ -@breadcrumb : 'default'; -@form : 'default'; -@grid : 'default'; -@menu : 'default'; -@message : 'default'; -@table : 'default'; +@breadcrumb : 'default'; +@form : 'default'; +@grid : 'default'; +@menu : 'default'; +@message : 'default'; +@table : 'default'; /* Modules */ -@accordion : 'default'; -@chatroom : 'default'; -@checkbox : 'default'; -@dimmer : 'default'; -@dropdown : 'default'; -@modal : 'default'; -@nag : 'default'; -@popup : 'default'; -@rating : 'default'; -@search : 'default'; -@shape : 'default'; -@sidebar : 'default'; -@sticky : 'default'; -@tab : 'default'; -@transition : 'default'; -@video : 'default'; +@accordion : 'default'; +@chatroom : 'default'; +@checkbox : 'default'; +@dimmer : 'default'; +@dropdown : 'default'; +@modal : 'default'; +@nag : 'default'; +@popup : 'default'; +@rating : 'default'; +@search : 'default'; +@shape : 'default'; +@sidebar : 'default'; +@sticky : 'default'; +@tab : 'default'; +@transition : 'default'; +@video : 'default'; /* Views */ -@advertisement : 'default'; -@card : 'default'; -@comment : 'default'; -@feed : 'default'; -@item : 'default'; -@statistic : 'default'; +@ad : 'default'; +@card : 'default'; +@comment : 'default'; +@feed : 'default'; +@item : 'default'; +@statistic : 'default'; /******************************* diff --git a/src/themes/default/views/advertisement.overrides b/src/themes/default/views/ad.overrides similarity index 100% rename from src/themes/default/views/advertisement.overrides rename to src/themes/default/views/ad.overrides diff --git a/src/themes/default/views/ad.variables b/src/themes/default/views/ad.variables new file mode 100644 index 000000000..87650025e --- /dev/null +++ b/src/themes/default/views/ad.variables @@ -0,0 +1,13 @@ +/******************************* + Advertisement +*******************************/ + +@margin: 1em 0em; +@overflow: hidden; + +@testBackground: @lightBlack; +@testColor: @white; +@testFontWeight: bold; +@testText: 'Ad'; +@testFontSize: 1em; +@testMobileFontSize: 0.85714em; \ No newline at end of file diff --git a/src/themes/default/views/advertisement.variables b/src/themes/default/views/advertisement.variables deleted file mode 100644 index 50e9e38f8..000000000 --- a/src/themes/default/views/advertisement.variables +++ /dev/null @@ -1,7 +0,0 @@ -/******************************* - Advertisement -*******************************/ - -@testBackground: @grey; -@testColor: @white; -@testText: 'Ad'; \ No newline at end of file