Modify advertisement to be called 'ad'

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);
+}

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);
-}
+}
+
+.loadUIOverrides();

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';
 
 
 /*******************************

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;

src/themes/default/views/advertisement.variables

@@ -1,7 +0,0 @@
-/*******************************
-          Advertisement
-*******************************/
-
-@testBackground: @grey;
-@testColor: @white;
-@testText: 'Ad';