Permalink
Browse files

Merge pull request #1 from red1374/master

Added new style "Moder Gray"
  • Loading branch information...
2 parents 2a0e887 + a1675ac commit 42059da7b56513e4adb8d5472b395fb912fd71f9 @atc-master atc-master committed Oct 28, 2014
@@ -0,0 +1,143 @@
+/**
+ * AddToCalendar Modern Gray Style
+ * http://addtocalendar.com
+ */
+
+/* Base */
+
+.addtocalendar var{
+ display: none;
+}
+.add-calendar{
+ position: relative;
+}
+.addtocalendar {
+ display: inline-block;
+ background: transparent!important;
+ position: relative;
+}
+
+.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: 192px;
+ z-index: 900;
+}
+.footer .atcb-list{
+ top: -152px;
+}
+.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;
+}
+
+
+/* Modern Gray */
+
+.atc-style-moder-gray .atcb-link
+{
+ margin: 0;
+ display: block;
+ width: 167px;
+ height: 25px;
+ padding: 3px 0 0 29px;
+ font-size: 12px;
+ line-height: 25px;
+ letter-spacing: 0.25px;
+ text-align: center;
+ text-decoration: none;
+ color: #fff;
+ background: url(bg-btn-calendar.png) no-repeat top left;
+ outline:none;
+ zoom: 1;
+}
+.atc-style-moder-gray .atcb-link:hover,
+.atc-style-moder-gray .atcb-link:active,
+.atc-style-moder-gray .atcb-link:focus
+{
+ background-position:0 -28px;
+}
+.atc-style-moder-gray .atcb-list {
+ width: 196px;
+ border: 1px solid #ebebeb;
+ border-radius: 2px;
+ height: 150px;
+}
+
+.atc-style-moder-gray .atcb-list,
+.atc-style-moder-gray .atcb-item
+{
+ background: #fff;
+ color: #1d2326;
+}
+
+.atc-style-moder-gray .atcb-item,
+.atc-style-moder-gray .atcb-item-link
+{
+ vertical-align: middle;
+ zoom: 1;
+}
+
+.atc-style-moder-gray .atcb-item-link,
+.atc-style-moder-gray .atcb-item-link:hover,
+.atc-style-moder-gray .atcb-item-link:active,
+.atc-style-moder-gray .atcb-item-link:focus
+{
+ font-size: 12px;
+ letter-spacing:0.25px;
+ text-decoration: none;
+ outline: none;
+ padding: 5px 15px;
+ color:#1d2326;
+}
+
+.atc-style-moder-gray .atcb-item-link:hover,
+.atc-style-moder-gray .atcb-item-link:active,
+.atc-style-moder-gray .atcb-item-link:focus
+{
+ color: #fff;
+}
+
+.atc-style-moder-gray .atcb-item.hover,
+.atc-style-moder-gray .atcb-item:hover {
+ background: #39506f;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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-moder-gray.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-moder-gray">
+ <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 comments on commit 42059da

Please sign in to comment.