Permalink
Browse files

Add atc styles

  • Loading branch information...
1 parent a273966 commit d39d7db53a04fe14c3ae3751b80754256c232187 AddToCalendar Master committed Oct 25, 2014
View
@@ -0,0 +1,69 @@
+/**
+ * AddToCalendar Base CSS
+ * http://addtocalendar.com
+ */
+
+/* Base */
+
+.addtocalendar var{
+ display: none;
+}
+
+.addtocalendar {
+ position: relative;
+ display: inline-block;
+ background: transparent!important;
+}
+
+.atcb-link {
+ display: block;
+ outline: none!important;
+ cursor: pointer;
+}
+
+.atcb-link:focus~ul,
+.atcb-link:active~ul,
+.atcb-list:hover{
+ visibility:visible;
+}
+
+.atcb-list {
+ visibility: hidden;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 170px;
+ z-index: 900;
+}
+
+.atcb-list,
+.atcb-item
+{
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ background: #fff;
+}
+
+.atcb-item {
+ float: none;
+ text-align: left;
+}
+
+.atcb-item-link
+{
+ text-decoration: none;
+ outline: none;
+ display: block;
+}
+
+.atcb-item.hover,
+.atcb-item:hover {
+ position: relative;
+ z-index: 900;
+ cursor: pointer;
+ text-decoration: none;
+ outline: none;
+}
+
+
View
@@ -0,0 +1,43 @@
+<!--
+ AddToCalendar style demo
+ Free customizable JavaScript widget "Add to Calendar" for event page.
+ It allows users to easily schedule the event in their calendar.
+ Learn more: http://addtocalendar.com
+-->
+<html>
+<head>
+ <!-- 1. Include style -->
+ <link href="atc-base.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+ <!-- 2. Include script -->
+ <script type="text/javascript">(function () {
+ if (window.addtocalendar)if(typeof window.addtocalendar.start == "function")return;
+ if (window.ifaddtocalendar == undefined) { window.ifaddtocalendar = 1;
+ var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
+ s.type = 'text/javascript';s.charset = 'UTF-8';s.async = true;
+ s.src = ('https:' == window.location.protocol ? 'https' : 'http')+'://addtocalendar.com/atc/1.5/atc.min.js';
+ var h = d[g]('body')[0];h.appendChild(s); }})();
+ </script>
+
+ <p>
+ Style <a href="atc-base.css">atc-base.css</a> is the core for any other styles. Example below.
+ </p>
+
+ <p>
+ <!-- 3. Place event data -->
+ <span class="addtocalendar">
+ <var class="atc_event">
+ <var class="atc_date_start">2014-05-04 12:00:00</var>
+ <var class="atc_date_end">2014-05-04 18:00:00</var>
+ <var class="atc_timezone">Europe/London</var>
+ <var class="atc_title">Star Wars Day Party</var>
+ <var class="atc_description">May the force be with you</var>
+ <var class="atc_location">Tatooine</var>
+ <var class="atc_organizer">Luke Skywalker</var>
+ <var class="atc_organizer_email">luke@starwars.com</var>
+ </var>
+ </span>
+ </p>
+</body>
+</html>
@@ -0,0 +1,138 @@
+/**
+ * AddToCalendar style Blue
+ * http://addtocalendar.com
+ */
+
+/* Base */
+
+.addtocalendar var{
+ display: none;
+}
+
+.addtocalendar {
+ position: relative;
+ display: inline-block;
+ background: transparent!important;
+}
+
+.atcb-link {
+ display: block;
+ outline: none!important;
+ cursor: pointer;
+}
+
+.atcb-link:focus~ul,
+.atcb-link:active~ul,
+.atcb-list:hover{
+ visibility:visible;
+}
+
+.atcb-list {
+ visibility: hidden;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 170px;
+ z-index: 900;
+}
+
+.atcb-list,
+.atcb-item
+{
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ background: #fff;
+}
+
+.atcb-item {
+ float: none;
+ text-align: left;
+}
+
+.atcb-item-link
+{
+ text-decoration: none;
+ outline: none;
+ display: block;
+}
+
+.atcb-item.hover,
+.atcb-item:hover {
+ position: relative;
+ z-index: 900;
+ cursor: pointer;
+ text-decoration: none;
+ outline: none;
+}
+
+
+/* Blue */
+
+.atc-style-blue .atcb-link,
+.atc-style-blue .atcb-link:hover,
+.atc-style-blue .atcb-link:active,
+.atc-style-blue .atcb-link:focus
+{
+ margin: 0;
+ padding: 7px 25px;
+ color: #fff;
+ font-family: "Verdana";
+ font-size: 14px;
+ text-decoration: none;
+ outline: none;
+ line-height: 20px;
+ vertical-align: middle;
+ background: rgb(66,129,244);
+ box-shadow: 0 0 40px rgba(0, 0, 0, .13) inset;
+ border-radius: 4px;
+ zoom: 1;
+}
+
+.atc-style-blue .atcb-list {
+ width: 170px;
+ border: 1px solid rgb(186,186,186);
+ border-radius: 2px;
+ box-shadow: 0 0 5px #AAA;
+}
+
+.atc-style-blue .atcb-list,
+.atc-style-blue .atcb-item
+{
+ background: #fff;
+ color: #000;
+}
+
+.atc-style-blue .atcb-item,
+.atc-style-blue .atcb-item-link
+{
+ line-height: 1.3em;
+ vertical-align: middle;
+ zoom: 1;
+}
+
+.atc-style-blue .atcb-item-link,
+.atc-style-blue .atcb-item-link:hover,
+.atc-style-blue .atcb-item-link:active,
+.atc-style-blue .atcb-item-link:focus
+{
+ color: #000;
+ font-family: "Verdana";
+ font-size: 14px;
+ text-decoration: none;
+ outline: none;
+ padding: 5px 15px;
+}
+
+.atc-style-blue .atcb-item-link:hover,
+.atc-style-blue .atcb-item-link:active,
+.atc-style-blue .atcb-item-link:focus
+{
+ color: #fff;
+}
+
+.atc-style-blue .atcb-item.hover,
+.atc-style-blue .atcb-item:hover {
+ background: rgb(66,129,244);
+}
+
@@ -0,0 +1,37 @@
+<!--
+ AddToCalendar style demo
+ Free customizable JavaScript widget "Add to Calendar" for event page.
+ It allows users to easily schedule the event in their calendar.
+ Learn more: http://addtocalendar.com
+-->
+<html>
+<head>
+ <!-- 1. Include style -->
+ <link href="atc-style-blue.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+ <!-- 2. Include script -->
+ <script type="text/javascript">(function () {
+ if (window.addtocalendar)if(typeof window.addtocalendar.start == "function")return;
+ if (window.ifaddtocalendar == undefined) { window.ifaddtocalendar = 1;
+ var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
+ s.type = 'text/javascript';s.charset = 'UTF-8';s.async = true;
+ s.src = ('https:' == window.location.protocol ? 'https' : 'http')+'://addtocalendar.com/atc/1.5/atc.min.js';
+ var h = d[g]('body')[0];h.appendChild(s); }})();
+ </script>
+
+ <!-- 3. Place event data -->
+ <span class="addtocalendar atc-style-blue">
+ <var class="atc_event">
+ <var class="atc_date_start">2014-05-04 12:00:00</var>
+ <var class="atc_date_end">2014-05-04 18:00:00</var>
+ <var class="atc_timezone">Europe/London</var>
+ <var class="atc_title">Star Wars Day Party</var>
+ <var class="atc_description">May the force be with you</var>
+ <var class="atc_location">Tatooine</var>
+ <var class="atc_organizer">Luke Skywalker</var>
+ <var class="atc_organizer_email">luke@starwars.com</var>
+ </var>
+ </span>
+</body>
+</html>
@@ -0,0 +1,80 @@
+/**
+ * AddToCalendar style Icon
+ * http://addtocalendar.com
+ */
+
+/* Base */
+
+.addtocalendar var{
+ display: none;
+}
+
+.addtocalendar {
+ position: relative;
+ display: inline-block;
+ background: transparent!important;
+}
+
+.atcb-link {
+ display: block;
+ outline: none!important;
+ cursor: pointer;
+}
+
+.atcb-link:focus~ul,
+.atcb-link:active~ul,
+.atcb-list:hover{
+ visibility:visible;
+}
+
+.atcb-list {
+ visibility: hidden;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 170px;
+ z-index: 900;
+}
+
+.atcb-list,
+.atcb-item
+{
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ background: #fff;
+}
+
+.atcb-item {
+ float: none;
+ text-align: left;
+}
+
+.atcb-item-link
+{
+ text-decoration: none;
+ outline: none;
+ display: block;
+}
+
+.atcb-item.hover,
+.atcb-item:hover {
+ position: relative;
+ z-index: 900;
+ cursor: pointer;
+ text-decoration: none;
+ outline: none;
+}
+
+
+/* Icon */
+
+.atc-style-button-icon .atcb-link,
+.atc-style-button-icon .atcb-link:hover,
+.atc-style-button-icon .atcb-link:active,
+.atc-style-button-icon .atcb-link:focus
+{
+ text-decoration: none;
+ outline: none;
+ padding: 2px 2px;
+}
Oops, something went wrong.

0 comments on commit d39d7db

Please sign in to comment.