ESIR
/
KiWi-Calendar
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add calendar css

master
AmarOk1412 11 years ago
parent
ca3ee42579
commit
d694d32091
2 changed files with 481 additions and 11 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +380
    -3
      index.css
  2. +101
    -8
      index.html

+ 380
- 3
index.css View File

@ -1,6 +1,7 @@
body body
{ {
padding:0px;
padding:0px;
overflow:hidden;
} }
#title #title
@ -143,11 +144,12 @@ input[type="checkbox"]:checked + label span {
height:100%; height:100%;
margin:0; margin:0;
margin-left:-10px; margin-left:-10px;
background-color:#f1f1f1;
} }
#footer #footer
{ {
position:absolute;
position:fixed;
background-color:#f1f1f1; background-color:#f1f1f1;
bottom:0px; bottom:0px;
height:54px; height:54px;
@ -163,12 +165,387 @@ input[type="checkbox"]:checked + label span {
margin-right:25px; margin-right:25px;
} }
#exMois
{
margin-bottom:-10px;
margin-top:-10px;
height:30px;
width:30%;
margin-left:auto;
margin-right:auto;
}
#Mois #Mois
{ {
text-align:center; text-align:center;
margin-top:10px;
font-size: 30px; font-size: 30px;
margin-bottom:-30px; margin-bottom:-30px;
} }
#exLess
{
width:40px;
height:40px;
margin-top:-5px;
margin-left:290px;
}
#exMore
{
width:40px;
height:40px;
margin-bottom:-45px;
margin-left:80px;
}
/*Calendar*/
table
{
width:100%;
margin:0;
padding:0;
border-style:none;
table-layout: fixed;
}
tr
{
height:250px;
border-style:none;
margin:0;
width:100%;
padding:0;
}
td
{
border-style:none;
height:100%;
margin:0;
padding:0;
}
td:hover
{
background-color: #40c1e6;
}
tr #date
{
font-size:30px;
margin:20px;
color:#2b2b2b;
}
#calendar #event
{
margin:0;
border:1px solid #2b2b2b;
height:100%;
width:100%;
}
#link
{
margin-left:10px;
font-size:12px;
}
/*BURGER BUTTON*/
.items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 24px;
}
.item {
margin: 12px;
}
/* =============================================================================
MENU TOGGLE SWITCHES
============================================================================= */
/**
* Toggle Switch Globals
*
* All switches should take on the class `cmn-toggle-switch` as well as their
* variant that will give them unique properties. This class is an overview
* class that acts as a reset for all versions of the icon.
*/
.cmn-toggle-switch {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 108px;
height: 96px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.cmn-toggle-switch:focus {
outline: none;
}
.cmn-toggle-switch span {
display: block;
position: absolute;
top: 45px;
left: 18px;
right: 18px;
height: 6px;
background: white;
}
.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 6px;
background-color: #fff;
content: "";
}
.cmn-toggle-switch span::before {
top: -27px;
}
.cmn-toggle-switch span::after {
bottom: -27px;
}
/**
* Style 1
*
* Rotating hamburger icon (rot), that simply rotates 90 degrees when activated.
* Nothing too fancy, simple transition.
*/
.cmn-toggle-switch__rot {
background-color: #28aadc;
}
.cmn-toggle-switch__rot span {
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
/* active state, i.e. menu open */
.cmn-toggle-switch__rot.active {
background-color: #166888;
}
.cmn-toggle-switch__rot.active span {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/**
* Style 2
*
* Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
* down to center and transform into an "x".
*/
.cmn-toggle-switch__htx {
background-color: #ff3264;
}
.cmn-toggle-switch__htx span {
-webkit-transition: background 0 0.3s;
transition: background 0 0.3s;
}
.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
-webkit-transition-duration: 0.3s, 0.3s;
transition-duration: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0;
transition-delay: 0.3s, 0;
}
.cmn-toggle-switch__htx span::before {
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.cmn-toggle-switch__htx span::after {
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.cmn-toggle-switch__htx.active {
background-color: #cb0032;
}
.cmn-toggle-switch__htx.active span {
background: none;
}
.cmn-toggle-switch__htx.active span::before {
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.cmn-toggle-switch__htx.active span::after {
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
-webkit-transition-delay: 0, 0.3s;
transition-delay: 0, 0.3s;
}
/**
* Style 3
*
* Hamburger to left-arrow (htla). Hamburger menu transforms to a left-pointing
* arrow. Usually indicates an off canvas menu sliding in from left that
* will be close on re-click of the icon.
*/
.cmn-toggle-switch__htla {
background-color: #32dc64;
}
.cmn-toggle-switch__htla span {
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.cmn-toggle-switch__htla span::before {
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
transition: transform 0.3s, width 0.3s, top 0.3s;
}
.cmn-toggle-switch__htla span::after {
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
/* active state, i.e. menu open */
.cmn-toggle-switch__htla.active {
background-color: #18903c;
}
.cmn-toggle-switch__htla.active span {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.cmn-toggle-switch__htla.active span::before,
.cmn-toggle-switch__htla.active span::after {
width: 50%;
}
.cmn-toggle-switch__htla.active span::before {
top: 0;
-webkit-transform: translateX(42px) translateY(3px) rotate(45deg);
-ms-transform: translateX(42px) translateY(3px) rotate(45deg);
transform: translateX(42px) translateY(3px) rotate(45deg);
}
.cmn-toggle-switch__htla.active span::after {
bottom: 0;
-webkit-transform: translateX(42px) translateY(-3px) rotate(-45deg);
-ms-transform: translateX(42px) translateY(-3px) rotate(-45deg);
transform: translateX(42px) translateY(-3px) rotate(-45deg);
}
/**
* Style 4
*
* Hamburger to right-arrow (htra). Hamburger menu transforms to a
* right-pointing arrow. Usually indicates an off canvas menu sliding in from
* right that will be close on re-click of the icon.
*/
.cmn-toggle-switch__htra {
background-color: #ff9650;
}
.cmn-toggle-switch__htra span {
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.cmn-toggle-switch__htra span::before {
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
transition: transform 0.3s, width 0.3s, top 0.3s;
}
.cmn-toggle-switch__htra span::after {
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
/* active state, i.e. menu open */
.cmn-toggle-switch__htra.active {
background-color: #e95d00;
}
.cmn-toggle-switch__htra.active span {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.cmn-toggle-switch__htra.active span::before,
.cmn-toggle-switch__htra.active span::after {
width: 50%;
}
.cmn-toggle-switch__htra.active span::before {
top: 0;
-webkit-transform: translateX(-6px) translateY(3px) rotate(-45deg);
-ms-transform: translateX(-6px) translateY(3px) rotate(-45deg);
transform: translateX(-6px) translateY(3px) rotate(-45deg);
}
.cmn-toggle-switch__htra.active span::after {
bottom: 0;
-webkit-transform: translateX(-6px) translateY(-3px) rotate(45deg);
-ms-transform: translateX(-6px) translateY(-3px) rotate(45deg);
transform: translateX(-6px) translateY(-3px) rotate(45deg);
}

+ 101
- 8
index.html View File

@ -6,13 +6,6 @@
<link rel="stylesheet" href="./index.css" /> <link rel="stylesheet" href="./index.css" />
<link rel="icon" type="image/png" href="favicon.png" /> <link rel="icon" type="image/png" href="favicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]--> <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
<!--Using jQuery and jQuery UI for display effects-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--Using the hamburger menu display code-->
<script src="js/hamburger.js"></script>
</head> </head>
<body> <body>
<header id="title"> <header id="title">
@ -74,10 +67,110 @@
+ Ajouter un Évènement + Ajouter un Évènement
</div> </div>
</nav> </nav>
<div class="items">
<div class="item">
<button class="cmn-toggle-switch cmn-toggle-switch__rot">
<span>toggle menu</span>
</button>
</div>
</div>
<div id="calendar"> <div id="calendar">
<table border="1">
<tr>
<td><div id="event"><div id="date">6</div>
<div id="link">Conférence - Sécurité</div></td>
<td><div id="event"><div id="date">7</div>
</td>
<td><div id="event"><div id="date">8</div>
</td>
<td><div id="event"><div id="date">9</div>
<div id="link">Club tricot</div></td>
<td><div id="event"><div id="date">10</div>
<div id="link">Grosse soirée</div></td>
<td><div id="event"><div id="date">11</div>
</td>
<td><div id="event"><div id="date">12</div>
<div id="link">Invasion de kakapos</div></td>
</tr>
<tr>
<td><div id="event"><div id="date">6</div>
<div id="link">Conférence - Sécurité</div></td>
<td><div id="event"><div id="date">7</div>
</td>
<td><div id="event"><div id="date">8</div>
</td>
<td><div id="event"><div id="date">9</div>
<div id="link">Club tricot</div></td>
<td><div id="event"><div id="date">10</div>
<div id="link">Grosse soirée</div></td>
<td><div id="event"><div id="date">11</div>
</td>
<td><div id="event"><div id="date">12</div>
<div id="link">Invasion de kakapos</div></td>
</tr>
<tr>
<td><div id="event"><div id="date">6</div>
<div id="link">Conférence - Sécurité</div></td>
<td><div id="event"><div id="date">7</div>
</td>
<td><div id="event"><div id="date">8</div>
</td>
<td><div id="event"><div id="date">9</div>
<div id="link">Club tricot</div></td>
<td><div id="event"><div id="date">10</div>
<div id="link">Grosse soirée</div></td>
<td><div id="event"><div id="date">11</div>
</td>
<td><div id="event"><div id="date">12</div>
<div id="link">Invasion de kakapos</div></td>
</tr>
<tr>
<td><div id="event"><div id="date">6</div>
<div id="link">Conférence - Sécurité</div></td>
<td><div id="event"><div id="date">7</div>
</td>
<td><div id="event"><div id="date">8</div>
</td>
<td><div id="event"><div id="date">9</div>
<div id="link">Club tricot</div></td>
<td><div id="event"><div id="date">10</div>
<div id="link">Grosse soirée</div></td>
<td><div id="event"><div id="date">11</div>
</td>
<td><div id="event"><div id="date">12</div>
<div id="link">Invasion de kakapos</div></td>
</tr>
<tr>
<td><div id="event"><div id="date">6</div>
<div id="link">Conférence - Sécurité</div></td>
<td><div id="event"><div id="date">7</div>
</td>
<td><div id="event"><div id="date">8</div>
</td>
<td><div id="event"><div id="date">9</div>
<div id="link">Club tricot</div></td>
<td><div id="event"><div id="date">10</div>
<div id="link">Grosse soirée</div></td>
<td><div id="event"><div id="date">11</div>
</td>
<td><div id="event"><div id="date">12</div>
<div id="link">Invasion de kakapos</div></td>
</tr>
</table>
<div id="footer"> <div id="footer">
<div id="TextFooter"> <div id="TextFooter">
<div id="Mois">Mars 2015</div>
<div id="exMois">
<a id="ancherMore" href="#More" onclick="alert('Click on More');"><img id="exMore" alt="expand less" src="images/expand_less.png" /></a>
<div id="Mois">Mars 2015</div>
<a id="ancherLess" href="#Less" onclick="alert('Click on Less');"><img id="exLess" alt="expand more" src="images/expand_more.png" /></a>
</div>
<div id="Export">Exporter en <a href="#RSS">RSS</a>, <a href="#iCal">iCal</a>, <a href="#webCal">WebCal</a></div> <div id="Export">Exporter en <a href="#RSS">RSS</a>, <a href="#iCal">iCal</a>, <a href="#webCal">WebCal</a></div>
</div> </div>
<div> <div>


Write Preview
Loading…
Cancel
Save