From d953c5369e10a83c46aead2835d2e07b97daaa4e Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 13 Jan 2014 11:08:49 -0500 Subject: [PATCH] Adds site definition, adds button margins, fixes and new variables --- src/elements/button.less | 42 +- src/elements/divider.less | 10 +- src/reset.less | 406 +++++++++++++++++++ src/site.less | 74 ++++ src/themes/basic/elements/button.variables | 2 +- src/themes/default/elements/button.variables | 2 +- src/themes/default/elements/icon.overrides | 1 + src/themes/default/global.variables | 13 +- 8 files changed, 535 insertions(+), 15 deletions(-) create mode 100755 src/reset.less create mode 100755 src/site.less diff --git a/src/elements/button.less b/src/elements/button.less index 8eaef20f5..7c64d663c 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -35,7 +35,7 @@ background-color: @backgroundColor; color: @textColor; - margin: 0em; + margin: @margin; padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); font-family: @fontFamily; @@ -145,7 +145,7 @@ Disabled --------------------*/ -.ui..buttons .disabled.button, +.ui.buttons .disabled.button, .ui.disabled.button, .ui.disabled.button:hover, .ui.disabled.button.active { @@ -265,6 +265,7 @@ background-color: @primaryColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.primary.buttons .button:hover, .ui.primary.button:hover { @@ -294,6 +295,7 @@ background-color: @secondaryColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.secondary.buttons .button:hover, .ui.secondary.button:hover { @@ -323,6 +325,7 @@ background-color: @facebookColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.facebook.button:hover { background-color: @facebookHoverColor; @@ -340,6 +343,7 @@ background-color: @twitterColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.twitter.button:hover { background-color: @twitterHoverColor; @@ -357,6 +361,7 @@ background-color: @googlePlusColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.google.plus.button:hover { background-color: @googlePlusHoverColor; @@ -391,6 +396,7 @@ background-color: @youtubeColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.youtube.button:hover { background-color: @youtubeHoverColor; @@ -408,6 +414,7 @@ background-color: @instagramColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.instagram.button:hover { background-color: @instagramHoverColor; @@ -425,6 +432,7 @@ background-color: @pinterestColor; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.pinterest.button:hover { background-color: @pinterestHoverColor; @@ -441,6 +449,7 @@ .ui.vk.button { background-color: #4D7198; color: #FFFFFF; + box-shadow: none; } .ui.vk.button:hover { background-color: #537AA5; @@ -607,6 +616,8 @@ .ui.icon.button > .icon { opacity: @iconButtonOpacity; margin: 0em; +} +.ui.icon.buttons .button > .icon { vertical-align: top; } @@ -624,14 +635,14 @@ font-weight: normal; text-transform: none; text-shadow: none !important; - padding: @verticalPadding @horizontalPadding !important; - box-shadow: 0px 0px 0px 1px @borderColor inset; + /* padding: @verticalPadding @horizontalPadding !important; */ + box-shadow: 0px 0px 0px 1px @borderColor; } .ui.basic.labeled.icon.button > .icon { padding-top: (@verticalPadding + 0.05em) !important; } .ui.basic.buttons { - box-shadow: 0px 0px 0px 1px @borderColor inset; + box-shadow: 0px 0px 0px 1px @borderColor; border-radius: @borderRadius; } @@ -639,19 +650,19 @@ .ui.basic.button:hover { background-image: none; color: @selectedTextColor !important; - box-shadow: @selectedBorderColor inset; + box-shadow: @selectedBorderColor; } .ui.basic.buttons .button:active, .ui.basic.button:active { background-color: rgba(0, 0, 0, 0.02) !important; color: @selectedTextColor !important; - box-shadow: 0px 0px 0px 1px @borderColor inset; + box-shadow: 0px 0px 0px 1px @borderColor; } .ui.basic.buttons .button.active, .ui.basic.button.active { background-color: @transparentBlack !important; color: @selectedTextColor; - box-shadow: @selectedBorderColor inset; + box-shadow: @selectedBorderColor; } .ui.basic.buttons .button.active:hover, .ui.basic.button.active:hover { @@ -674,7 +685,7 @@ .ui.basic.inverted.button:active { background-color: @transparentWhite !important; color: #FFFFFF !important; - box-shadow: @selectedWhiteBorderColor inset !important; + box-shadow: @selectedWhiteBorderColor !important; } .ui.basic.inverted.buttons .button.active, .ui.basic.inverted.button.active { @@ -795,6 +806,7 @@ .ui.attached.button { display: block; + margin: 0em; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; } .ui.attached.top.button { @@ -1055,6 +1067,7 @@ background-color: @black; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.black.buttons .button:hover, .ui.black.button:hover { @@ -1083,6 +1096,7 @@ background-color: @blue; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.blue.buttons .button:hover, .ui.blue.button:hover { @@ -1111,6 +1125,7 @@ background-color: @green; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.green.buttons .button:hover, .ui.green.button:hover { @@ -1139,6 +1154,7 @@ background-color: @orange; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.orange.buttons .button:hover, .ui.orange.button:hover { @@ -1167,6 +1183,7 @@ background-color: @pink; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.pink.buttons .button:hover, .ui.pink.button:hover { @@ -1195,6 +1212,7 @@ background-color: @purple; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.purple.buttons .button:hover, .ui.purple.button:hover { @@ -1223,6 +1241,7 @@ background-color: @red; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.red.buttons .button:hover, .ui.red.button:hover { @@ -1251,6 +1270,7 @@ background-color: @teal; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.teal.buttons .button:hover, .ui.teal.button:hover { @@ -1279,6 +1299,7 @@ background-color: @yellow; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.yellow.buttons .button:hover, .ui.yellow.button:hover { @@ -1310,6 +1331,7 @@ background-color: @positiveColor !important; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.positive.buttons .button:hover, .ui.positive.button:hover, @@ -1343,6 +1365,7 @@ background-color: @negativeColor !important; color: @invertedTextColor; text-shadow: @invertedTextShadow; + box-shadow: none; } .ui.negative.buttons .button:hover, .ui.negative.button:hover, @@ -1387,6 +1410,7 @@ } .ui.buttons .button { + margin: 0em; float: left; border-radius: 0em; } diff --git a/src/elements/divider.less b/src/elements/divider.less index e2775cebd..45d27b01c 100755 --- a/src/elements/divider.less +++ b/src/elements/divider.less @@ -148,10 +148,18 @@ /******************************* - Variations + Variations *******************************/ +/*-------------- + Hidden +---------------*/ + +.ui.hidden.divider { + border-color: transparent; +} + /*-------------- Inverted ---------------*/ diff --git a/src/reset.less b/src/reset.less new file mode 100755 index 000000000..562891ab8 --- /dev/null +++ b/src/reset.less @@ -0,0 +1,406 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/src/site.less b/src/site.less new file mode 100755 index 000000000..945c53d5c --- /dev/null +++ b/src/site.less @@ -0,0 +1,74 @@ +@import "themes/default/global.variables"; +@import "reset.less"; + +/******************************* + Page +*******************************/ + +html, +body { + font-size: @fontSize; +} + +body { + background: @bodyBackground; + font-family: @fontFamily; + margin: 0px; + padding: 0px; + color: #555555; + min-width: 320px; +} + +/******************************* + Text +*******************************/ + +h1, +h2, +h3, +h4, +h5 { + margin: 1em 0em 1rem; + padding: 0em; +} + +p { + margin: 1em 0em; +} +p:first-child { + margin-top: 0em; +} +p:last-child { + margin-bottom: 0em; +} + +/*------------------- + Links +--------------------*/ + +a { + color: @linkColor; + text-decoration: @linkUnderline; +} +a:hover { + color: @linkHoverColor; +} + + +/******************************* + Highlighting +*******************************/ + +::-webkit-selection { + background-color: @highlightBackground; + color: @highlightColor; +} +::-moz-selection { + background-color: @highlightBackground; + color: @highlightColor; +} +::selection { + background-color: @highlightBackground; + color: @highlightColor; +} + diff --git a/src/themes/basic/elements/button.variables b/src/themes/basic/elements/button.variables index b1756b696..651b71753 100755 --- a/src/themes/basic/elements/button.variables +++ b/src/themes/basic/elements/button.variables @@ -9,7 +9,7 @@ @borderRadius: 0.25em; -@backgroundColor: #E0E0E0; +@backgroundColor: #EEEEEE; @backgroundImage: none; @boxShadow: none; diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables index 087597e84..c4ffde2cc 100755 --- a/src/themes/default/elements/button.variables +++ b/src/themes/default/elements/button.variables @@ -14,7 +14,7 @@ Button Variables --------------------*/ -/* Button Variables */ +@margin: 0.25em 0em; @textTransform: uppercase; @fontWeight: bold; @textColor: rgba(0, 0, 0, 0.6); diff --git a/src/themes/default/elements/icon.overrides b/src/themes/default/elements/icon.overrides index 567be9acc..404e91962 100755 --- a/src/themes/default/elements/icon.overrides +++ b/src/themes/default/elements/icon.overrides @@ -394,6 +394,7 @@ i.icon.left { } /* right side icons */ +i.icon.download, i.icon.search, i.icon.right { width: auto; diff --git a/src/themes/default/global.variables b/src/themes/default/global.variables index 957a0400c..3e460a472 100755 --- a/src/themes/default/global.variables +++ b/src/themes/default/global.variables @@ -13,8 +13,16 @@ Page --------------------*/ -@bodyColor : #FCFCFC; -@fontSize : 15px; +@bodyBackground : #FCFCFC; +@fontSize : 15px; +@textColor : rgba(0, 0, 0, 0.7); + +@linkColor : #009FDA; +@linkUnderline : none; +@linkHoverColor : lighten( @linkColor, 5); + +@highlightBackground : #FFFFCC; +@highlightColor : @textColor; /*------------------- Fonts @@ -90,7 +98,6 @@ --------------------*/ @darkTextColor : rgba(0, 0, 0, 0.85); -@textColor : rgba(0, 0, 0, 0.7); @lightTextColor : rgba(0, 0, 0, 0.4); @invertedTextColor : rgba(255, 255, 255, 1);