active_admin_pro 0.1.5 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 53549b29df5e7a49b48e73a627b27fe3ef7d98cc
-  data.tar.gz: cfd405801d7ff86d43c240a64ddf106f3e0d7f55
+  metadata.gz: 39d6a621bc2fa55ca47e8c1b172b0ed468a9300b
+  data.tar.gz: 6f497b8a8b7ab7eeb6115013fda4d5b2bcb7c24a
 SHA512:
-  metadata.gz: da9d320af7cd840b8799bc133c86defe317be059d3f7ccc779704e4a37bd82e24485e120233a4baff3c7a3724b2b7768d88ed9cac3ff91e796333d7d6e528b41
-  data.tar.gz: eee0f1ccb0d26b2a7c15e481d4915e9fdf86467ee72afb2b0e26d8aade9c76db7ac43f6dec746247b750141e4135baf02a1c1217e5cc5cb1da6051bc2b316362
+  metadata.gz: 82ae43471cfd6eaed7911faa980b333b7a96543b25b3479d952a439d869552ab1ac6cd9ad4095fd46536f4bd83668a528065df7a815707cbac9e95f118ff362e
+  data.tar.gz: 030e64520e8f4409f3d50330702f4be213a14cf333b831fafbe029fc4a0097a60a7a5d2e1b1f319a6ee7b079979231468cf933d1165424ad15fd9439946d4c86

data/app/assets/javascripts/active_admin_pro/components/autocomplete_input.js

@@ -0,0 +1,53 @@
+//= require awesomplete
+//= require jquery.scrollTo
+
+/* globals Awesomplete */
+(function() {
+  "use strict";
+
+  // Enable auto-complete input fields.
+  // @see http://leaverou.github.io/awesomplete/
+  App.register('component').enter(function() {
+    $('input.autocomplete').each(function() {
+      var autocomplete = new Awesomplete(this, { maxItems: 9999 });
+
+      var input = $(this);
+      var list = $(input.siblings('ul'));
+      list.css('width', input.outerWidth());
+
+      // Open the auto complete list when the input is focused
+      input.focus(function() {
+        autocomplete.evaluate();
+        autocomplete.open();
+      });
+
+      // Scroll list to top when opened
+      input.bind('awesomplete-open', function() {
+        list.scrollTo(0);
+      });
+
+      // Scroll list up or down to the selected element
+      input.bind('awesomplete-highlight', function(e) {
+        var item = $(list.find('li[aria-selected="true"]'));
+        if (item === undefined || item === null || item.position() === undefined) { return; }
+
+        // Gather the list and item heights so we can scroll to the item
+        var itemHeight = item.height();
+        var itemTop = item.position().top;
+        var listHeight = list.height();
+        var itemCount = listHeight / itemHeight;
+
+        // Scroll the item to the bottom or top of the list if not visible
+        if (itemTop >= listHeight) {
+          list.scrollTo(item, {
+            offset: {
+              top: -itemHeight * (itemCount - 1)
+            }
+          });
+        } else if (itemTop < 0) {
+          list.scrollTo(item);
+        }
+      });
+    });
+  });
+})();

data/app/assets/stylesheets/active_admin_pro/components/autocomplete_input.scss

@@ -0,0 +1,57 @@
+$autocomplete-background-color: #fff;
+$autocomplete-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+$autocomplete-highlight-color: #000;
+$autocomplete-item-height: 40px;
+$autocomplete-max-items: 5;
+$autocomplete-selected-background-color: $accent-color;
+$autocomplete-selected-color: text-color($autocomplete-selected-background-color);
+
+.input.autocomplete {
+  z-index: 5;
+}
+
+.awesomplete {
+  position: relative;
+
+  ul {
+    background-color: $autocomplete-background-color;
+    box-shadow: $autocomplete-box-shadow;
+    left: 2px;
+    list-style-type: none;
+    margin: 0;
+    max-height: $autocomplete-item-height * $autocomplete-max-items;
+    overflow-y: auto;
+    padding: 0;
+    position: absolute;
+    top: 100%;
+    z-index: 6;
+  }
+
+  li {
+    cursor: pointer;
+    height: $autocomplete-item-height;
+    line-height: $autocomplete-item-height;
+    padding: 0 0.5em;
+  }
+
+  mark {
+    background-color: transparent;
+    color: $autocomplete-highlight-color;
+    font-weight: bold;
+  }
+
+  li:hover,
+  li[aria-selected="true"] {
+    background-color: $autocomplete-selected-background-color;
+    color: $autocomplete-selected-color;
+
+    mark {
+      color: $autocomplete-selected-color;
+    }
+  }
+
+  .visually-hidden {
+    position: absolute;
+    visibility: hidden;
+  }
+}

