diff --git a/README.md b/README.md new file mode 100644 index 0000000..f238ae1 --- /dev/null +++ b/README.md @@ -0,0 +1,32 @@ +# Semantic Placeholder + +This repository contains pre-compiled placeholder files using the default themes. This is intended for use in projects that do not need all the bells and whistles of Semantic UI, and want to keep file size to a minimum. + +For the latest changes please see the [Release Notes](https://github.com/Semantic-Org/UI-Placeholder/blob/master/RELEASE-NOTES.md) + +**Special Note** +An update in `2.0.8` has fixed an issue which may have prevented some single component modules from working correctly. Please see notes in [this pull request](https://github.com/Semantic-Org/Semantic-UI/pull/2816). + +If you're looking for the full version of Semantic including all components and build tools [check out the main project repository](https://github.com/Semantic-Org/Semantic-UI/tree/1.0) + +#### To install with Bower +``` +bower install semantic-ui-placeholder +``` + +#### To install with NPM +``` +npm install semantic-ui-placeholder +``` + +#### To install with Meteor +``` +meteor add semantic:ui-placeholder +``` + + +## Addendum + +This element's definitions (required class names, html structures) are available in the [UI Docs](http://www.semantic-ui.com) + +Please consider checking out [all the benefits to theming](http://www.learnsemantic.com/guide/expert.html) before using these stand-alone releases. diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md new file mode 100644 index 0000000..3ba803c --- /dev/null +++ b/RELEASE-NOTES.md @@ -0,0 +1,62 @@ +### Version 2.4.0 - Sep 17, 2018 + +> `2.4.0` includes a new component `placeholder`. To use this component in your existing SUI site, be sure to add `@placeholder: 'default';` to your `theme.config`. You can see an example in `theme.config.example` + +- **Placeholder** - Added `ui placeholder` that can be used to show where content will soon appear. +- **Segment** - Added new `ui placeholder segment` used to reserve space for UI when content is missing or empty. + +### Version 2.2.0 - June 26, 2016 + +- **Dropdown** - Added new convenience method `restore placeholder text` +- **Site** - Added new `@inputColor` and `@inputPlaceholderColor` global variables that now control placeholder text styles across all components. +- **Button/Dropdown** - Button dropdowns using `default text` no longer receive incorrect font styling for placeholder text +- **Visibility** - Using `type: fixed` will now correctly remove all special classes and placeholder content on `destroy` [#3548](https://github.com/Semantic-Org/Semantic-UI/issues/3548) + +### Version 2.1.3 - Sep 03, 2015 + +- **Input** - Fixes typo in focused placeholder text color preventing the value from being used [#2939](https://github.com/Semantic-Org/Semantic-UI/issues/2939) + +#### Features + +- **Dropdown** - Added `get default text` and `get placeholder text` behaviors for returning text values. + +#### Bugs + +- **Dropdown** - Fixes issues with setting "" (empty quote) values when `placeholder: false` is used. Fixes issues with using `clear` and `restore defaults` without placeholders. [#2637](https://github.com/Semantic-Org/Semantic-UI/issues/2637) +- **Form / Input** - Fixes `::placeholder` text color for `ui error input`, modifies form error placeholder color to distinguish from form value error color [#2786](https://github.com/Semantic-Org/Semantic-UI/issues/2786) +- **Dropdown** - When `useLabels: false` placeholder text will now show up when 0 items selected, instead of the text "0 items selected" + +### Version 2.0.0 - June 30, 2015 + +- **Embed** - New embed component allows for responsive iframe embeds that maintain their aspect ratio. Embed can be used with YouTube or Vimeo videos, along with placeholder content to avoid loading third party libraries until a user chooses to interact with the video. +- **Visibility** - Using `.visibility({ type: 'fixed'})` will now automatically add a placeholder element which will swap places with an element when it is attached to the viewport. This should make fixed content drastically simpler. +- **Dropdown** - Dropdown has new `placeholder` setting for setting placeholder text in javascript +- **Form** - Added placeholder color rules for IE, `ms-input-placeholder` +- **Input** - Added placeholder color rules for IE, `ms-input-placeholder` +- **Input** - Fixed `placeholder` color not changing correctly on focus **Thanks @zxfwinder** + +### Version 1.12.1 - April 26, 2015 + +- **Input** - Fixes placeholder text color prefixes for `webkit` **Backport from 2.0** + +### Version 1.8.0 - January 23, 2015 + +- **Dropdown** - Dropdown now stores `placeholder text` (prompt text) as separate from `default text` (text set on page load). You can now reset placeholder conditions using `$('.ui.dropdown').dropdown('clear');`` + +### Version 1.7.0 - January 14, 2015 + +- **Dropdown** - `restore defaults` will now set placeholder styling and remove active element. Added example in docs. + +### Version 1.3.0 - December 17, 2014 + +- **Dropdown** - Search Dropdown now correctly replaces placeholder text when backspacing to empty value + +### Version 0.12.0 - Jan 06, 2014 + +- **Input** - Fixes input placeholder styles to work (accidental regex replace) + +### Version 0.9.0 - Nov 5, 2013 + +- **Form** - Darkens placeholder text color to be more visible + +### Version 0.1.0 - Sep 25, 2013 \ No newline at end of file diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..98789bc --- /dev/null +++ b/bower.json @@ -0,0 +1,29 @@ +{ + "name": "semantic-ui-placeholder", + "description": "Placeholder - Semantic UI", + "homepage": "http://www.semantic-ui.com", + "author": { + "name": "Jack Lukic", + "web": "http://www.jacklukic.com" + }, + "ignore": [ + "docs", + "node", + "server", + "spec", + "src", + "test" + ], + "keywords": [ + "semantic", + "ui", + "css3", + "framework" + ], + "license": [ + "http://semantic-ui.mit-license.org/" + ], + "main": [ + "placeholder.css" + ] +} \ No newline at end of file diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..ece791c --- /dev/null +++ b/composer.json @@ -0,0 +1,19 @@ +{ + "name": "semantic/placeholder", + "description": "Single component release of placeholder", + "homepage": "http://www.semantic-ui.com", + "authors": [{ + "name": "Jack Lukic", + "email": "jacklukic@gmail.com", + "web": "http://www.jacklukic.com", + "role": "Creator" + }], + "keywords": [ + "semantic", + "ui", + "css", + "framework" + ], + "license": "MIT", + "version": "2.4.0" +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..fe283ad --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "semantic-ui-placeholder", + "version": "2.4.0", + "title": "Semantic UI - Placeholder", + "description": "Single component release of placeholder", + "homepage": "http://www.semantic-ui.com", + "author": "Jack Lukic ", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/Semantic-Org/UI-Placeholder.git" + }, + "bugs": { + "url": "https://github.com/Semantic-Org/Semantic-UI/issues" + }, + "devDependencies": {} +} \ No newline at end of file diff --git a/placeholder.css b/placeholder.css new file mode 100644 index 0000000..7539dca --- /dev/null +++ b/placeholder.css @@ -0,0 +1,239 @@ +/*! + * # Semantic UI 2.4.0 - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/*------------------- + Content +--------------------*/ + +.ui.placeholder { + position: static; + overflow: hidden; + -webkit-animation: placeholderShimmer 2s linear; + animation: placeholderShimmer 2s linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + background-color: #FFFFFF; + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.08)), color-stop(15%, rgba(0, 0, 0, 0.15)), color-stop(30%, rgba(0, 0, 0, 0.08))); + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%); + background-size: 1200px 100%; + max-width: 30rem; +} +@-webkit-keyframes placeholderShimmer { + 0% { + background-position: -1200px 0; + } + 100% { + background-position: 1200px 0; + } +} +@keyframes placeholderShimmer { + 0% { + background-position: -1200px 0; + } + 100% { + background-position: 1200px 0; + } +} +.ui.placeholder + .ui.placeholder { + margin-top: 2rem; +} +.ui.placeholder + .ui.placeholder { + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; +} +.ui.placeholder + .ui.placeholder + .ui.placeholder { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} +.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { + -webkit-animation-delay: 0.45s; + animation-delay: 0.45s; +} +.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; +} +.ui.placeholder, +.ui.placeholder > :before, +.ui.placeholder .image.header:after, +.ui.placeholder .line, +.ui.placeholder .line:after { + background-color: #FFFFFF; +} + +/* Image */ +.ui.placeholder .image:not(.header):not(.ui) { + height: 100px; +} +.ui.placeholder .square.image:not(.header) { + height: 0px; + overflow: hidden; + +/* 1/1 aspect ratio */ + padding-top: 100%; +} +.ui.placeholder .rectangular.image:not(.header) { + height: 0px; + overflow: hidden; + +/* 4/3 aspect ratio */ + padding-top: 75%; +} + +/* Lines */ +.ui.placeholder .line { + position: relative; + height: 0.85714286em; +} +.ui.placeholder .line:before, +.ui.placeholder .line:after { + top: 100%; + position: absolute; + content: ''; + background-color: inherit; +} +.ui.placeholder .line:before { + left: 0px; +} +.ui.placeholder .line:after { + right: 0px; +} + +/* Any Lines */ +.ui.placeholder .line { + margin-bottom: 0.5em; +} +.ui.placeholder .line:before, +.ui.placeholder .line:after { + height: 0.5em; +} +.ui.placeholder .line:not(:first-child) { + margin-top: 0.5em; +} + +/* Header Image + 2 Lines */ +.ui.placeholder .header { + position: relative; + overflow: hidden; +} + +/* Line Outdent */ +.ui.placeholder .line:nth-child(1):after { + width: 0%; +} +.ui.placeholder .line:nth-child(2):after { + width: 50%; +} +.ui.placeholder .line:nth-child(3):after { + width: 10%; +} +.ui.placeholder .line:nth-child(4):after { + width: 35%; +} +.ui.placeholder .line:nth-child(5):after { + width: 65%; +} + +/* Header Line 1 & 2*/ +.ui.placeholder .header .line { + margin-bottom: 0.64285714em; +} +.ui.placeholder .header .line:before, +.ui.placeholder .header .line:after { + height: 0.64285714em; +} +.ui.placeholder .header .line:not(:first-child) { + margin-top: 0.64285714em; +} +.ui.placeholder .header .line:after { + width: 20%; +} +.ui.placeholder .header .line:nth-child(2):after { + width: 60%; +} +/* Image Header */ +.ui.placeholder .image.header .line { + margin-left: 3em; +} +.ui.placeholder .image.header .line:before { + width: 0.71428571rem; +} +.ui.placeholder .image.header:after { + display: block; + height: 0.85714286em; + content: ''; + margin-left: 3em; +} + +/* Spacing */ +.ui.placeholder .image .line:first-child, +.ui.placeholder .paragraph .line:first-child, +.ui.placeholder .header .line:first-child { + height: 0.01px; +} +.ui.placeholder .image:not(:first-child):before, +.ui.placeholder .paragraph:not(:first-child):before, +.ui.placeholder .header:not(:first-child):before { + height: 1.42857143em; + content: ''; + display: block; +} + +/* Inverted Content Loader */ +.ui.inverted.placeholder { + background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.08)), color-stop(15%, rgba(255, 255, 255, 0.14)), color-stop(30%, rgba(255, 255, 255, 0.08))); + background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%); + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%); +} +.ui.inverted.placeholder, +.ui.inverted.placeholder > :before, +.ui.inverted.placeholder .image.header:after, +.ui.inverted.placeholder .line, +.ui.inverted.placeholder .line:after { + background-color: #1B1C1D; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Sizes +--------------------*/ + +.ui.placeholder .full.line.line.line:after { + width: 0%; +} +.ui.placeholder .very.long.line.line.line:after { + width: 10%; +} +.ui.placeholder .long.line.line.line:after { + width: 35%; +} +.ui.placeholder .medium.line.line.line:after { + width: 50%; +} +.ui.placeholder .short.line.line.line:after { + width: 65%; +} +.ui.placeholder .very.short.line.line.line:after { + width: 80%; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.placeholder { + max-width: none; +} diff --git a/placeholder.min.css b/placeholder.min.css new file mode 100644 index 0000000..95c215b --- /dev/null +++ b/placeholder.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.placeholder{position:static;overflow:hidden;-webkit-animation:placeholderShimmer 2s linear;animation:placeholderShimmer 2s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;background-color:#fff;background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.08)),color-stop(15%,rgba(0,0,0,.15)),color-stop(30%,rgba(0,0,0,.08)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-image:linear-gradient(to right,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-size:1200px 100%;max-width:30rem}@-webkit-keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}@keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}.ui.placeholder+.ui.placeholder{margin-top:2rem}.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.15s;animation-delay:.15s}.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.3s;animation-delay:.3s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.45s;animation-delay:.45s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.6s;animation-delay:.6s}.ui.placeholder,.ui.placeholder .image.header:after,.ui.placeholder .line,.ui.placeholder .line:after,.ui.placeholder>:before{background-color:#fff}.ui.placeholder .image:not(.header):not(.ui){height:100px}.ui.placeholder .square.image:not(.header){height:0;overflow:hidden;padding-top:100%}.ui.placeholder .rectangular.image:not(.header){height:0;overflow:hidden;padding-top:75%}.ui.placeholder .line{position:relative;height:.85714286em}.ui.placeholder .line:after,.ui.placeholder .line:before{top:100%;position:absolute;content:'';background-color:inherit}.ui.placeholder .line:before{left:0}.ui.placeholder .line:after{right:0}.ui.placeholder .line{margin-bottom:.5em}.ui.placeholder .line:after,.ui.placeholder .line:before{height:.5em}.ui.placeholder .line:not(:first-child){margin-top:.5em}.ui.placeholder .header{position:relative;overflow:hidden}.ui.placeholder .line:nth-child(1):after{width:0%}.ui.placeholder .line:nth-child(2):after{width:50%}.ui.placeholder .line:nth-child(3):after{width:10%}.ui.placeholder .line:nth-child(4):after{width:35%}.ui.placeholder .line:nth-child(5):after{width:65%}.ui.placeholder .header .line{margin-bottom:.64285714em}.ui.placeholder .header .line:after,.ui.placeholder .header .line:before{height:.64285714em}.ui.placeholder .header .line:not(:first-child){margin-top:.64285714em}.ui.placeholder .header .line:after{width:20%}.ui.placeholder .header .line:nth-child(2):after{width:60%}.ui.placeholder .image.header .line{margin-left:3em}.ui.placeholder .image.header .line:before{width:.71428571rem}.ui.placeholder .image.header:after{display:block;height:.85714286em;content:'';margin-left:3em}.ui.placeholder .header .line:first-child,.ui.placeholder .image .line:first-child,.ui.placeholder .paragraph .line:first-child{height:.01px}.ui.placeholder .header:not(:first-child):before,.ui.placeholder .image:not(:first-child):before,.ui.placeholder .paragraph:not(:first-child):before{height:1.42857143em;content:'';display:block}.ui.inverted.placeholder{background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,.08)),color-stop(15%,rgba(255,255,255,.14)),color-stop(30%,rgba(255,255,255,.08)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%);background-image:linear-gradient(to right,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%)}.ui.inverted.placeholder,.ui.inverted.placeholder .image.header:after,.ui.inverted.placeholder .line,.ui.inverted.placeholder .line:after,.ui.inverted.placeholder>:before{background-color:#1b1c1d}.ui.placeholder .full.line.line.line:after{width:0%}.ui.placeholder .very.long.line.line.line:after{width:10%}.ui.placeholder .long.line.line.line:after{width:35%}.ui.placeholder .medium.line.line.line:after{width:50%}.ui.placeholder .short.line.line.line:after{width:65%}.ui.placeholder .very.short.line.line.line:after{width:80%}.ui.fluid.placeholder{max-width:none} \ No newline at end of file