data/app/inputs/autocomplete_input.rb

@@ -0,0 +1,5 @@
+class AutocompleteInput < Formtastic::Inputs::StringInput
+  def input_html_options
+    super.merge(class: "autocomplete")
+  end
+end

data/lib/active_admin_pro/summernote_image/summernote_image.rb

@@ -25,7 +25,7 @@ ActiveAdmin.register ActiveAdminPro::SummernoteImage do
       file_ext = File.extname(@file.original_filename)
       file_base = File.basename(@file.original_filename, file_ext)
       time = Time.now.to_i
-      "aap/si/#{file_base}_#{time}#{file_ext}"
+      "aap/si/#{file_base.parameterize}-#{time}#{file_ext}"
     end
 
     def google_storage_bucket

data/lib/active_admin_pro/version.rb

@@ -1,3 +1,3 @@
 module ActiveAdminPro
-  VERSION = "0.1.5".freeze
+  VERSION = "0.1.6".freeze
 end

data/vendor/assets/javascripts/awesomplete.js

@@ -0,0 +1,392 @@
+/**
+ * Simple, lightweight, usable local autocomplete library for modern browsers
+ * Because there weren’t enough autocomplete scripts in the world? Because I’m completely insane and have NIH syndrome? Probably both. :P
+ * @author Lea Verou http://leaverou.github.io/awesomplete
+ * MIT license
+ */
+
+(function () {
+
+var _ = function (input, o) {
+	var me = this;
+
+	// Setup
+
+	this.input = $(input);
+	this.input.setAttribute("autocomplete", "off");
+	this.input.setAttribute("aria-autocomplete", "list");
+
+	o = o || {};
+
+	configure.call(this, {
+		minChars: 2,
+		maxItems: 10,
+		autoFirst: false,
+		filter: _.FILTER_CONTAINS,
+		sort: _.SORT_BYLENGTH,
+		item: function (text, input) {
+			var html = input === '' ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>");
+			return $.create("li", {
+				innerHTML: html,
+				"aria-selected": "false"
+			});
+		},
+		replace: function (text) {
+			this.input.value = text;
+		}
+	}, o);
+
+	this.index = -1;
+
+	// Create necessary elements
+
+	this.container = $.create("div", {
+		className: "awesomplete",
+		around: input
+	});
+
+	this.ul = $.create("ul", {
+		hidden: "",
+		inside: this.container
+	});
+
+	this.status = $.create("span", {
+		className: "visually-hidden",
+		role: "status",
+		"aria-live": "assertive",
+		"aria-relevant": "additions",
+		inside: this.container
+	});
+
+	// Bind events
+
+	$.bind(this.input, {
+		"input": this.evaluate.bind(this),
+		"blur": this.close.bind(this),
+		"keydown": function(evt) {
+			var c = evt.keyCode;
+
+			// If the dropdown `ul` is in view, then act on keydown for the following keys:
+			// Enter / Esc / Up / Down
+			if(me.opened) {
+				if (c === 13 && me.selected) { // Enter
+					evt.preventDefault();
+					me.select();
+				}
+				else if (c === 27) { // Esc
+					me.close();
+				}
+				else if (c === 38 || c === 40) { // Down/Up arrow
+					evt.preventDefault();
+					me[c === 38? "previous" : "next"]();
+				}
+			}
+		}
+	});
+
+	$.bind(this.input.form, {"submit": this.close.bind(this)});
+
+	$.bind(this.ul, {"mousedown": function(evt) {
+		var li = evt.target;
+
+		if (li !== this) {
+
+			while (li && !/li/i.test(li.nodeName)) {
+				li = li.parentNode;
+			}
+
+			if (li && evt.button === 0) {  // Only select on left click
+				me.select(li);
+			}
+		}
+	}});
+
+	if (this.input.hasAttribute("list")) {
+		this.list = "#" + input.getAttribute("list");
+		input.removeAttribute("list");
+	}
+	else {
+		this.list = this.input.getAttribute("data-list") || o.list || [];
+	}
+
+	_.all.push(this);
+};
+
+_.prototype = {
+	set list(list) {
+		if (Array.isArray(list)) {
+			this._list = list;
+		}
+		else if (typeof list === "string" && list.indexOf(",") > -1) {
+				this._list = list.split(/\s*,\s*/);
+		}
+		else { // Element or CSS selector
+			list = $(list);
+
+			if (list && list.children) {
+				this._list = slice.apply(list.children).map(function (el) {
+					return el.textContent.trim();
+				});
+			}
+		}
+
+		if (document.activeElement === this.input) {
+			this.evaluate();
+		}
+	},
+
+	get selected() {
+		return this.index > -1;
+	},
+
+	get opened() {
+		return this.ul && this.ul.getAttribute("hidden") == null;
+	},
+
+	close: function () {
+		this.ul.setAttribute("hidden", "");
+		this.index = -1;
+
+		$.fire(this.input, "awesomplete-close");
+	},
+
+	open: function () {
+		this.ul.removeAttribute("hidden");
+
+		if (this.autoFirst && this.index === -1) {
+			this.goto(0);
+		}
+
+		$.fire(this.input, "awesomplete-open");
+	},
+
+	next: function () {
+		var count = this.ul.children.length;
+
+		this.goto(this.index < count - 1? this.index + 1 : -1);
+	},
+
+	previous: function () {
+		var count = this.ul.children.length;
+
+		this.goto(this.selected? this.index - 1 : count - 1);
+	},
+
+	// Should not be used, highlights specific item without any checks!
+	goto: function (i) {
+		var lis = this.ul.children;
+
+		if (this.selected) {
+			lis[this.index].setAttribute("aria-selected", "false");
+		}
+
+		this.index = i;
+
+		if (i > -1 && lis.length > 0) {
+			lis[i].setAttribute("aria-selected", "true");
+			this.status.textContent = lis[i].textContent;
+		}
+
+		$.fire(this.input, "awesomplete-highlight");
+	},
+
+	select: function (selected) {
+		selected = selected || this.ul.children[this.index];
+
+		if (selected) {
+			var prevented;
+
+			$.fire(this.input, "awesomplete-select", {
+				text: selected.textContent,
+				preventDefault: function () {
+					prevented = true;
+				}
+			});
+
+			if (!prevented) {
+				this.replace(selected.textContent);
+				this.close();
+				$.fire(this.input, "awesomplete-selectcomplete");
+			}
+		}
+	},
+
+	evaluate: function() {
+		var me = this;
+		var value = this.input.value;
+
+		if (value.length >= this.minChars && this._list.length > 0) {
+			this.index = -1;
+			// Populate list with options that match
+			this.ul.innerHTML = "";
+
+			this._list
+				.filter(function(item) {
+					return me.filter(item, value);
+				})
+				.sort(this.sort)
+				.every(function(text, i) {
+					me.ul.appendChild(me.item(text, value));
+
+					return i < me.maxItems - 1;
+				});
+
+			if (this.ul.children.length === 0) {
+				this.close();
+			} else {
+				this.open();
+			}
+		}
+		else {
+			this.close();
+		}
+	}
+};
+
+// Static methods/properties
+
+_.all = [];
+
+_.FILTER_CONTAINS = function (text, input) {
+	return RegExp($.regExpEscape(input.trim()), "i").test(text);
+};
+
+_.FILTER_STARTSWITH = function (text, input) {
+	return RegExp("^" + $.regExpEscape(input.trim()), "i").test(text);
+};
+
+_.SORT_BYLENGTH = function (a, b) {
+	if (a.length !== b.length) {
+		return a.length - b.length;
+	}
+
+	return a < b? -1 : 1;
+};
+
+// Private functions
+
+function configure(properties, o) {
+	for (var i in properties) {
+		var initial = properties[i],
+		    attrValue = this.input.getAttribute("data-" + i.toLowerCase());
+
+		if (typeof initial === "number") {
+			this[i] = parseInt(attrValue);
+		}
+		else if (initial === false) { // Boolean options must be false by default anyway
+			this[i] = attrValue !== null;
+		}
+		else if (initial instanceof Function) {
+			this[i] = null;
+		}
+		else {
+			this[i] = attrValue;
+		}
+
+		if (!this[i] && this[i] !== 0) {
+			this[i] = (i in o)? o[i] : initial;
+		}
+	}
+}
+
+// Helpers
+
+var slice = Array.prototype.slice;
+
+function $(expr, con) {
+	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
+}
+
+function $$(expr, con) {
+	return slice.call((con || document).querySelectorAll(expr));
+}
+
+$.create = function(tag, o) {
+	var element = document.createElement(tag);
+
+	for (var i in o) {
+		var val = o[i];
+
+		if (i === "inside") {
+			$(val).appendChild(element);
+		}
+		else if (i === "around") {
+			var ref = $(val);
+			ref.parentNode.insertBefore(element, ref);
+			element.appendChild(ref);
+		}
+		else if (i in element) {
+			element[i] = val;
+		}
+		else {
+			element.setAttribute(i, val);
+		}
+	}
+
+	return element;
+};
+
+$.bind = function(element, o) {
+	if (element) {
+		for (var event in o) {
+			var callback = o[event];
+
+			event.split(/\s+/).forEach(function (event) {
+				element.addEventListener(event, callback);
+			});
+		}
+	}
+};
+
+$.fire = function(target, type, properties) {
+	var evt = document.createEvent("HTMLEvents");
+
+	evt.initEvent(type, true, true );
+
+	for (var j in properties) {
+		evt[j] = properties[j];
+	}
+
+	target.dispatchEvent(evt);
+};
+
+$.regExpEscape = function (s) {
+	return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
+}
+
+// Initialization
+
+function init() {
+	$$("input.awesomplete").forEach(function (input) {
+		new _(input);
+	});
+}
+
+// Are we in a browser? Check for Document constructor
+if (typeof Document !== "undefined") {
+	// DOM already loaded?
+	if (document.readyState !== "loading") {
+		init();
+	}
+	else {
+		// Wait for it
+		document.addEventListener("DOMContentLoaded", init);
+	}
+}
+
+_.$ = $;
+_.$$ = $$;
+
+// Make sure to export Awesomplete on self when in a browser
+if (typeof self !== "undefined") {
+	self.Awesomplete = _;
+}
+
+// Expose Awesomplete as a CJS module
+if (typeof exports === "object") {
+	module.exports = _;
+}
+
+return _;
+
+}());

data/vendor/assets/javascripts/jquery.scrollTo.js

@@ -0,0 +1,210 @@
+/*!
+ * jQuery.scrollTo
+ * Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
+ * Licensed under MIT
+ * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
+ * @projectDescription Lightweight, cross-browser and highly customizable animated scrolling with jQuery
+ * @author Ariel Flesler
+ * @version 2.1.2
+ */
+;(function(factory) {
+	'use strict';
+	if (typeof define === 'function' && define.amd) {
+		// AMD
+		define(['jquery'], factory);
+	} else if (typeof module !== 'undefined' && module.exports) {
+		// CommonJS
+		module.exports = factory(require('jquery'));
+	} else {
+		// Global
+		factory(jQuery);
+	}
+})(function($) {
+	'use strict';
+
+	var $scrollTo = $.scrollTo = function(target, duration, settings) {
+		return $(window).scrollTo(target, duration, settings);
+	};
+
+	$scrollTo.defaults = {
+		axis:'xy',
+		duration: 0,
+		limit:true
+	};
+
+	function isWin(elem) {
+		return !elem.nodeName ||
+			$.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1;
+	}		
+
+	$.fn.scrollTo = function(target, duration, settings) {
+		if (typeof duration === 'object') {
+			settings = duration;
+			duration = 0;
+		}
+		if (typeof settings === 'function') {
+			settings = { onAfter:settings };
+		}
+		if (target === 'max') {
+			target = 9e9;
+		}
+
+		settings = $.extend({}, $scrollTo.defaults, settings);
+		// Speed is still recognized for backwards compatibility
+		duration = duration || settings.duration;
+		// Make sure the settings are given right
+		var queue = settings.queue && settings.axis.length > 1;
+		if (queue) {
+			// Let's keep the overall duration
+			duration /= 2;
+		}
+		settings.offset = both(settings.offset);
+		settings.over = both(settings.over);
+
+		return this.each(function() {
+			// Null target yields nothing, just like jQuery does
+			if (target === null) return;
+
+			var win = isWin(this),
+				elem = win ? this.contentWindow || window : this,
+				$elem = $(elem),
+				targ = target, 
+				attr = {},
+				toff;
+
+			switch (typeof targ) {
+				// A number will pass the regex
+				case 'number':
+				case 'string':
+					if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
+						targ = both(targ);
+						// We are done
+						break;
+					}
+					// Relative/Absolute selector
+					targ = win ? $(targ) : $(targ, elem);
+					/* falls through */
+				case 'object':
+					if (targ.length === 0) return;
+					// DOMElement / jQuery
+					if (targ.is || targ.style) {
+						// Get the real position of the target
+						toff = (targ = $(targ)).offset();
+					}
+			}
+
+			var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset;
+
+			$.each(settings.axis.split(''), function(i, axis) {
+				var Pos	= axis === 'x' ? 'Left' : 'Top',
+					pos = Pos.toLowerCase(),
+					key = 'scroll' + Pos,
+					prev = $elem[key](),
+					max = $scrollTo.max(elem, axis);
+
+				if (toff) {// jQuery / DOMElement
+					attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]);
+
+					// If it's a dom element, reduce the margin
+					if (settings.margin) {
+						attr[key] -= parseInt(targ.css('margin'+Pos), 10) || 0;
+						attr[key] -= parseInt(targ.css('border'+Pos+'Width'), 10) || 0;
+					}
+
+					attr[key] += offset[pos] || 0;
+
+					if (settings.over[pos]) {
+						// Scroll to a fraction of its width/height
+						attr[key] += targ[axis === 'x'?'width':'height']() * settings.over[pos];
+					}
+				} else {
+					var val = targ[pos];
+					// Handle percentage values
+					attr[key] = val.slice && val.slice(-1) === '%' ?
+						parseFloat(val) / 100 * max
+						: val;
+				}
+
+				// Number or 'number'
+				if (settings.limit && /^\d+$/.test(attr[key])) {
+					// Check the limits
+					attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max);
+				}
+
+				// Don't waste time animating, if there's no need.
+				if (!i && settings.axis.length > 1) {
+					if (prev === attr[key]) {
+						// No animation needed
+						attr = {};
+					} else if (queue) {
+						// Intermediate animation
+						animate(settings.onAfterFirst);
+						// Don't animate this axis again in the next iteration.
+						attr = {};
+					}
+				}
+			});
+
+			animate(settings.onAfter);
+
+			function animate(callback) {
+				var opts = $.extend({}, settings, {
+					// The queue setting conflicts with animate()
+					// Force it to always be true
+					queue: true,
+					duration: duration,
+					complete: callback && function() {
+						callback.call(elem, targ, settings);
+					}
+				});
+				$elem.animate(attr, opts);
+			}
+		});
+	};
+
+	// Max scrolling position, works on quirks mode
+	// It only fails (not too badly) on IE, quirks mode.
+	$scrollTo.max = function(elem, axis) {
+		var Dim = axis === 'x' ? 'Width' : 'Height',
+			scroll = 'scroll'+Dim;
+
+		if (!isWin(elem))
+			return elem[scroll] - $(elem)[Dim.toLowerCase()]();
+
+		var size = 'client' + Dim,
+			doc = elem.ownerDocument || elem.document,
+			html = doc.documentElement,
+			body = doc.body;
+
+		return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]);
+	};
+
+	function both(val) {
+		return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
+	}
+
+	// Add special hooks so that window scroll properties can be animated
+	$.Tween.propHooks.scrollLeft = 
+	$.Tween.propHooks.scrollTop = {
+		get: function(t) {
+			return $(t.elem)[t.prop]();
+		},
+		set: function(t) {
+			var curr = this.get(t);
+			// If interrupt is true and user scrolled, stop animating
+			if (t.options.interrupt && t._last && t._last !== curr) {
+				return $(t.elem).stop();
+			}
+			var next = Math.round(t.now);
+			// Don't waste CPU
+			// Browsers don't render floating point scroll
+			if (curr !== next) {
+				$(t.elem)[t.prop](next);
+				t._last = this.get(t);
+			}
+		}
+	};
+
+	// AMD requirement
+	return $scrollTo;
+});

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: active_admin_pro
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.1.6
 platform: ruby
 authors:
 - Brian Pattison
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-02-04 00:00:00.000000000 Z
+date: 2016-02-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin
@@ -303,6 +303,7 @@ files:
 - app/assets/javascripts/active_admin_pro.js
 - app/assets/javascripts/active_admin_pro/actions/new.js
 - app/assets/javascripts/active_admin_pro/actions/show.js
+- app/assets/javascripts/active_admin_pro/components/autocomplete_input.js
 - app/assets/javascripts/active_admin_pro/components/codemirror_input.js
 - app/assets/javascripts/active_admin_pro/components/link.js
 - app/assets/javascripts/active_admin_pro/components/phone_input.js
@@ -317,6 +318,7 @@ files:
 - app/assets/stylesheets/active_admin_pro/breakpoints.scss
 - app/assets/stylesheets/active_admin_pro/components/_input_variables.scss
 - app/assets/stylesheets/active_admin_pro/components/actions.scss
+- app/assets/stylesheets/active_admin_pro/components/autocomplete_input.scss
 - app/assets/stylesheets/active_admin_pro/components/boolean_input.scss
 - app/assets/stylesheets/active_admin_pro/components/button.scss
 - app/assets/stylesheets/active_admin_pro/components/check_boxes_input.scss
@@ -468,6 +470,7 @@ files:
 - app/assets/stylesheets/active_admin_pro/vendor/neat/settings/_visual-grid.scss
 - app/assets/stylesheets/active_admin_pro/vendor/normalize.css
 - app/assets/stylesheets/codemirror/themes/active_admin_pro.scss
+- app/inputs/autocomplete_input.rb
 - app/inputs/codemirror_input.rb
 - app/inputs/datepicker_input.rb
 - app/inputs/phone_input.rb
@@ -483,6 +486,7 @@ files:
 - lib/generators/active_admin_pro/install_generator.rb
 - lib/tasks/active_admin_pro_tasks.rake
 - spec/spec_helper.rb
+- vendor/assets/javascripts/awesomplete.js
 - vendor/assets/javascripts/bootstrap.js
 - vendor/assets/javascripts/codemirror.js
 - vendor/assets/javascripts/codemirror/addons/comment/comment.js
@@ -575,6 +579,7 @@ files:
 - vendor/assets/javascripts/codemirror/modes/yaml.js
 - vendor/assets/javascripts/intl-tel-input.js
 - vendor/assets/javascripts/intl-tel-utils.js
+- vendor/assets/javascripts/jquery.scrollTo.js
 - vendor/assets/javascripts/slug.js
 - vendor/assets/javascripts/summernote.js
 - vendor/assets/stylesheets/codemirror.css